Build a design system for Kiehl’s.
―
I managed and led a team of five designers to execute and launch Kiehl’s design system.
I assisted clients to own and maintain the system as a living, breathing product.
ROLE
Experience Creative Director
TEAM
8 Clients
1 Product Manager
1 Account Director
1 Strategy Director
1 Experience Creative Director
5 Designers
1 Tech Vendor
DURATION
6 Months (Feb. 2019 - July 2019)
Product Overview
What is Kiehl’s
Kiehl’s is a skincare brand that has a long heritage in New York city. Kiehl’s is one the most respected brand under the L’oreal because they have the highest performing e-commerce site of all the L’oreal portfolio.
Target CONSUMER
Consumers coming to the site typically have two different intents: buying and browsing
THE CHALLENGE
Kiehl’s was the first brand to adopt NG LORA, Loreal’s white label design system with a voice to impact and modify. While migrating to the L’Oreal’s global platform (NG LORA design system),
Adhere to the brand’s unique character
Preserve the core user behavior that the loyal consumers are familiar with (e.g. shopping bag, search)
Improve the cluttered information on the current site.
Serve diverse intents of our audiences by providing context throughout the experience
Design Process
Discovery
We sat down with primary stakeholders to learn more about their business and product goals. These conversations helped us learn about brand principles, goals for the next launch, and not to mention, the limitations we’d need to work with.
Research
Quantitative Research
1. Omni-channel shoppers*
2. 0 online purchases
3. 1-2 online purchases
4. 3-5 online purchases
5. 6-9 online purchases **
Qualitative Research
Six Focus Groups
Each Group was two-hours in length and sat five (5) participants.
All participants completed a 30-minute homework exercise prior to their group.
In-Depth Interviews
Total of twelve (12) one-on-one Usability IDIs.
Each interview was thirty-minutes
Design: Explorations
Before transferring to a design system, the team experimented with different designs to determine the best layout and components that might work best for the brand. The team modernized design elements that were inspired by brand guideline.
Design: Elements
Design: Page Templates
Complete Design System
We created an extensive library of responsive components and a UI style guide for Kiehl’s creative team to adhere to going forward. Our system consists of elements such a typography styles and CTAs, color palettes, components, and templates.
Before & After
After
Streamlined omni-channel experience
Premium look/tone/feel
Simplified visual approach with enhanced SEO search-ability
Ease of use
Flexible structure and components
Before
Their successful storefront experience was not translated in digital
Information is overloaded and hard to digest
Product benefits are hidden
It’s hard to find a product for my skin type
Static site is difficult to update