Streamlining design workflows and reducing inconsistencies across teams
E‑Commerce UX
E‑Commerce UX
E‑Commerce UX
2021
2021
2021
the challenge
As Corona launched new digital products and brand extensions, design inconsistencies multiplied across their platforms. Different teams designed independently, leading to fragmented UI patterns, redundant effort, and longer development cycles. Without shared principles or a source of truth, even minor updates required multiple meetings and duplicative design work.
through a tool that removed friction in the buying process.
through a tool that removed friction in the buying process.
through a tool that removed friction in the buying process.
by helping users buy the right product the first time — reducing returns and confusion.
by helping users buy the right product the first time — reducing returns and confusion.
by helping users buy the right product the first time — reducing returns and confusion.
what began as a toilet seat finder became a platform for identifying all types of replacement parts.
what began as a toilet seat finder became a platform for identifying all types of replacement parts.
what began as a toilet seat finder became a platform for identifying all types of replacement parts.
01. Research & Discovery
01. Research & Discovery
01. Research & Discovery
People were walking away not because of price or stock, but because they didn’t know which seat matched their toilet at home. The fear of buying the wrong product blocked the sale before it could begin.
Using design thinking frameworks, we conducted interviews, mapped user journeys, tested in stores, and analyzed the e-commerce flow. The insight was clear: lack of product confidence was the bottleneck.
People were walking away not because of price or stock, but because they didn’t know which seat matched their toilet at home. The fear of buying the wrong product blocked the sale before it could begin.
Using design thinking frameworks, we conducted interviews, mapped user journeys, tested in stores, and analyzed the e-commerce flow. The insight was clear: lack of product confidence was the bottleneck.
People were walking away not because of price or stock, but because they didn’t know which seat matched their toilet at home. The fear of buying the wrong product blocked the sale before it could begin.
Using design thinking frameworks, we conducted interviews, mapped user journeys, tested in stores, and analyzed the e-commerce flow. The insight was clear: lack of product confidence was the bottleneck.
02. Concept & early design
02. Concept & early design
02. Concept & early design
We proposed an AI-powered flow embedded in the e-commerce experience that would analyze user-uploaded photos to recommend compatible models. This would reduce guesswork and drop-off, especially among non-technical buyers.
We explored different UX directions in Miro and Figma, mapping out a step-by-step experience that worked across desktop and mobile. The challenge was making the AI feel both helpful and invisible, something that empowered users without overwhelming them.
We proposed an AI-powered flow embedded in the e-commerce experience that would analyze user-uploaded photos to recommend compatible models. This would reduce guesswork and drop-off, especially among non-technical buyers.
We explored different UX directions in Miro and Figma, mapping out a step-by-step experience that worked across desktop and mobile. The challenge was making the AI feel both helpful and invisible, something that empowered users without overwhelming them.
We proposed an AI-powered flow embedded in the e-commerce experience that would analyze user-uploaded photos to recommend compatible models. This would reduce guesswork and drop-off, especially among non-technical buyers.
We explored different UX directions in Miro and Figma, mapping out a step-by-step experience that worked across desktop and mobile. The challenge was making the AI feel both helpful and invisible, something that empowered users without overwhelming them.
03. UI ITERATION
03. UI ITERATION
03. UI ITERATION
When testing early mockups with the backend team, we learned the AI could not recognize toilets with any object placed on top. Decorative plants, toilet paper, and covers were skewing results. We redesigned the flow with animation and visual prompts to teach users how to take clean, usable photos.
When testing early mockups with the backend team, we learned the AI could not recognize toilets with any object placed on top. Decorative plants, toilet paper, and covers were skewing results. We redesigned the flow with animation and visual prompts to teach users how to take clean, usable photos.
When testing early mockups with the backend team, we learned the AI could not recognize toilets with any object placed on top. Decorative plants, toilet paper, and covers were skewing results. We redesigned the flow with animation and visual prompts to teach users how to take clean, usable photos.
04. Low & high-fidelity prototyping
04. Low & high-fidelity prototyping
04. Low & high-fidelity prototyping
Each screen was designed to reduce friction: from the moment a user landed on the site, we anticipated their doubts, guided their actions, and helped them reach a confident match.
We paired clear instructional steps with clean UI, and baked in fallbacks in case the AI couldn’t find a match. We also included platform-specific paths and motion elements to make the flow feel supportive — not clinical.
The result was a frictionless, guided journey that felt just as intuitive for first-time mobile users as it did for someone browsing from a desktop.
Each screen was designed to reduce friction: from the moment a user landed on the site, we anticipated their doubts, guided their actions, and helped them reach a confident match.
We paired clear instructional steps with clean UI, and baked in fallbacks in case the AI couldn’t find a match. We also included platform-specific paths and motion elements to make the flow feel supportive — not clinical.
The result was a frictionless, guided journey that felt just as intuitive for first-time mobile users as it did for someone browsing from a desktop.
Each screen was designed to reduce friction: from the moment a user landed on the site, we anticipated their doubts, guided their actions, and helped them reach a confident match.
We paired clear instructional steps with clean UI, and baked in fallbacks in case the AI couldn’t find a match. We also included platform-specific paths and motion elements to make the flow feel supportive — not clinical.
The result was a frictionless, guided journey that felt just as intuitive for first-time mobile users as it did for someone browsing from a desktop.
05. VALIDATION & IMPLEMENTAtION
05. VALIDATION & IMPLEMENTAtION
05. VALIDATION & IMPLEMENTAtION
For user validation, individuals were stationed within physical stores equipped with the prototype. This allowed for direct user interaction and interviews to gather valuable opinions. The insights collected from these interviews informed successive iterations of the product, leading us to the development of our MVP. This iterative process ensured that the final product resonated with users and aligned seamlessly with their preferences and expectations.
For user validation, individuals were stationed within physical stores equipped with the prototype. This allowed for direct user interaction and interviews to gather valuable opinions. The insights collected from these interviews informed successive iterations of the product, leading us to the development of our MVP. This iterative process ensured that the final product resonated with users and aligned seamlessly with their preferences and expectations.
For user validation, individuals were stationed within physical stores equipped with the prototype. This allowed for direct user interaction and interviews to gather valuable opinions. The insights collected from these interviews informed successive iterations of the product, leading us to the development of our MVP. This iterative process ensured that the final product resonated with users and aligned seamlessly with their preferences and expectations.
