Enhancing Plan Selection
Plan Card Component
Plan cards are key part of any purchase process, they show relevant information for users, like price, product name, coverage details. It was neccesary to improve the component and its interaction to give users an intuitive process and avoid lack off clarity when selecting a plan that could lead to drop–offs.
My role
Product Designer
Project type
Component redesign
Timeline
Q3 2023
Tools & skills:
Figma, Maze, UI Design, User Testing, Prototyping, Design System
Context
In the purchase flow of insurance products there is a specific younger audience: “Baby Prosperous” profile, part of the “Change Agents” segment.
This users are young and value a fast and simple process. The products had low ticket, basic coverage, and with a non technical language in information and needed a shorter and clearer purchase journey. That’s why key components as Plan cards had to be designed with this in mind to make the selection process intuitive.
Problem
In previous user testings sessions, a pain point was identified: interactions when selecting a plan by clicking or tapping, wasn’t clear enough, users didn’t perceive the card was selected.
Hypothesis
If the interaction to select a plan becomes more evident, users will be able to continue and complete the steps easily without issues.
Exploration
Several options were designed to make a clearer and evident card selection interaction. All of them included elements like price, plan name, plan’s info, label and CTA. Each option explored visual structure, interaction feedback and selected states.
03 iterations were done, first two tests weren’t conclusive so it was necessary to refine and test again., here’s how the options looked like:
First iteration
Tested option 01, 02 and 03
Second iteration
Tested option 04 , 05 , 02
Third iteration
Tested option 04 and 05 (best performers)
Testing & Decisions
We used Maze to run the three UT. In addition to the component testing, users shared thoughts that helped to have visual clarity and experience expectations.
Resultados
From the last iteration, option 5 was preferred by 64% of users over opt. 4 that received 36%. These results showed users find option B as intuitive, clear and easier to understand when selecting a plan.
UT Learnings
The card interactions is more understandable through the button (changing color and label). The use of color green as a “success” color gives users an extra feedback of what is happening.
Final Design
With final results, the next step was defining the component behavior, specs, and usage guidelines.
