Three brands, one system
We designed one component library that flexes across Cosmetics, Fragrance and Skin – shared typography and spacing, but category-level colour and imagery rules so each world keeps its own identity.
Case brief
Kylie Cosmetics
UI/UX DesignConsulting & Strategy
Kylie Cosmetics runs three commerce-grade product lines on a single Shopify storefront – Cosmetics, Fragrance and Skin – with seasonal campaigns like Festival Essentials and King Kylie Collection pushing the site hard on every drop. We designed a modular system that scales across all of them without fragmenting the brand.
Delivery highlights
- 01One design system spanning Cosmetics, Fragrance and Skin product lines
- 02Mobile-first PDPs with shade ladders, bundles and gift-set variants
- 03Quick Shop shade picker on PLPs to reduce taps-to-cart
- 04Mini cart designed for upsells, cross-sells and bundle building
- 05Campaign-ready landing templates for drops like King Kylie and Festival Essentials
- 06Content modules for reviews (Bazaarvoice) and retention (Klaviyo / Recharge)
- 07WCAG-aware component patterns across 50+ page templates
Brief and constraints
Briefing & Challenges
Client Brief
“We need a storefront that carries three very different product worlds – Cosmetics, Fragrance and Skin – without feeling like three different sites. Navigation has to make cross-brand discovery obvious, the cart has to work as an upsell surface, and the whole thing has to ship new campaigns fast without breaking the brand.”
Challenges
- Unifying Cosmetics, Fragrance and Skin under one navigation without losing each brand’s voice
- Designing a PDP system that handles single SKUs, bundles and gift sets
- Building a cart experience that carries upsells and bundle logic without feeling crowded
- Keeping campaign landers on-brand while still being templated for speed
- Staying within Shopify’s CMS constraints for easy content updates
Delivery path
Our Approach
Mobile-first retail UX
Shade pickers, bundle selectors and quick shop modules were designed mobile-first, with every interaction tuned for thumb reach and real-world store browsing.
Campaign-ready by default
Landers, drops and collabs (King Kylie, Festival Essentials) reuse the same section kit so the team can launch a fully branded campaign page without a custom build.
Result proof
The Results
“It’s so great to have a team that understands the tech they are designing for. They have created something really dynamic that we will be able to use for many years.”
COTY Inc. on Kylie Cosmetics
Scope / stack / outcome
Project Highlights
01
Quick Shop
A shade picker that lets shoppers add any variant to cart directly from the PLP – cutting the extra step of loading a full PDP and lifting conversion on collections with 16+ shades.
02
Mini Cart
A cart drawer designed to carry bundle logic, cross-sells and gift-with-purchase in a small footprint, using typography hierarchy and subtle dividers instead of heavy chrome.
03
Modular PDPs
One PDP template that adapts to simple SKUs, bundles and single-product launches – adjusting media density, spec blocks and storytelling sections per product type.
Post-launch support
Ongoing design support
We continue to work with the Kylie Cosmetics team on new product drops, campaign pages and ongoing UX iteration – including the Fragrance line rollout and the King Kylie revival campaign.
“Everyone LOVED the site experience, truly spectacular, one of your most complemented designs yet. Thank you for everything, especially the UAT support.”
COTY Inc. on King Kylie Campaign
Related cases
Similar Projects
Next investment stage
Launching
Built for small teams who need to move fast, and validate their product on the market.
Launching
Essentials only. Launch a branded store or landing page that converts and gets your idea out fast.
No-code solutions for Shopify or a portfolio websitePhotographer portfolios and independent creative websitesCustom styling and setup supportEasy-to-edit CMS
From $999 / ¥7k~ 2 months
Launch with UsGrowing
For teams that have outgrown their current site and need a scalable solution to support future growth.
Growing
Scale your product or take the next step with a custom website that is built to grow with you.
Custom design and developmentFlexible CMS with reusable sectionsBuilt for speed, conversions, and campaign launchesMid-level integrations (e.g. subscriptions, reviews)
From $2k / ¥15k~ 3 months
Scale with UsEnterprise
For large teams that need robust, flexible solutions that have complex requirements.
Enterprise
We design scalable e-commerce platforms with modular systems and tailored solutions for global markets.
Scalable UX and design systemsCustom developmentSolutions for global markets (multi-store, Shopify+)Complex integrations (e.g. VTO, Shade Finder, Findation)
From $4k / ¥30k~ 6 months
Explore our Solutions