Product
Holafly B2B Center
Client
Holafly
Area
Plan discovery and purchase
Responsibilities
Platforms
Desktop and Mobile
The context
The existing experience presented two large product cards. Each card included:
Although the information was technically available, users had to process several decisions at once.
As the product offering expanded to include Daily, Monthly, Annual and Always On plans, the existing structure became harder to maintain and scale.
Before moving into UI solutions, I worked on clarifying what “reducing visual noise” and “matching the mental model” needed to mean from a product and interaction perspective.
The core problem was not simply that the cards contained too much information. The page was mixing different stages of the purchasing journey.
Comparison
Users needed to understand the available plans and compare their value.
Focus
The interface should avoid exposing multiple forms, totals and actions simultaneously.
Commercial visibility
The Annual plan needed to remain visible as the strongest value proposition.
Product flexibility
The solution needed to support plans with different rules, benefits and configuration requirements.
I proposed focusing the redesign on the following areas:
Plan discovery
Plan Comparison
Product differentiation
Initial plan selection
Plan configuration
Transition into checkout
The project did not redefine pricing, business rules or the complete checkout flow. Those remained outside the design scope.
This distinction helped prevent the redesign from expanding into a broader product and billing initiative.
Before exploring solutions, I defined the following design success criteria.
Make all available plans discoverable.
Help users understand the main differences between plans.
Reduce duplicated information.
Avoid displaying several configuration forms simultaneously.
Separate product selection from product configuration.
Preserve the commercial visibility of the Annual plan.
Support plan-specific rules and fields.
Create a clear transition from comparison to checkout.
Remain scalable as the product offering grows.
Because the project did not yet have post-launch analytics, these criteria were used as design evaluation principles rather than claimed performance results.
Full comparison and configuration cards
The first direction displayed Daily, Monthly and Annual plans side by side. Every card contained its configuration controls, total and purchase CTA.
What worked
The first direction displayed Daily, Monthly and Annual plans side by side. Every card contained its configuration controls, total and purchase CTA.
The pricing-card format was also familiar and commercially effective.
Trade-offs
The interface still exposed several forms, totals and CTAs simultaneously.
It also made Daily, Monthly and Annual appear structurally equivalent, even though Daily required a duration while the recurring plans did not.
This direction supported comparison, but it did not sufficiently reduce cognitive load or visual noise.
One plan at a time
The second direction introduced tabs for Daily, Monthly and Yearly. Only the selected plan and its form were visible.
What worked
This created a much cleaner and more focused configuration experience.
It also scaled better to smaller screens and allowed each plan to use a different form structure.
Trade-offs
Users could no longer compare all options directly. They needed to switch tabs to understand each plan.
The Annual value proposition also became easier to overlook because the full plan information was hidden until the user selected its tab.
This direction improved focus but weakened comparison and commercial visibility.
One-time use and recurrent subscriptions
The third direction grouped plans according to their product behavior:
One-time use
Recurrent subscription
What worked
This direction represented the product model more accurately.
It separated Daily from subscription products and allowed each category to have its own interaction model.
It also reduced cognitive load by helping users begin with a broader need rather than a billing period.
Trade-offs
The additional level of navigation reduced direct comparison.
It also assumed users already understood the difference between one-time use and recurring subscriptions.
Annual was less visible, which weakened the opportunity to communicate its value.
The explorations showed that neither full comparison nor isolated configuration was sufficient on its own.
The strongest experience needed to:
Keep all products visible during discovery.
Remove configuration controls from the comparison stage.
Communicate shared benefits only once.
Reveal plan-specific configuration after selection.
Keep users in context while they completed the purchase.
This led to a progressive model:
Explore → Compare → Select → Configure → Checkout
Plan discovery and comparison
The main page presents Daily, Monthly, Annual and Always On in simplified cards.
Each card focuses only on the information needed to understand and select the product:
Plan name
Pricing model
Equivalent price when relevant
Plan-specific benefits
Commercial label
Selection CTA
The configuration controls, total and validation messages were removed from this stage.
This significantly reduced the density of each card and made the differences between plans easier to scan.
Plan configuration
After selecting a plan, a side sheet opens with the relevant configuration.
The side sheet includes:
Selected plan
Billing information
Quantity selector
Plan-specific configuration
Purchase summary
Total
Checkout CTA
This allows users to focus on one product at a time without losing the context of the comparison page.
The side sheet also provides a flexible container for plans with different configuration requirements.
Reducing duplicated information
In the previous design, common benefits were repeated inside every plan card.
In the final solution, shared benefits were moved into a dedicated section below the plans.
This helped clarify two different types of information:
Plan differentiation
Shared value
What customers receive with Holafly plans in general.
What makes Daily, Monthly, Annual or Always On distinct.
This change reduced repetition while preserving access to important product information.
Supporting commercial hierarchy
The Annual plan remained visible alongside the other options and received a clear “Best value” label.
The design also included equivalent daily pricing for Monthly and Annual, helping users compare value across billing models.
This preserved the upselling opportunity without requiring Annual to dominate the entire page.
Why the final direction was selected
The final direction created the strongest balance between comparison and focus.
It preserved direct visibility of all plans while removing the main source of visual noise: multiple active forms and purchase actions.
It also better supported the product model because each plan could use its own configuration after selection.
The solution was selected because it:
Supported direct plan comparison.
Reduced duplicated content.
Separated selection from configuration.
Preserved Annual’s commercial visibility.
Supported products with different behaviors.
Created a clearer path into checkout.
Provided a more scalable structure for future plans.
Video showcase
See a full walktrough of this case
