Card design is our significant strength in the signup process, its optimization is required to ensure an enjoyable user experience. This necessitated a change.
Research, wireframe, user Flow, UI/UX Design
Problem Statement
& Challenges
- Excessive page length coupled with limited design space, primarily due to the outdated card design.
- Automatic scrolling upon selecting a new card design, leading to a disruptive user experience.
- Challenges in the presentation of pricing, the provision of a ‘free card escape’ option, customization of names, category selection, and quote inclusion, resulting in a congested user interface.
- The absence of a diverse range of card designs negatively impacts sales.
- No kids & teens cards category.
- Unfixed Call-to-Action (CTA) buttons contribute to user confusion when seeking clickable elements.
- Difficulty in distinguishing cards suitable for kids versus teens, potentially causing mismatches in user preferences.
Understanding
the business
Increase Cards Orders
Increase Customisationed Name
Competitive
Analysis
I conducted a thorough analysis of e-commerce websites, fintech companies, and apps. These platforms commonly feature a wide product range with user-friendly filtering options. We also noticed a gap in name customization, which prompted research on how industry leaders like Revolut and others implement this feature. Our goal is to incorporate this critical customization into our platform's design for enhanced capabilities.
Research
We conducted extensive surveys and interviews to enhance information digestibility on this page and align it with user expectations. Our investigation revealed:
- 80% of parents prefer the FREE card option.
- 90% of parents are concerned about the page’s excessive content density.
- 100% of users experienced scrolling issues when selecting a card.
- The pricing of the cards surprised a majority of users.
- 50% of parents find the card presentation suboptimal.
- Users voiced frustration over the inability to view the complete card range.
- Parents occasionally select teen cards for kids, while children tend to choose teen cards.
Validated
Research
As an expedient solution, we have chosen to segregate specific information components, such as card selection and category choice. The quote and legal text will be temporarily omitted to evaluate the impact of this prompt adjustment on the user experience.
Wanted
Results
Ideation
Following an extensive design, research, and testing process, we've successfully identified a version that incorporates best practices from leading e-commerce websites. Notably, this version has contributed to a 10% reduction in the uptake of free cards, largely attributed to our continued promotion of the app as 'free' on the website and landing page. While this outcome represents a positive step, there is further potential for improvement.
Key findings
50
of users opt for the free card.
50
expressed interest in having a customized card.
80
stayed on the page with all the customized cards and various categories.
Final Design
With the new design, users can now easily filter and select the type of cards they wish to view. Cards are presented prominently with a larger display, and the CTA is conveniently accessible. Initially with holding the price on the first screen encourages user exploration. Furthermore, there is potential to introduce a new banner, highlighting limited or unlimited editions for marketing purposes.
Selected card design
The new design empowers users to filter their card preferences effectively. Cards are prominently displayed with a larger format, and the CTA is easily accessible. The deliberate omission of pricing on the initial screen encourages user exploration. Additionally, there's an opportunity to introduce a new banner highlighting limited or unlimited editions, strategically employed for marketing purposes.
What’s next?
After refining the card customization screens, our next objective is to reassess the hierarchy of our sign-up process.
This introduced a new pathway in our sign-up process. If a user wishes to add another child, they can now select an additional card. To address this need, we've developed a new screen and a mechanism that facilitates the ordering of cards for users with multiple children (up to a maximum of 4).
Add more kids
This introduced a new aspect to our sign-up process. If the user wants to add another child, they need to select another card. As a result, we have created a new screen to address this issue and implemented a new mechanism to assist users in ordering a new card if they have more children.
OKRs
Objective
Key result (% Orders)
Before
After
- Launch and drive uptake
- Free card
- Paid card
- 60.3%
- 39.7%
- 51.1%
- 48.9%
