Custom Plans
Following a user study conducted by UX researchers, significant issues were identified with the product page. On mobile devices, the page was excessively long, requiring over 37 scrolls, resulting in high user dissatisfaction.To address this issue, I was tasked with simplifying the page by reducing the amount of information being displayed and accomodate the new Limitless proposition.
Research
When examining the current tariff cards, it is concerning to see their excessive height, especially considering the browsing experience on mobile screens. To address this issue, I conducted competitor research to evaluate successful and unsuccessful approaches. I found inspiration from Sky's strategy of grouping repetitive information. Upon analysing the existing pre-built tiles, it became evident that they contain a significant amount of redundant information. I looked at creative examples on Dribble on how to differentiate between different types of plans.
Ideation
I began sketching out various ideas. Out of those, I selected the two most promising concepts and transformed them into grayscale prototypes. Incorporating the feedback received, I further refined these ideas into a single concept and created visual designs.
Changes
Global component
I removed repetitive information such as unlimited minutes and texts, unused data roll over, plans unlinking after 24 months, and 5G readiness, and moved this above the tariffs as a global component.
New module
The Volt boosts feature was also repetitive on the tariffs, so I removed it and made use of our new ‘Whisper’ module to accommodate the Virgin Media cross-sell.
Drop down
On the new tariff tiles, we showcased the top three offers with concise and catchy descriptions. However, if a customer wanted more detailed information regarding the amount of offers and extras included in a specific plan, they could click on the drop-down accordion link.
Badge
I added a badge onto the tariff tiles for plus plans and the new ultimate plan, creating a hierarchy of "good," "better," and "best."
Filter
The plus plan can apply to various tariffs, such as 30GB or 150GB, so I added a filter to help customers navigate these choices.
See more button
I limited the number of pre-built tiles to 3 by default, customers can view additional tiles by clicking the "See more" button.
Userzoom testing
After presenting the visual designs and receiving positive feedback from the business stakeholders, we prepared for testing. Working alongside a UX researcher, we carefully defined the questions to ensure optimal test outcomes and validation. The objective was to simplify the pre-built tariff tiles across different data points and assess participants' comprehension of the offers within a clear hierarchy of "good," "better," and "best" (Standard, Plus, and Ultimate).
In the study, 10 users tested the mobile prototype. 7/10 Participants were able to navigate to the Unlimited tariffs by using the dropdown filter. 8/10 participants were able to use the accordion to view tariff offers without any concerns. 10/10 participants were able to differentiate between the different offers. All users missed the global benefits, it was suggested we use session cam to determine whether customers hover over this section.
Final design
I began sketching out various ideas. Out of those, I selected the two most promising concepts and transformed them into grayscale prototypes. Incorporating the feedback received, I further refined these ideas into a single concept and created visual designs.