Skip to main content
UI Coach Logo
Intermediate

Hair Color Try On and Salon Brief

Design a camera preview that compares hair color options and turns a chosen look into a realistic salon consultation brief.

Mobile2 to 4 hours

The brief

Understand the problem

Background

Digital color previews are affected by lighting, camera quality, current hair color, texture, and previous treatments. A convincing image should not be presented as a guaranteed salon result.

User context

Keisha is considering a copper color for a graduation event. Her hair was previously dyed dark, and she wants to understand maintenance and consult a colorist before booking.

Product problem

The product must guide a useful photo, show several realistic variations, communicate preview limits, and preserve sensitive images only with clear consent.

Objective

Create photo setup, shade comparison, result education, and salon consultation handoff.

What to design

Define the experience

Required experience

  • Camera and privacy setup
  • Color preview comparison
  • Shade and maintenance detail
  • Salon consultation request

Screens and states

  • Photo guidance
  • Try-on editor
  • Side-by-side comparison
  • Color brief
  • Salon booking

Core user flow

Follow the critical path

  1. 01

    Keisha takes a photo in neutral light

  2. 02

    She compares three copper shades

  3. 03

    She reviews how prior color may affect the result

  4. 04

    She sends one preview and treatment history to a verified salon

Product rules

Requirements and constraints

Requirements

  • Support diverse hair textures and protective styles
  • State that previews are approximate
  • Allow image deletion and local-only mode
  • Show shade name and maintenance expectations
  • Require consent before sharing with a salon

Constraints

  • Camera color is unreliable
  • The preview cannot assess hair condition
  • Past chemical treatment affects feasibility
  • Salon pricing requires consultation

Reality check

States worth considering

Hair is partly covered
Lighting creates an inaccurate tint
The user has no recent photo
A salon recommends against the selected process
Shared media upload fails

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Saved color brief

  • Preferred shade: warm copper 7.4
  • Current color: dark brown
  • Previous permanent dye: 8 months ago
  • Event date: 22 November
  • Preview photo sharing: salon only

Finish line

What to deliver

  • Five mobile screens
  • A comparison and disclaimer treatment that preserves creative exploration

If you want more

Optional extensions

Add temporary color options
Design a saved look board

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
AntonOpen Sans

Anton & Open Sans

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
E-commerce

Nearby Deal Alerts

Create a local shopping alert that surfaces relevant offers without exposing precise location history.

Mobile1 to 2 hours
Mobile DesignTrust and Safety
Advanced
E-commerce

Outfit Planning With Tailor Handoff

Design a styling tool that helps someone explore outfits for an occasion, request useful feedback, and prepare alterations for a local tailor.

Mobile4 hours plus
Trust and SafetyInteraction Design
Advanced
E-commerce

Scan and Go Grocery Checkout

Design an in-store checkout flow where shoppers scan items as they shop, resolve mistakes, and pay without a staffed register.

Mobile4 hours plus
Interaction DesignError Handling
Intermediate
E-commerce

Room Makeover Preview

Design a room visualization tool that helps renters test decor choices, compare combinations, and shop with realistic scale information.

Mobile2 to 4 hours
Interaction DesignMobile Design
Intermediate
E-commerce

Adjust a Household Replenishment Subscription

Design a recurring order experience that predicts supply needs while making quantity, frequency, skips, and price changes easy to control.

Mobile2 to 4 hours
Information ArchitectureInteraction Design
Intermediate
E-commerce

Product Release and Local Stock Alert

Design a brand-following experience that notifies shoppers about relevant releases and shows trustworthy nearby availability.

Mobile2 to 4 hours
Information HierarchyMobile Design