Product Progressive Reveal
The role:
Senior Product Designer
Timeline:
6 Months (EE)
The project:
I am designing a seamless, intuitive product page for the iPhone, tailored for both app and web platforms. My focus is on implementing progressive disclosure to streamline user interaction. By allowing users to make one selection at a time, the design reduces cognitive load, ensures clarity, and creates a more engaging experience that minimises decision fatigue.
Outcome:
The redesigned page resulted in a 2.6% increase in conversion rates and a 15% decrease in drop-off rates. Users reported greater clarity and confidence in making purchase decisions. The progressive disclosure model was subsequently adopted across other high-complexity product pages within the platform.
Figma playground:
Goals & Objectives:
Enhanced Usability: I aim to make the experience approachable for all users by breaking down complex decisions into manageable, step-by-step tasks.
Intuitive Navigation: My design ensures that every user, regardless of technical skill level, can easily navigate and complete their product customisation.
Consistency Across Platforms: I’ve prioritised maintaining a uniform experience between the app and web versions while optimising layouts for their respective platforms (e.g., touch-friendly interactions for the app and responsive grids for the web).
The Features:
Step-by-Step Selection Process:
• I’ve structured the flow to guide users through a linear process, unlocking each step only after completing the previous one.
• The sequence includes essential product customisations such as colour selection (e.g., Space Black) and storage options (e.g., 128GB)
Focus on Progressive Disclosure:
• Each decision point is presented independently, ensuring the user focuses on one task at a time without distractions.
• Only information and visuals relevant to the current step are displayed, while others remain hidden or minimised until needed.
Dynamic UI Updates:
• I’ve incorporated dynamic updates to reflect user selections in real time. For instance, when a colour is chosen, the product image updates immediately to showcase the selected option.
• Context-sensitive prompts and descriptions guide users to their next step effortlessly.
Engaging Visual Hierarchy:
• I’ve designed large, clear buttons or cards for each selection to make interactions easy and intuitive.
• High-quality product images and animations enhance the overall visual experience.
Progress Indicator:
• A visual progress indicator (e.g., a horizontal progress bar or numbered steps) helps users track where they are in the process and understand what’s next.
Seamless Transitions:
• I’ve added smooth animations to signal step completion and transition users to the next stage, ensuring a cohesive experience.
The results:
The redesigned product page introduced a progressive reveal experience that significantly improved how users explore and select handsets. By structuring content into intuitive, scannable sections, the design reduced cognitive load and guided users through discovery, evaluation, and decision-making with greater ease. This led to:
Increased user engagement across key product content sections
Improved conversion rates, particularly for users on mobile devices
Higher confidence and satisfaction among users during device selection, as validated by qualitative testing and reduced bounce rates
The new experience positioned the product page as a more supportive, user-centric touchpoint in the device purchase journey, aligning business goals with measurable user outcomes.