Product onboarding

Project type

Onboarding - Education

Client

Pink Gellac

Role

Solo UX/UI Designer

Timeframe

3 months

When Pink Gellac restructured its starter kits into three distinct tiers—Discovery, Luxury, and Build Your Own—the storefront needed a way to communicate that clarity to customers. I designed the onboarding and comparison experience at the top of the purchase funnel, helping both new and existing customers understand the range and confidently choose the right kit.

Although the product architecture had become simpler, the buying journey hadn't. Customers still lacked the context needed to understand the differences between kits or which option best suited their needs. Competitor analysis revealed that most comparison pages relied on long feature lists rather than supporting how customers actually make decisions. That became the opportunity for this project.

Design Strategy

I developed the experience through close collaboration with the internal team, using each review to answer a specific design question rather than making broad visual revisions. The project quickly became an exercise in progressive disclosure. The challenge wasn't simply presenting information—it was deciding how much information customers needed at each stage of their journey. Every design decision aimed to balance clarity with completeness, giving customers enough context to make confident choices without overwhelming them.

01 / Guide the decision before the configuration

Early concepts explored quizzes and interactive configurators to help customers choose a kit. Both introduced unnecessary complexity at the wrong stage of the journey. Instead, I focused on making the comparison page self-sufficient, allowing customers to first decide which kit suited them before asking them to configure it.

01 / Guide the decision before the configuration

Early concepts explored quizzes and interactive configurators to help customers choose a kit. Both introduced unnecessary complexity at the wrong stage of the journey. Instead, I focused on making the comparison page self-sufficient, allowing customers to first decide which kit suited them before asking them to configure it.

01 / Guide the decision before the configuration

Early concepts explored quizzes and interactive configurators to help customers choose a kit. Both introduced unnecessary complexity at the wrong stage of the journey. Instead, I focused on making the comparison page self-sufficient, allowing customers to first decide which kit suited them before asking them to configure it.

02 / Separate orientation from customisation

Moving the Build Your Own configurator to the product page created a more natural flow: compare first, customise second. This required restructuring the PDP to support a far richer experience, including product variants, configurable add-ons, dynamic pricing, and clearer presentation of kit contents without overwhelming the page.

02 / Separate orientation from customisation

Moving the Build Your Own configurator to the product page created a more natural flow: compare first, customise second. This required restructuring the PDP to support a far richer experience, including product variants, configurable add-ons, dynamic pricing, and clearer presentation of kit contents without overwhelming the page.

02 / Separate orientation from customisation

Moving the Build Your Own configurator to the product page created a more natural flow: compare first, customise second. This required restructuring the PDP to support a far richer experience, including product variants, configurable add-ons, dynamic pricing, and clearer presentation of kit contents without overwhelming the page.

03 / Prioritise clarity over completeness

Several approaches were explored for communicating kit contents, including photography, iconography, and expanded comparison tables. The final solution combined concise descriptions with supporting icons, creating a layout that remained easy to scan across devices while providing enough detail for informed decisions.

03 / Prioritise clarity over completeness

Several approaches were explored for communicating kit contents, including photography, iconography, and expanded comparison tables. The final solution combined concise descriptions with supporting icons, creating a layout that remained easy to scan across devices while providing enough detail for informed decisions.

03 / Prioritise clarity over completeness

Several approaches were explored for communicating kit contents, including photography, iconography, and expanded comparison tables. The final solution combined concise descriptions with supporting icons, creating a layout that remained easy to scan across devices while providing enough detail for informed decisions.

04 / Build confidence, not urgency

Rather than relying on promotional badges or marketing labels, I used visual hierarchy and supporting copy to help customers understand the strengths of each kit. The goal was to encourage confident purchasing decisions instead of creating unnecessary pressure.

04 / Build confidence, not urgency

Rather than relying on promotional badges or marketing labels, I used visual hierarchy and supporting copy to help customers understand the strengths of each kit. The goal was to encourage confident purchasing decisions instead of creating unnecessary pressure.

04 / Build confidence, not urgency

Rather than relying on promotional badges or marketing labels, I used visual hierarchy and supporting copy to help customers understand the strengths of each kit. The goal was to encourage confident purchasing decisions instead of creating unnecessary pressure.

Reflection

What began as a comparison page evolved into a broader redesign of the purchase journey. Each design decision exposed the next opportunity, ultimately transforming a single page into a more coherent onboarding flow that mirrors how customers naturally build understanding before making a purchase.