Restoring calm to Apothecary- The Present (Chapter 3)
The Objective: Kiehl's digital presence felt cluttered. My goal was to
restore the brand into a calm presence by simplifying navigation and
creating a guided, high end shopping experience. 🪴
Restoring calm to Apothecary- The Present (Chapter 3)
The Objective: Kiehl's digital presence felt cluttered. My goal was to
restore the brand into a calm presence by simplifying navigation and
creating a guided, high end shopping experience. 🪴
I noticed:
The visual hierarchy was unclear
Pages were cluttered
Users had trouble reading and finding key information
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.
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
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
Final Mobile UI
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.
Original Site
Redesign
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.
Original Site
Redesign
Users can find the product in the order by the filter for a clear guide and real updates.
Filter
Users can find the product in the order by the filter for a clear guide and real updates.
Original Site
Redesign
Product Page
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.
Original Site
Original Site
Desktop Final UI (Homepage, Product)
Redesign
Desktop Final UI (Homepage, Product)
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.
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.
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.
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)
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
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)."
