Build & Retainer
Designing The Cross-Brand Shopping Experience For KAO
Creating six unified design systems and shared cart functionality to enable cross-brand shopping and reduce checkout abandonment.
Live Site us.biore.com
Designed at The Stable, Part of Accenture Song
Services
UX Audit
Competitive Analysis
Wireframes
Interactive Prototypes
Design System Components
Design QA
ADA Compliance
A/B Testing
Team
Product Designer — TJ Hari
Delivery Lead — Lindsey S.
Product Owner — Eric B.
Project Manager — Channa H.
Director of Development — Jeff G.
Engineer — Owen D.
Engineer — Kat H.
Engineer — Kevin H
Analytics — Cody Z.
SEO — Zareen D.
Overview
KAO is a parent company managing six beauty and skincare brands: Bioré, John Frieda, Curel, Bio-Oil, Ban, and Jergens. Each brand operated independently with no shared shopping functionality. Customers couldn't purchase products from multiple brands in one transaction, and checkout abandonment was extremely high.
Through research and analytics, we identified that customers wanted cross-brand shopping flexibility but the separate checkouts created friction. I designed six unified design systems and created the first shared cart experience on the Shopify platform to reduce cart abandonment, increase sales, and boost average order value.
My Role
I was responsible for creating a unified commerce experience across six beauty brands while maintaining their individual brand identities.
I led the design of six unified systems, shared cart, and cross-brand navigation using our Bedrock framework, creating wireframes, prototypes, and accessibility audits based on research and analytics. I collaborated with engineering to design within Shopify's platform constraints and conducted design QA throughout. My challenge was balancing brand distinctiveness with commerce unification across six brands, using iterative design and testing to ensure seamless cross-brand shopping.
Problem
Understanding The Problem
Analytics and user research uncovered a critical gap, Customers wanted to shop across KAO's beauty brands in one transaction, but the individual storefronts made it impossible. Each brand required its own checkout, forcing customers to re-enter information and pay separately for products from different brands. This fragmented experience drove checkout abandonment rates to extreme levels and prevented KAO from capitalizing on cross-brand shopping behavior.
Approach
Creating The Product Vision
With the problem clearly defined, I created a product vision for a unified commerce experience across all six brands. I mapped out how customers would discover products across brands, add them to a single shared cart, and complete one checkout, regardless of which site they started on. I designed wireframes and high-fidelity prototypes to demonstrate how the system would work seamlessly while preserving each brand's unique identity.
I collaborated with KAO stakeholders to determine the strategic approach. We prioritized the shared cart design and infrastructure as the critical first step, followed by developing six brand-specific design systems. This path ensured the technical foundation was solid before layering in brand complexity. We planned for continuous testing and accessibility compliance throughout.
Designing The Solution
Shared Cart
I designed a shared cart that let customers shop across all six KAO brands and complete one checkout regardless of where they started. To clearly communicate the shared cart, we introduced a navigation label that made the cross-brand experience immediately legible to customers. Inside the cart, each product displays its brand logo, giving customers a clear way to distinguish products from different brands while reinforcing that everything was part of one transaction. This eliminated the fragmented experience that had been driving abandonment, replacing multiple separate transactions with a single path from discovery to purchase.
Designing The Solution
Branded Tab Navigation
Cross-brand discovery only works if customers know other brands exist. I designed a persistent tabbed navigation that kept all six brands visible from any storefront, giving customers a clear and frictionless path to explore the full KAO portfolio without ever losing their cart or their place in the experience. After launch, session data showed customers were spending more time browsing across brands, a strong signal that the navigation was successfully driving the cross-brand discovery the platform was built around.
Designing The Solution
Unified By Design, Differentiated By Brand
Not every brand had the same needs. Some carried deep product catalogs requiring extensive filtering and discovery patterns, while others offered subscriptions that needed dedicated purchase flow considerations. I designed navigation, product listing, and product detail pages for each brand that respected these differences while staying rooted in the shared system. Every brand felt like its own experience without ever feeling disconnected from the platform.
Designing The Solution
Design System & Accessibility
I built six individual design systems that preserved each brand's unique identity while sharing a unified component foundation across the platform. This gave engineers a consistent structure to build from and ensured the shared cart and checkout experience would be consistent under the KAO beauty brands.
I also ensured the entire platform met WCAG 2.0 accessibility standards, covering color contrast, keyboard navigation, and screen reader compatibility across all shopping flows. With six brands and a shared checkout to account for, designing for accessibility from the start was critical to ensuring no customer was excluded from the shopping experience.
Release And Evolve
Performance Testing
I validated the unified experience through performance testing. Conversion rate, average order value, and returning customer metrics all improved. Ongoing micro-interaction refinements and compliance updates were guided by the data. Testing confirmed the new direction delivered results, proving the unified checkout experience directly addressed the abandonment problem.
Release And Evolve
Annotations & Design QA
I documented each of the six brand design systems with detailed annotations and specifications, giving engineers a clear handoff and reducing bugs from the start. QA testing across browsers and devices caught edge cases, interaction states, and responsive issues before production. The final experience matched the design vision, with fewer revisions and a cleaner rollout.
Results
Metrics
53% increase in total sales
44% increase in reached checkout
75% increase in completed checkout
13% increase in total sales
Conclusion
By unifying six fragmented storefronts into a single cross-brand shopping experience, I helped grow KAO's checkout completion rate from 6% to 33%, exceeding client expectations. The results earned an ongoing retainer, with continued work already underway to optimize the experience and unlock new opportunities as customer behavior evolves.
Challenges
Balancing accessibility compliance across six design systems without sacrificing each brand's visual language
Updating refinements across six design systems was time consuming
Defining the right level of design flexibility, too much consistency risked flattening the brand identity
Lessons Learned
Creating clear annotations for multiple engineers was helpful to articulate interactions across the six design systems
Investing time upfront to align on a single source of truth prevented inconsistencies across the project
Future Recommendations
Scale The Design System
Expand the Bedrock framework to support seasonal campaigns and new product categories, ensuring consistency remains manageable as KAO's catalog and brand portfolio grows.
Mobile-First Optimization
Conduct mobile-specific research across all six brand sites to identify unique friction points and design mobile-first interactions that match how KAO's beauty audience actually shops.
Continuous Testing & Iteration
Establish ongoing A/B testing across the shared cart and brand storefronts to catch new friction points as traffic patterns, product lines, and customer behaviors evolve.
Sticky Add-To-Cart
Implement a persistent ATC button on product detail pages to reduce friction at the moment of purchase intent, particularly on mobile where scrolling back to the CTA is a common drop-off point.