Kiehl's Design System

Kiehl's | Design system eCommerce website | UI/UX design  | Agency: Barbarian

 

We were tasked to re-designed and re-purposed Kiehl's website onto its global brand platform. The task was to re-design the website and design system, user shopping flow, and visual language/UI pattern that was diversely functional yet spoke to Kiehl's brand values. On top of it, train Kiehl's team and set up a formal UX process to maintain the new site for the long run. The new site design will be set up in the system to monitor and distribute aesthetics/functionalities worldwide. 

User goal: Update the digital look and feel to align with the brand message. Improve internal team workflow to manage and maintain global design easily.
Consumer goal: Design and update the website to create a better shopping experience.

Research: Started by defining high-level core values for Kiehl's brand and demonstrated practical examples of how these brand messages could be implemented into website UX/UI elements/user flow. We interviewed Kiehl's internal teams to find out the pain points to outline the foundation of the design system. One goal is to enable a system that can apply to the work process. We invited our clients to participate in the design process and shared direct information with them.

Research: Started by defining high-level core values for Kiehl's brand and demonstrated practical examples of how these brand messages could be implemented into website UX/UI elements/user flow. We interviewed Kiehl's internal teams to find out the pain points to outline the foundation of the design system. One goal is to enable a system that can apply to the actual work process. We invited our clients to participate in the design process and shared direct information with them. 

workshop1
workshop2

Design system: We broke down the essential steps to build the design system: 1)Studied the content and categorized them into groups. 2)Overviewed the content and re-structured taxonomy to imply new features and functionalities to design a better user experience. 3)Prioritized the content and framework to design the brand/visual elements/UI pattern. 

Design system: We broke down the essential steps to build the design system: 1)Studied the content and categorized them into groups. 2)Overviewed the content and re-structured taxonomy to imply new features and functionalities in order to design a better user experience. 3)Prioritized the content and framework to design the brand/visual elements/UI pattern. 

Screen Shot 2019-10-25 at 16.16.26
Screen Shot 2019-10-25 at 16.19.56
Screen Shot 2019-10-15 at 12.56.07
Design02
Designmobile
Designmobile Copy
Designmobile Copy 2
View