UI/UX Case Study
Hue & You
Hue and You is a next-generation beauty platform that transforms traditional makeup shopping into an interactive, personalized experience.
It brings together high-end and cult-favorite brands, allowing users to virtually try products, find perfect shade matches, and co-create looks with friends — all on a cruelty-free, inclusive platform.
Overview
My Role
Product Designer — Research & Experience Design
User Research & UX Strategy
UI Design & Design Systems
Interaction Design & Prototyping
Usability Testing & Iteration
Product Vision & Goals
From the research, we aligned on three main goals:
-
Help users discover products that match their exact skin tone.
-
Create a trusted, inclusive space for beauty exploration.
-
Foster community and creativity through shared experiences.
Understanding the Problem
Through early discovery sessions and mixed-method research, we identified core frustrations users face when shopping for beauty products online:
-
Shade-Matching Frustration — Users struggled to find accurate shades due to poor lighting or lack of real-life representation.
-
Visual Authenticity — Product photos often failed to represent true color or texture.
-
Trust in Claims & Ingredients — Users wanted transparency in what they were applying to their skin.
From these insights, we decided to focus primarily on solving the shade-matching challenge, as it was the most critical barrier to online cosmetic shopping.
Design Process
With insights in place, the design process moved through several key stages:
Sketching & Ideation – Rapid hand-drawn sketches to explore user flows and layouts.
Color Exploration – Using coolors.co, we built a palette that reflects Hue & You’s modern and inviting brand tone.
UI Kit & Tokens – Developed a design system using color, typography, spacing, and radius tokens for consistent UI.
Wireframing – Applied the 8-point grid system for balanced spacing and alignment.
High-Fidelity Mockups – Created final screen designs in Figma, applying brand colors, imagery, and refined typography.
Prototype – Built a clickable prototype to simulate the full user journey from browsing to checkout.
Key Screens
Landing Page – Introduces users to a personalized shopping experience.
Clear progression:
Hero → Offer → Virtual Try-On → Cart → Recommendations.
“Pick up where you left off” and “Buy It Again” sections personalize the experience and reduce friction in repeat purchases.
Skin type selector (“Oily,” “Balanced,” “Combination”) supports product filtering and personalization.
“Virtual Try On” button is prominent and action-oriented, encouraging deeper engagement.
Sections like “Bestsellers,” “Trending,” and “New Arrivals” are chunked for easy scanning.
Shade-Matching – Helps users find the perfect product match using tone analysis.
Primary CTAs
“Shades” and “Show Products” buttons are prominently placed, encouraging exploration and conversion.
“Foundation” label + “Shades” button create a clear entry point for product exploration.
Shade swatches offer immediate visual options, supporting fast decision-making
Walkthrough of Shade-Matching process
Checkout – Streamlined process ensuring a frictionless purchase experience.
Product details are clearly presented: brand, shade, description, and price.
“Checkout,” “PayPal,” and “Click below to Checkout” are distinct and actionable, supporting multiple payment paths.
“In your wishlist” section shows saved items with clear “Move to Cart” buttons, promoting conversion and continuity.
Walkthrough of Checkout Process
Results & Takeaways
The project delivered a complete design system and prototype ready for usability testing and future development.
Key learnings:
Personalization is central to user trust and engagement in beauty shopping.
AR and visual accuracy features significantly improve user confidence in product selection.
A strong design system accelerates development and maintains brand consistency.
