UX research revealed a major usability issue on the Customisation page, it was excessively long, requiring over 40 scrolls on mobile, which led to frustration and drop-offs. Our goal was to streamline the layout and simplify content presentation while retaining all essential information.
Accordion experimenting
To address the page’s length, I explored different accordion patterns available in our design system, testing across multiple breakpoints to assess readability, interaction, and load behaviour. After reviewing each option, I selected the configuration that best balanced clarity, hierarchy, and accessibility.
Device and plan panel
Previously, the Device and Airtime plans were presented in separate panels, each containing extensive legal content. I merged these into a single, unified component, introducing a dropdown accordion to contain terms and offers. This reduced vertical space significantly while keeping key information easily accessible.
Extra cards
The Extras section was another key pain point, cards were overly tall and cluttered. UX feedback indicated that long explanatory copy was confusing and unnecessary.
While a simplified version was proposed (radio button, logo, and price), I felt it lacked the excitement expected in an add-on experience. I therefore designed a new extras card component that incorporated rich imagery, vendor branding, pricing, and terms within a tighter visual hierarchy.
To support developers, I created a detailed component matrix defining all states, default, selected, included, and disabled, ensuring consistency and ease of implementation.
Insurance cards
After designing the new extra card component, I ensured consistency by implementing the same component for the insurance card.
Accordion states
The original accordion “selected state” was presented as plain text, which lacked visual clarity. To align with the design system, I audited existing patterns and created a selected card state consistent with established interaction rules, improving both usability and visual continuity.
Next steps
The redesign was approved by the Product Owner and key stakeholders. However, budget constraints have temporarily delayed launch.
Once live, the plan is to collaborate with the Optimisation team to run an A/B test validating impact on engagement and conversion. Insights from that test will inform any further enhancements before full rollout.
Design impact
This project demonstrated how thoughtful simplification and strong design system governance can improve both usability and development efficiency. Even before launch, the revised architecture reduced page height by over 40% in prototype testing, laying the groundwork for a smoother, faster checkout experience.