farzaneh
Case study · Top-notch Beauty · 2023

Beauty advice online is loud and biased. Top-notch Beauty makes it personal.

Top-notch Beauty is a mobile app that connects people with makeup artists and dermatologists for advice that fits their own skin and hair, and lets them try products on virtually before they buy.

Five Top-notch Beauty screens: home with expert categories, find an expert, virtual makeup try-on, an expert profile, and a chat with a makeup artist
Role
Research & UX/UI
Team
Solo
Timeline
6 months · 2023
Type
Mobile app
Client
CareerFoundry
01The problem

Trustworthy beauty advice is hard to find.

Finding trustworthy advice about beauty products online is difficult and slow, especially when people want solutions that match their own skin or hair type. They also want to see how a product will look on them before they buy it.

The information out there is scattered across sites and full of contradictions. Brands promote their own products on their own platforms, and celebrity endorsements muddy things further. Getting unbiased, personal advice takes a lot of time and effort.

That leaves a gap in the market: there's no central place to get personalised guidance from experts like makeup artists, dermatologists and beauty influencers, and few ways to consult them directly.

02Hypothesis

One place for unbiased, personal advice.

I hypothesised that a central platform offering unbiased advice on beauty products, tailored to each person's skin and hair type, would help people make informed decisions more efficiently. A curated, personal approach should give them a more reliable way to evaluate products, and more confidence in what they buy.

03Design process

The project followed the full design process, from research through definition and ideation to prototyping and two rounds of testing, with iteration between each step.

Design process diagram: research, define, ideate, prototype, test
The design process, start to finish.
04Competitive analysis

The main competitors were Sephora and Intro: Talk with experts. Sephora is the strongest rival: it has a large chat community that gives beauty advice, free consultations with beauty coaches on its website, and a try-on feature for its own brand's products, though that is only available in Singapore.

Competition

Two groups: Sephora and other makeup platforms selling online, and apps like Intro and Doctolib where people book consultations with experts.

Risks

Celebrities endorse Intro, and Sephora gives beauty advice for free. Virtual try-on, AI skin analysis, at-home devices and DNA-based skincare like Allél reduce the need for human experts.

Opportunities

Intro has beauty advisors but is expensive and Apple-only. Free advice on makeup sites covers only their own products, so it isn't seen as unbiased.

05User interviews

From online comments and the competitor research, I defined the target audience as people aged 18 to 45, mostly middle class. They want expert-approved products, value honesty over influencer ads, and are too busy to get advice in person. I interviewed 6 people aged 25–45, full-time employees or students, who matched that profile.

Key insights from the user interviews
Key insights from the interviews.

“Product reviews are often based on one person's characteristics and might not match with my skin or hair color.”

06Personas & journeys

Two people, two different needs.

The interview results pointed to two distinct personas:

01

Jessica · Sustainable skincare advocate

Values dermatologist-recommended, science-based products and wants to understand the ingredients in what she uses.

02

Amalia · Budget-conscious makeup seeker

Wants to experiment with new makeup styles, needs guidance on application, and wants to see products on her face before buying.

For each of them I wrote a full persona: background, goals and frustrations.

Persona sheet for Amalia, budget-conscious makeup seeker
Persona sheet for Jessica, sustainable skincare advocate

Persona: Amalia.

User journeys

I mapped a user journey for each persona to understand the users' perspective and behaviour: what shapes their decisions, how they feel at each step, and where they struggle, get frustrated or drop off. Pinpointing those moments showed me what to improve and what to keep.

User journey map for Amalia showing steps, thoughts, emotions and opportunities
User journey map for Jessica showing steps, thoughts, emotions and opportunities

Amalia's journey, with the pain points marked.

07User flows

With Amalia and Jessica in mind, I mapped how each of them would use the app, step by step.

Amalia: try makeup on virtually

Objective: Amalia wants to try makeup before buying it, to make sure the colours match her skin. Success: she can try products virtually and save the ones she likes.

User flow for Amalia: open Virtual Makeup, turn on camera or upload a picture, choose category, adjust colour, save or share the look
User flow for Jessica: create an account, log in, search for an expert, pay for the session, connect with the expert

Open try-on → camera or photo → category → colour → save or share.

08Sitemap

To build the sitemap, I ran an open card sort with five users and 20 terms. An open sort let people group the terms the way they think about them, so the structure follows their mental models rather than mine.

Card sort similarity matrix
Card sort similarity matrix.

