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 Sprint
For landing pages, MVP stores, personal portfolios, photography collections, and focused launches that need a clean first release.
Launching Sprint
Essentials only. Launch a branded store, landing page, portfolio, or photo collection that converts, is easy to edit, and gets your idea in front of the market fast.
Shopify or WordPress/WooCommerce starter storesLanding pages with custom WordPress or Shopify theme developmentPortfolio and photography collection websitesCustom styling and setup support
From $999 / ¥7k~2 months
Launch with UsGrowth Build
For custom websites, Shopify builds, WordPress theme development, CMS systems, redesigns, and campaign-ready foundations.
Growth Build
Scale your product or take the next step with a custom website that supports launches, content workflows, and long-term growth. Includes 3 months of complimentary SEO support after launch.
Custom design and developmentWordPress theme development with editable CMS fieldsFlexible CMS with reusable sectionsBuilt for speed, conversions, and campaign launches
Typical projects from $5k / ¥35k~3 months
Scale with UsEnterprise / Ongoing Partner
For complex commerce, global rollout, multi-market systems, and long-term retainers.
Enterprise / Ongoing Partner
We design scalable e-commerce platforms, modular systems, and tailored workflows for large teams working across markets.
Scalable UX and design systemsCustom developmentSolutions for global markets (multi-store, Shopify+)Complex integrations (e.g. VTO, Shade Finder, Findation)
Scoped after discovery6+ months or retainer
Explore enterprise work