All projects
Mobile App

Claudia Beauty — Booking App

"A premium salon in your pocket — warm, dark, editorial."

A dark-luxury beauty-studio booking app for iOS — clients browse services, save favourites, and book appointments through a warm, editorial flow, while the studio manages services, locations, appointments and reviews from a dedicated admin app.

Role: UX/UI DesignerCompleteBeautyBookingDark Luxury
Splash
View screen

Splash

OVERVIEW

Problem

Beauty bookings live in DMs and phone calls — no visible availability, no history, no way to preview the result. Studios manage schedules manually across multiple salons, and generic booking apps feel clinical and off-brand for a premium studio.

Goal

Design and build a native iOS booking experience that feels like a premium studio — warm, dark and editorial — with a frictionless client flow and a full admin app so the studio runs itself.

Outcome

A shipped React Native (Expo) app with a complete client journey (onboarding → discover → service → booking → checkout → confirmation) and a full admin suite (dashboard, appointments, manage, stats), sharing one dark-luxury design system.

PROBLEM & STRATEGY

Problem

Booking a beauty appointment usually means DMs, phone tag and a screenshot of a price list. Clients can't see availability, remember what they booked, or picture the result — and the studio drowns in manual scheduling across salons.

UX Challenge

Designing for a premium, emotional purchase on a small screen. A beauty app that feels cheap or clinical undercuts the brand instantly. The interface had to feel like an intimate spa in the evening — warm, dark, expensive — while still being fast to book and effortless to manage on the admin side.

Strategy

A committed "dark luxury" system: warm espresso and chocolate backgrounds, a single champagne/gold accent, editorial serif display (Cormorant Garamond) over clean sans (Jost), soft warm shadows and one inverted cream sheet reserved for the checkout moment. Two apps share one design language — a client app focused on discovery and booking, and an admin app for salons, services, appointments and reviews. Motion is subtle and expensive, never bouncy.

Outcome

Clients move from browsing to a confirmed booking in a calm, guided flow that feels premium the whole way. The studio manages everything — locations, services, appointments, stats and reviews — from a matching admin app, with the same warm, editorial identity.

KEY METRICS
2

apps designed — client + admin — one design system

25+

screens across client and admin flows

iOS

native, built with React Native + Expo

1

signature cream checkout sheet in a dark app

TARGET USERS

Client

Someone booking a beauty appointment on their phone. Wants to browse services, see availability, book in a few taps, and feel the studio's premium vibe before ever walking in.

Studio / Admin

The studio owner or staff managing multiple salons — services, categories, appointments, reviews and stats — from a dedicated admin app with the same visual language.

DESIGNED PAGES
UI DIRECTION
DESIGN PRINCIPLES
  • Warm dark by default — espresso and chocolate backgrounds, never cold white or bright pink
  • Serif display + sans UI — Cormorant Garamond headings over clean Jost body
  • One cream sheet — the light inverted surface is reserved for checkout / confirmation only
  • Gold as accent, not fill — champagne/gold on overlines, active states and the primary CTA
  • Overline-above-title pattern — small tracked uppercase label above every serif title
  • Soft warm shadows — one soft lift on cards, a gold glow only on the primary CTA and Book tab
  • Rounded, generous shapes — large radii, big tap targets, airy spacing
  • Editorial service cards — image-led grids with favourite affordances
  • Subtle, expensive motion — spring press states and slow cross-fades, never bouncy-loud
  • One identity across two apps — client and admin share tokens, type and components

Colour palette

Surface — Dark

#17120FEspresso
#241711Chocolate
#0B0907Ink
#241B15Surface

Accent — Gold

#C6A06AGold
#B58A68Caramel
#F3E8DAChampagne
#E8D7C4Beige

Cream Sheet

#F4EDE3Card Light
#FBF6EECard Light Raised
#FFF7EECream Text
#8B7A68On-Light Muted
TYPOGRAPHY & TECHNICAL SPECS

Beauty

Display / Headings · Serif

Cormorant Garamond

400 Regular500 Medium600 SemiBold

Hero titles, screen headings, editorial display over photos

Display42 / editorial, airy
H132 / serif
Hero (over photo)40–64 / champagne on scrim

Aa

UI / Body · Sans-Serif

Jost

400 Regular500 Medium600 SemiBold

Body, labels, prices, buttons and overlines

Title17 / 600
Body15 / 400
Label12 / uppercase / ls 1.4
Price16 / 600

Platform

iOS

React Native + Expo

Expo · React Navigation · Reanimated · Supabase backend

Radii

18px

Default card radius

