My Role
UX & UI Designer
I was involved in all parts of the process, but my main focus was on; Research, Visual & Interaction Design
Team
3 people - Self Directed, with feedback from the mentor and peers.
Tools
Figma, Miro, Maze, Adobe photoshop
Deliverable
Responsive website for desktop and mobile.
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.
About
Project Overview
Goals
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.
Claire Cosmetic
Website Design
1 Empathize
User Survey
12 Questions | 171 Participants
User Interviews
Interview Summary:
-
5 Participants were interviewed about their cosmetic routine.
-
4 females, 1 non-binary
-
Age: 18 - 40
-
9 Questions
Results
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.
Competitive 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
-
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.
Persona
Bio
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.
Goals
-
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.
Challenges
-
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
Storyboard
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
Sketches
Designing the Homepage
Version 1
Version 2
Version 3
Final
Designing the Product Page
Version 1
Version 2
Version 3
Final
Designing the Try-On Page
Version 3
Version 2
Version 1
Final
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.
-
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.
Methodology
Unmoderated usability test
No. Participants
5 participants
No. Tasks
4 Tasks
Software
Google docs
Google sheets
Sticky Notes
5 Design
Interactive Mobile Prototype
Navigate through Claire Cosmetic mobile prototype
Final Design
Homepage
Mobile Experience
Personalize Your Palette, Try-On Feature, and User Reviews for Enhanced Customization
Effortless Checkout Experience
Streamlined and Rapid Mobile Payment Process
Style Guide
In Summary
Task
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.
Approach
Utilizing a comprehensive design process, I conducted user research methodology such as interviews, affinity mapping, task analysis, and usability testing to iteratprototyping.
Product
A functional website prototype was developed for both desktop and mobile devices, ensuring a seamless experience across multiple platforms.