The matrix shows how often participants put two cards in the same group. Clear groups emerged, like makeup products and experts, and they became the sections of the sitemap. A few cards, such as favourite product, blogger and mission, had no clear place: participants put them in different groups, so I placed them where most people expected them.

Top-notch Beauty sitemap
The resulting sitemap.
09Wireframes

From paper to pixels.

I started by sketching on paper to explore many concepts quickly. Basic wireframes then kept the focus on the main features and how they work, which came out of the competitor analysis and user research. Following the sitemap and user flows, I set the layout first and only then added colour, images and buttons.

Home screen evolution

Home screen evolving from sketch to low-fidelity, mid-fidelity and high-fidelity
Home screen, sketch to high fidelity.

Expert screen evolution

Expert profile screen evolving from sketch to high fidelity
Expert screen, sketch to high fidelity.

Try-on screen evolution

Virtual try-on screen evolving from sketch to high fidelity
Try-on screen, sketch to high fidelity.
10Usability testing

Tested twice, fixed what mattered.

I ran two rounds of usability tests. Both aimed to measure how easily first-time users learn the app, whether they understand its main functions, how quickly they complete the most common tasks, and how satisfied they are overall.

01

Mid-fidelity test

Moderated, in person and remote. 6 participants aged 25–45, all with online booking experience, 2 who had used consultation apps.

02

High-fidelity test

Unmoderated, remote. 5 participants aged 25–45, recruited through the CareerFoundry Slack channel.

I turned the interview notes into affinity maps to find patterns in observations, errors, and positive and negative quotes. These fed a rainbow spreadsheet, where I rated each issue on Jakob Nielsen's severity scale. That surfaced the biggest problems and told me which fixes to prioritise.

Six sticky notes, one per test participant, with name, age, gender and job
The six participants. Each has a colour, which marks their notes on the affinity map.
Affinity map grouping observations, errors, positive and negative quotes
Affinity map from the test sessions.

Mid-fi findings

Before and after: unclear navigation icons replaced with clearer icons and labels
Navigation icons were unclear, so I redrew them and added labels.
Before and after change to the booking calendar
Booking calendar, before and after.

Hi-fi findings

Before and after change to a navigation field
Navigation field, before and after.
Before and after change to the try-on screen
Try-on screen, before and after.
11Style guide & UI

Style guide

Top-notch Beauty style guide: colours, typography, icons and components
Colours, type, icons and components.

Final mockups

The final screens, grouped by flow. Swipe or use the arrows to move through each one.

Onboarding & sign-in

Three onboarding screens introduce the app's core features, finding an expert, video calls and virtual try-on, before the user signs in.

Onboarding screen: find an expert
Onboarding screen: video call
Onboarding screen: try on makeup
Login screen with email, password and social sign-in

Onboarding: find beauty experts.

Find & book an expert

From the home screen, users browse experts by category, open a profile, pick a time and pay for the session. Booked sessions are collected in one place, and users can chat with their expert before or after the call.

Home screen with upcoming consultations and expert categories
Find an expert screen with filters and expert list
Expert profile for makeup artist Francesca Moretti
Select a date and time screen with duration and available slots
Checkout screen with summary and payment method
Payment successful confirmation
Chat with makeup artist Francesca

Home: upcoming consultations and expert categories.

Virtual try-on & buy

Users take a selfie or pick a photo, try products on, compare before and after, and buy what suits them.

Virtual try-on start screen: selfie, upload or model
Select an image from recent photos or gallery
Try-on screen with lipstick options
Try-on screen with lipstick applied
Before and after comparison of the try-on
Product search with recent and recommended items
Product page for Rouge Drama Matte lipstick

Start a try-on: selfie, photo or model.

12Retrospective

Future steps

Research with experts

Interview makeup artists and dermatologists to understand their needs and pain points, the other side of the marketplace.

In-app purchasing

A streamlined way to buy products inside the app, to raise engagement and revenue. Validate with an A/B test against the current external-link setup.

Save to calendar

Let users add booked consultations to Google or Apple Calendar. Measure saved appointments and satisfaction, and collect feedback through surveys.

13 · Conclusion

Top-notch Beauty brings expert advice, virtual try-on and buying into one place, so people choose products that suit them, not the ad.

This was my first end-to-end project: research, personas, flows, card sorting, wireframes, two rounds of testing and a high-fidelity prototype. Each round of feedback changed the design, and the clearest next step is to hear from the experts themselves.