KIEHL'S Responsive UI Design - The Natural Historian

Overview - Once Upon a Time (Chapter 1)

Overview – Once Upon a Time (Chapter 1)

I redesigned Kiehl’s e-commerce site to bring calm, clarity, and trust to the skincare shopping experience. While researching the brand and its products, I noticed the original site, especially on mobile, felt overwhelming with too many ads and text all at once. I wanted the experience to feel gentle, like walking through a garden with soft music in the background guiding users calmly without frustration.

Role

UI Designer UX Designer

Timeline

4 Months

Tools

Figma Miro Illustrator

Backstory – A Spark of Inspiration (Chapter 2)

Kiehl’s products are naturally gentle, but the website didn’t reflect that. Users struggled to navigate, so my goal was to make the digital experience as soothing and approachable as using the products themselves.

Research & Insights - The Present (Chapter 3)

Through reviewing the website and observing users, I noticed:

  • The visual hierarchy was unclear

  • Pages were cluttered

  • Users had trouble reading and finding key information

Strategy - Finding the Direction (Chapter 4)

I wanted to create a calm, guided experience where users could browse, discover, and purchase products intuitively like a small, enjoyable journey through a peaceful, natural space.

Taskflow

  • Home Page

  • Search

  • Filter

  • Product Page

  • Add to Bag

Design Process - The Exploration (Chapter 5)

I explored design directions through sketches, wireframes, and moodboards, experimenting with how content could “breathe.” Rounded shapes, consistent cards, and calm spacing helped reduce visual clutter.

Couple Low-Fidelity Wireframes

The Feel - Bringing Calm (Chapter 6)

I called the visual direction “Natural Historian.” Inspired by Kiehl’s roots in apothecary and nature. I wanted kiehl's to feel gentle and personal, reflecting my love for soft piano music. I used calming colors like soft beige, muted purple, and light black, and added natural elements like leaves to create a cohesive, serene look.

SCROLL TO VIEW UI DESIGN

Hero section
Hero section

Final Mobile UI

At first glance, users can easily recognize and find their section of skincare by the hierarchy of information to what users would most likely want.

PREVIEW

Search

I reduced visual noise by removing excess ads, using more white space, and keeping photos aligned with their categories. User testimonials are now featured with friendly plant illustrations to echo natural trust.

PREVIEW

Filter

Users can find the product in the order by the filter for a clear guide and real updates.

PREVIEW

Product Page

One of the biggest changes was the product detail page. I made the layout simpler, showing products on a calm, clean background so it’s easier to view.

I redesigned the review section to show just a few at a time, along with user questions, so it’s less overwhelming. Plus, I added an interactive “wheel carousel” to make discovering products more fun and intuitive.

PREVIEW

Desktop Final UI (Homepage, Product)

PREVIEW (Home Page)

PREVIEW (Product Page)

Design System

I also created a design system to keep everything cohesive across the site and app. I chose gentle, rounded typography like Rosa and colors for a calm, intuitive experience, and focused on layout and grids to keep everything organized.

Refection (Chapter 7)

Designing this project helped me make a website and app that feel calming. I learned a lot about spacing, hierarchy, and color contrast. The layout is less cluttered, easier to read, and feels more welcoming for users. After testing the prototype, I realized there are still more interactions I could add, and I want to improve the color contrast to make the hierarchy even clearer.

Outcome & Epilogue (Chapter 8)

By the end, the website aligned with Kiehl’s brand personality: calm, natural, and trustworthy. I learned how spacing, hierarchy, and color can shape both emotional and functional experiences. The result: less visual overload, a cohesive visual identity, and a serene shopping journey.

Next Steps

If I had more time, I’d love to:

  • Continue on the desktop layouts using the same natural rhythm

  • Introduce an analysis tool to help users find the right skincare

  • Continue tweaking higher contrast and fonts

Goodnight

"Once upon a time, I discovered a beautiful skincare brand whose website didn’t reflect its calm and natural personality (The Hook).
I realized that users felt overwhelmed, not soothed, while shopping that was the moment I knew I had to simplify their journey (The Backstory).
Through research and sketches, I listened to what users needed and began shaping a cleaner, more mindful design (The Journey).
When I added warm, natural tones and soft typography, the interface finally felt like Kiehl’s gentle and human (The Feel).
In the end, the redesign created a space that helps users slow down and care for themselves, not just their skin (The Epilogue)."