Background

A fellow designer needed a quick solution for the pricing section on his website. The main goal was to create a dynamic, interactive, and user-friendly pricing display that adapts to selected options.

Challenge

• Build modular and reusable components in Framer.

• Enable interactivity: tabs, switches, sliders, dynamic changes of pricing and delivery days.

• Set up a system that allows users to personalize their offer (e.g. adding a Brand Identity Book, urgent delivery, different scope levels).

• Deliver everything within a limited time frame, without compromising the user experience.

Component Structure

• Pricing section: the entire section was built as a standalone component.

• Tabs: each tab (e.g. Landing page, Social media, Brand Identity, etc.) is a component that dynamically opens/closes.

• Cards: each pricing card is an interactive component with its own options and links.

• Switch components: toggles for enabling/disabling options (e.g. urgent delivery, brand book), which directly affect price and scope.

• Interactive sliders: for the Brand Identity Book, a slider with three levels appears, adjusting both price and delivery time.

Functionality

• Dynamic adjustment of price based on selected options.

• Visual change of delivery days when urgent delivery is enabled.

• Modularity that allows easy addition of new packages or options.

• Each button redirects to a dedicated page for booking a meeting or call.

Result

• Within two days, a fully functional and interactive pricing section was built.

• The project demonstrated my ability to work with Framer components, override logic, and interactivity.

• The solution is both visually clear and flexible for future upgrades by the client.