top of page

Claire Cosmetic

​Claire's Sustainable Approach to Customizable Cosmetic Products

Group 1684.png

My Role

UX & UI Designer

I was involved in all parts of the process, but my main focus was on; Research, Visual & Interaction Design


3 people - Self Directed, with feedback from the mentor and peers.


Figma, Miro, Maze, Adobe photoshop


Responsive website for desktop and mobile.

Group 1600_edited.png

Claire is a natural-based cosmetic brand committed to sustainability and cruelty-free practices. The brand's objective is to offer customers high-quality makeup options that align with their values and provide a balanced and personalized experience. This project focuses on designing customizable refillable makeup palettes for Claire's environmentally conscious customers.


Project Overview


1-Product Development:

Creating a responsive website of customizable, eco-friendly beauty products that offer a wide range of shades.

2- Implement a Virtual Try-On Feature:

Developing and integrating a virtual try-on feature into the brand's online platform or mobile app.

Online surveys

User interviews
Competitive analysis

Affinity diagram
User personas

User Journey
Story mapping

Card sorting

Information architecture
User flow

Low-fi Wireframes

Usability test

Card sorting


Final Prototype

Style guide


Cosmetic case study

Claire Cosmetic

Website Design

1 Empathize

User Survey

12 Questions | 171 Participants

Frame 309.png

User Interviews

Interview Summary:

  • 5 Participants were interviewed about their cosmetic routine.

  • 4 females, 1 non-binary

  • Age:  18 - 40

  • 9 Questions

User Interview


Four out of five participants who purchased a cosmetic palette for their favorite colors hesitated to dispose of it, even though they only used a few shades, because of the expense and feelings of guilt.

Three out of five participants fail to check product expiration dates. Two of them use products before expiration, while the other three continue using them past their expiration dates.

Frame 298.png
Frame 294.png
Frame 295.png
Frame 297.png

Competitive Analysis

Competetive analysis
  • None of the rivals provide the ability to completely modify their colour scheme. 

  • Just two of the four competitors offered clean products, but their prices were astronomical.

  • Two out of four competitors offered a wide range of non-sustainable items at an affordable price.

2 Define

Affinity Diagram 

Affinity Diagram
Affinity Diagram
  • Regarding website features, all participants expressed a desire for customization options when placing an order, while 80% reported that the use of icons and images would enhance accessibly. Three participants specifically requested a "try-on" feature.

  • Four out of five participants identified choosing the right shade as a major struggle in online shopping.


Emily Grey |  29
Favorite Brands

Tired of wasting money on eyeshadow palettes with unused shades, Emily seeks customizable options. She dreams of curating her own palette with only the colors that match her style and personality. 

  • Find clean and eco-friendly beauty products that align with her values.

  • Keep up with current beauty trends while maintaining her eco-friendly principles.

  • Customize her products to match her desired shades and preferences.

  • Difficulty in finding affordable, sustainable, and clean beauty products.

  • Tendency to overdo makeup purchases without realizing when products have expired.

  • Worries that expired makeup could harm her skin.

User Journey

User Journey Example-3.png



1- Emily is scrolling through her social media feed and comes across an ad for a new beauty brand that promotes clean, eco-friendly, and affordable beauty products.​


2- Emily clicks on the ad and is directed to the brand's website. She navigates through the website and reads about the brand's values.


3- Emily sees that the brand offers a makeup recycling program, where customers can send in their used makeup products to be properly disposed of or recycled.


4- She notices that the brand offers customizable shadow palette, she decides to add it to her cart


5- Emily proceeds to checkout and prompted to create an account.


6-Emily completes her purchase and receives an order confirmation email.


7- A few days later, Emily receives her order and tries out the products. She is happy with the quality.


8- Emily shares her positive experience with the brand on google.

3 Develop

Site Map


Task Flow

Task 1: Purchasing a lip gloss with adding subscription at the checkout

Loading the website

Navigating to the lip page

Selecting the lip balm and adding it to the cart

Choosing the type of subscription at the checkout.

Completing the checkout process.

Receiving the item.

Task 2: Purchasing a customizable eye shadow palette 

Loading the website

Navigating to the Custom palette page

Choosing the product and customize it

Adding the custom palette to the cart

Completing the checkout process.

Receiving the item.

User Flow

Frame 292-2_edited.jpg


Designing the Homepage

Version 1

Version 2


Version 3


Designing the Product Page

Version 1

Version 2


Version 3


Designing the Try-On Page

Version 3

Version 2

Version 1



Version 5

Version 4


4 Test

First Feedback Result

We conducted a series of customer feedback sessions with 5 individuals on our mid-fidelity prototypes. We created an affinity diagram.

Affinity diagram
Affinity diagram
  • It was observed that  5  out of  5  subjects had trouble using the try-on feature . An insight is: designing simultaneous try-on features, allowing users to view shades in real-time while customizing their palette. 


  • It was observed that  3  out of  5  subjects found the hero image slider to be confusing. An insight is: the use of a slider for the hero image may not be the most effective design choice.

  • It was observed that  5  out of  5  subjects expressed dissatisfaction with the placement of the review section on the product page. They found it to be inconvenient and not easily accessible. This feedback indicates that the current placement of the review section is not meeting user expectations or needs.


Final Usability Test

Participants were assigned tasks related to browsing and purchasing cosmetic products. You can find the full report HERE.


Unmoderated usability test 

No. Participants

5 participants

No. Tasks

4 Tasks


Google docs

Google sheets

Sticky Notes

5 Design

Final Prototype

Seamless User Experience: Unveiling the Final Design for Claire Cosmetic Website

Claire cosmetic

Interactive Mobile Prototype

Navigate through Claire Cosmetic mobile prototype

Final Design



Mobile Experience

Personalize Your Palette, Try-On Feature, and User Reviews for Enhanced Customization

Product page

Effortless Checkout Experience

Streamlined and Rapid Mobile Payment Process

Checkout process

Style Guide

Style Guide
In Summary 

Our team was tasked with designing a cosmetic website for web and mobile devices with the goal of creating an user-friendly experience for customers purchasing products online.


Utilizing a comprehensive design process, I conducted user research methodology such as  interviews, affinity mapping, task analysis, and usability testing to iteratprototyping.


A functional website prototype was developed for both desktop and mobile devices, ensuring a seamless experience across multiple platforms.

Claire Cosmetic Design Recap
bottom of page