Kiehl's: The Modern Apothecary

Overview

Bringing back historical charm with a modern twist.

A responsive website redesign for Kiehl's, a skincare brand with rich and intriguing history that doesn't show through in their current visuals.

Roles
UI Design, Design System, Wireframing, Prototyping
Team
Rachel Quan
Duration
4 months
Tools
Figma, Illustrator

Challenge

Kiehl's website feels sterile, and lacks visual hierarchy and organization making it hard to navigate.

Solution

Breathing Kiehl's charming and humble history back into its website platform, addressing hierarchy and simplification.

01 Define

Taskflow

Find a product from search and add to bag

Determining a userflow to content block and creating new wireframes. Ensuring a seamless, simplified shopping experience.

Wireframing

02 Design

Taskflow

Antique since 1851

To preserve Kiehl's rich apothecary history, while bringing a lively  interpretation consisting of bright colors, playful label motifs, and scientific illustrations.

03 Define

UI Design

Historical and modern

With touches of Kiehl’s apothecary past, the redesign modernizes antique motifs for a fun, bold shopping experience.

Responsive design

This Kiehl’s UI redesign is responsive between mobile and desktop screens, allowing for a reflow of content.

04 Deliver

Design system

Apothecary charm

A design system for a new brand look, fit with bright colors and fun but meaningful graphics.

Key Takeaways

A fresh homage to history

Reflection

A cohesive and simplified user experience. Creating a fun but true-to-brand personality that ties back to Kiehl's unique history.

Next Steps

Explore the responsiveness of the motifs on other screen sizes aside from mobile to desktop.

More Projects

Vibrant Health: Molecular Transformation

Brand Identity
Packaging

Calm: Destress. Live Better.

UI Design
UX Research

Lotusware Typeface

Type Design
Motion Design