12 sm · 18 md · 24 lg · 32 xl · 999 pill

Motion

0.96

Press scale spring

Spring press 0.96–0.98 · fade/slide transitions · confirmation spring-in

Depth

Soft

One warm shadow

Soft warm card shadow · gold glow on primary CTA and Book tab only

FINAL SCREENS
CLIENT & ADMIN

Claudia Beauty is two apps sharing one dark-luxury identity — a client app built around browsing and booking, and an admin app that lets the studio run every location without breaking the brand.

Client App

Browse services, save favourites, and book in a few calm taps — a warm, guided journey that feels premium from splash to confirmation.

Booking Flow

Choose services → date → time → details → a single inverted cream checkout sheet → a springing confirmation. The one light surface in the whole app marks the transactional moment.

Admin App

Dashboard, appointments, service/category/location management, reviews, schedule and stats — the studio's workspace, in the same espresso-and-gold language as the client app.

DESIGN PROCESS
01

Discover

  • User interviews
  • Competitor audit
  • Problem framing
02

Define

  • Personas
  • User flows
  • Information architecture
03

Design

  • Wireframes
  • Visual design
  • Prototype
04

Validate

  • Usability testing
  • Iteration
  • Handoff
RESEARCH INSIGHTS

Key findings

DMs & calls

the default booking channel for beauty studios — no visible availability and no history for the client.

Premium = feel

for beauty, perceived quality is emotional; a clinical or cheap UI breaks trust before the first booking.

Multi-salon

the studio operates more than one location, so salon selection and per-salon management were first-class from the start.

User voices

"I want to see what's available and just book — not wait for a reply to my DM. And it should feel as nice as the salon does."

Client, 27

"I manage two salons. I need appointments, services and reviews in one place, not five apps and a notebook."

Claudia — studio owner

LEARNINGS & NEXT STEPS

Key takeaways

  • A premium feel on mobile comes from restraint and warmth — dark surfaces plus one accent read as luxury
  • Inverting to a single cream sheet for checkout makes the transactional moment feel distinct and trustworthy
  • Designing client and admin together keeps the brand intact where most apps let the admin side go generic

Next steps

  • Usability testing with real salon clients (5–8 participants)
  • Push-notification reminders and rebooking prompts
  • In-app payments and deposits at checkout
  • Android build and App Store / Play Store submission polish
IMPACT & SUCCESS METRICS

A shipped iOS product — these are the outcomes the client and admin flows were designed to drive.

Time to Book

< 90s

From opening the app to a confirmed appointment

Booking Completion

≥ 80%

Clients who reach checkout and complete the booking

Screens Shipped

25+

Across client and admin, on one shared design system

Admin Autonomy

100%

Salon, service and appointment management without a developer

ACCESSIBILITY AUDIT

The palette is intentionally warm and dark, so every text pairing was checked for contrast on both the espresso surfaces and the single cream checkout sheet, with large tap targets throughout.

Contrast ratios

Aa

Cream text on espresso

#FFF7EE on #17120F

15.8:1

AAA
Aa

Secondary text on espresso

#D8C6B4 on #17120F

9.4:1

AAA
Aa

Gold accent on espresso

#C6A06A on #17120F

5.6:1

AA
Aa

Ink on cream sheet

#241B15 on #F4EDE3

12.1:1

AAA
Aa

Muted on cream (large only)

#8B7A68 on #F4EDE3

3.6:1

AA

Accessibility checklist

Big tap targets on every card, chip and button

Cream sheet keeps ink contrast AAA for checkout copy

Status communicated with text + colour, not colour alone

Press states (spring scale) give clear tap feedback

Dynamic Type / font scaling support

VoiceOver pass across the booking flow

Dynamic Type and a full VoiceOver pass are the next accessibility items for the client booking flow.

DESIGNER'S REFLECTION

"Claudia Beauty was about proving that a dark, moody interface can still feel effortless to use. The hard part wasn't the visuals — it was resisting the urge to make everything gold. The luxury comes from the restraint: one accent, one cream sheet, a lot of warm darkness.

Building the client and admin apps side by side kept the brand whole — most products let the admin side turn into a generic dashboard. If I did it again, I'd prototype the booking flow on a real device sooner; small-screen motion and tap ergonomics only really reveal themselves in the hand, not in the mockup."

— Raluca Indrecan, UX/UI Designer

What I'd do differently

Prototype small-screen motion on a real device early

Design client and admin together to protect the brand

Nail the one cream sheet — it carries the whole checkout

Test the booking flow with real salon clients

Want to discuss this project?

Get in touch
All projects