Based on UX research findings, we identified a major problem with the Build your package page. It was excessively long, requiring over 37 scrolls on mobile devices, leading to high user dissatisfaction. We were asked to revamp the page's layout and presentation, specifically by reducing the amount of information presented.
Accordion experimenting
I experimented with the accordions available within our design system, conducting tests across different breakpoints. I carefully scrutinised each version and opted for the one that most effectively met the requirements.
Device and plan panel
To reduce the page height, we merged the separate panels for the device and airtime, which previously included all legal terms and conditions. The combined section now features a drop-down accordion to hide the terms and conditions and offers.
Extra cards
The extra cards were also flagged for being too tall. A UX researcher provided feedback that the copy explaining the extras was unnecessary and confusing for customers. As a result, UX presented a simplified version of the card, consisting of a radio button, logo, and price. However, I believed this version lacked the excitement of purchasing an extra. To address this, I took the initiative to design a new extra card component that could incorporate exciting imagery along with the price, vendor logo, and terms and conditions. I created a matrix to assist the developers in building the cards accurately. The matrix outlined the new extra cards in various states, including default, selected, included, and disabled.
Insurance cards
After designing the new extra card component, I ensured consistency by implementing the same component for the insurance card.
Accordion states
I developed the necessary states for the accordion, including the selected state. Initially, the selected accordion state was presented as a line of copy by the UX researcher. To maintain consistency with our design system on this page, I conducted an audit and created a selected card component based on the design system's rules.
Next steps
The designs have been approved by the product owner and business stakeholders. We will work closely with the optimisation team and conduct an A/B test. Based on the results, we may make additional improvements to finalise the design.
