MILIEU

Crafting a mobile app for a startup redefining personalized skincare- using your DNA

ROLE

UX Designer


TIMELINE

5 Months


TEAM

2 Project Managers

8 Software Developers

2 UX Designers

PLATFORMS

Figma

SwiftUI

BACKGROUND

The Why

Milieu was approaching launch, but the product experience lived primarily on the web. To support customers across platforms, the team needed a mobile app that could translate their existing web experience into an intuitive mobile interface. The goal was to give users access to their personalized skin data, routines, and progress on the go, without losing clarity on desktop.

Milieu is a YC-backed skincare startup focused on personalization. By combining skin data with tailored formulations, Milieu creates custom skincare routines designed to adapt to individual needs.





RESEARCH

Understanding Users

Designing for mobile required more than resizing Milieu’s existing web layouts. Mobile users interact differently. They scan faster, use one hand, and expect information to be surfaced progressively rather than all at once. Many mobile web experiences simply compress desktop layouts into vertical scrolls, which can overwhelm users and bury key insights.

To address this, I explored mobile-native patterns for presenting dense skin data and routines. Instead of large text blocks and long vertical flows, I researched and applied components such as dropdowns, horizontal carousels, and modular sections that allow users to reveal information when they need it. This made complex data feel lighter, more approachable, and easier to navigate on a small screen.

Because Milieu's customers will switch between web and mobile to track their skin progress, both the web and app had to be consistent. I focused on maintaining shared information architecture and terminology, and also adapting interactions to feel native on each device so users don't need to relearn where information lived or how to access it.

SYNTHESIS

Goals & Success Metrics

GOALS

  • Translate Milieu’s web experience into a mobile app that feels native and intuitive

  • Make personalized skin data easy to access, understand, and act on

  • Ensure consistency across mobile and web to support cross-platform use


SUCCESS METRICS

  • Users can quickly find key skin insights and routines on mobile

  • Reduced cognitive load when viewing dense or data-heavy content

  • Clear information parity between mobile and web, without user confusion

IDEATION

Information Architecture

The information architecture was designed to prioritize clarity while supporting Milieu’s data-rich experience. Core features such as skin insights, microbiome data, and updates are surfaced early through the Home and Notifications sections, allowing users to quickly access the most relevant information.

More complex content, like bacterial composition and biome breakdowns, is progressively revealed through structured pathways using visual summaries, lists, and educational support via Flora AI. This approach helps users move from high-level insights to deeper details without feeling overwhelmed, while maintaining consistency across mobile and web experiences.

IDEATION

Design System

Color Palette

Our color system uses natural, earthy tones inspired by botanicals and wellness aesthetics.

Primary Colors

Background

#f9f7f3

--background

Main page background - warm cream

Foreground

#2d3a2e

--foreground

Primary text color - deep forest

Primary

#647856

--primary

Brand color - sage green

Secondary

#7fa89f

--secondary

Ocean blue-green accent

Accent

#5a9ba8

--accent

Teal accent for highlights

Tertiary

#a6856b

--tertiary

Warm terracotta brown

Semantic Colors

Destructive

#a8594a

--destructive

Error and delete actions

Muted

#e6e2d9

--muted

Subtle backgrounds

Muted Foreground

#6d7861

--muted-foreground

Secondary text

Border

#d7d2c6

--border

Default border color

Input Background

#f4f1eb

--input-background

Form input backgrounds

Card

#ffffff

--card

Card backgrounds

Data Visualization (Charts)

Chart 1

#647856

--chart-1

Primary sage green

Chart 2

#7a8a6e

--chart-2

Light sage

Chart 3

#a6856b

--chart-3

Terracotta

Chart 4

#7fa89f

--chart-4

Ocean blue-green

Chart 5

#5a9ba8

--chart-5

Teal

Status Colors (Percentile System)

Used consistently across the app for metrics and scores

Optimal (67-100%)

#5a8a6a

Green - Optimal performance

Okay (34-66%)

#c9a961

Yellow - Moderate/Okay

Needs Improvement (0-33%)

#a8594a

Red - Needs improvement

Gradients

Sidebar Gradient

Used for the main sidebar navigation

linear-gradient(to bottom, #7a8a6e 0%, #647856 50%, #3f5240 100%)

Primary Hero Gradient

Used for hero sections and headers

linear-gradient(to bottom right, #647856, #647856e6, #647856cc)

Muted Background Gradient

Subtle backgrounds for cards and sections

linear-gradient(to bottom right, #e6e2d933, #e6e2d966)

Iridescent Green

Premium membership card effect

linear-gradient(135deg, #647856 0%, #7a8a6e 25%, #8a9d80 50%, #a6b599 75%, #647856 100%)

Typography System

Our typography uses two main font families for a sophisticated, wellness-focused aesthetic.

Font Families

Instrument Serif

Primary display font - Used for all headings (h1, h2, h3)

The Quick Brown Fox

font-family: 'Instrument Serif', Georgia, serif

Hanken Grotesk

Body font - Used for body text, labels, buttons, and h4

The Quick Brown Fox Jumps Over

font-family: 'Hanken Grotesk', sans-serif

Type Scale

Page Title (.page-title)

Font Family:

Instrument Serif

Size:

2.5rem / 40px

Weight:

400

Line Height:

1.3

Letter Spacing:

-0.02em

Skin Microbiome Analysis

Section Header (.section-header)

Font Family:

Instrument Serif

Size:

1.75rem / 28px

Weight:

400

Line Height:

1.4

Letter Spacing:

-0.01em

Your Microbiome Metrics

H1

Font Family:

Instrument Serif

Size:

2rem / 32px

Weight:

400

Line Height:

1.3

Letter Spacing:

-0.02em

Welcome to Your Dashboard

H2

Font Family:

Instrument Serif

Size:

1.5rem / 24px

Weight:

400

Line Height:

1.4

Letter Spacing:

-0.01em

Recent Updates

H3

Font Family:

Instrument Serif

Size:

1.25rem / 20px

Weight:

400

Line Height:

1.5

Letter Spacing:

-0.01em

Product Recommendations

H4

Font Family:

Hanken Grotesk

Size:

1rem / 16px

Weight:

500

Line Height:

1.5

Letter Spacing:

0

Quick Actions

Body (p)

Font Family:

Hanken Grotesk

Size:

1rem / 16px

Weight:

400

Line Height:

1.5

Letter Spacing:

0

This is regular body text used throughout the application for readable content.

Small

Font Family:

Hanken Grotesk

Size:

0.875rem / 14px

Weight:

400

Line Height:

1.5

Letter Spacing:

0

Small text for captions and secondary information

Extra Small

Font Family:

Hanken Grotesk

Size:

0.75rem / 12px

Weight:

400

Line Height:

1.5

Letter Spacing:

0

Extra small text for labels and metadata

Font Weights

Light - 300

font-weight: 300

Regular - 400

font-weight: 400

Medium - 500

font-weight: 500

Semibold - 600

font-weight: 600

Bold - 700

font-weight: 700

Spacing System

Consistent spacing creates visual rhythm and hierarchy. Our spacing scale is based on 4px increments.

Spacing Scale

spacing-0.5

2px

0.125rem

spacing-1

4px

0.25rem

spacing-1.5

6px

0.375rem

spacing-2

8px

0.5rem

spacing-2.5

10px

0.625rem

spacing-3

12px

0.75rem

spacing-4

16px

1rem

spacing-5

20px

1.25rem

spacing-6

24px

1.5rem

spacing-8

32px

2rem

spacing-10

40px

2.5rem

spacing-12

48px

3rem

spacing-16

64px

4rem

spacing-20

80px

5rem

spacing-24

96px

6rem

Border Radius

--radius-sm

0.5rem (8px)

--radius-md

0.625rem (10px)

--radius-lg

0.75rem (12px)

--radius-xl

1rem (16px)

rounded-2xl

1rem (16px)

rounded-3xl

1.5rem (24px)

rounded-full

9999px

UI Components

Core UI components with examples and usage guidelines.

Buttons

Default

Primary Button

Secondary

Outline

Ghost

Destructive

Sizes

Small

Default

Large

Rounded Pills

Rounded Primary

Rounded Outline

Badges

Default

Secondary

Outline

Destructive

Custom Green

Custom Yellow

Form Inputs

Default Input

Enter text...

Disabled Input

Disabled...

Rounded Input

Rounded...

Cards

Standard Card

White background with subtle border and shadow.

Gradient Card

Subtle gradient background with primary tint.

Glass Card

Glassmorphism effect with backdrop blur.

Elevated Card

Stronger shadow for emphasis.

Shadow System

Elevation through shadows creates depth and visual hierarchy.

Shadow SM

Subtle shadow for small elements

--shadow-sm

0 1px 2px 0 rgb(0 0 0 / 0.05)

Shadow

Default shadow for cards

--shadow

0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)

Shadow MD

Medium shadow for elevated elements

--shadow-md

0 4px 6px -1px rgb(0 0 0 / 0.12), 0 2px 4px -2px rgb(0 0 0 / 0.1)

Shadow LG

Large shadow for modals and popovers

--shadow-lg

0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.12)

Shadow XL

Extra large shadow for dialogs

--shadow-xl

0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.12)

ITERATION

Changes

The left image illustrates the dashboard designed for desktop, with dense layouts, hover-based interactions, and wide data visualizations. Translating this experience to mobile required rethinking how information was surfaced instead of resizing components. I restructured the hierarchy to emphasize the most important skin insights first, allowing users to quickly understand their progress at a glance.


Desktop-specific interactions, such as hover states and tooltips, were replaced with mobile-native patterns like tap interactions and expandable sections. The progress chart was simplified to improve legibility on smaller screens, and key metrics were moved into a horizontal carousel to reduce vertical scrolling while keeping related data grouped together.

The progress timeline allows users to track changes in their skin health over time by selecting time ranges and viewing trends directly within the graph. On mobile, hover-based interactions were replaced with tap and selection states, making the chart easy to explore with one hand while maintaining clarity across multiple data lines.

Key scores, such as the Derma Biome Score and Skin Balance, were surfaced as individual cards and organized into a horizontal carousel, allowing users to quickly scan core metrics without excessive vertical scrolling.

FINAL PRODUCT

High Fidelity

These two mobile views support Milieu’s core customer journey, from tracking skin health to managing membership and products. The dashboard surfaces personalized insights, progress over time, and quick actions, allowing users to understand their skin status at a glance and take immediate next steps. The membership and account views centralize subscription details, testing schedules, and order history, giving users clear visibility and control over their personalized skincare ecosystem.

Nathan’s Milieu

Barrier Restore Serum

Hydrating Gel Cleanser

Microbiome Defense Booster

Probiotic Balance Cream

Nathan's Skin Journey

Track your microbiome health progress and see how your personalized routine is transforming your skin

Progress Timeline

Hover over lines to highlight specific metrics

3M

6M

1Y

All

J

F

M

A

M

J

5

6

7

8

9

Primary

Derma Biome Score

Overall skin microbiome health

8.4

out of 10

+35.5%

Skin Balance

Microbiome diversity & equilibrium

8.3

out of 10

+27.7%

Defense

Protective barrier strength

6.1

out of 10

+27.1%

Resilience

Skin's adaptive response

9.1

out of 10

+24.7%

Recent Updates & Insights

Track key changes and receive personalized insights based on your microbiome journey

+11.6%

Improvement

Defense Score Increased

Your skin's protective barrier strength improved by 11.6% this month.

8.6/10

Milestone

Derma Biome Score: 8.6

You've reached your highest microbiome health score since starting.

8.6/10

Milestone

Derma Biome Score: 8.6

You've reached your highest microbiome health score since starting.

8.6/10

Milestone

Derma Biome Score: 8.6

You've reached your highest microbiome health score since starting.

8.6/10

Milestone

Derma Biome Score: 8.6

You've reached your highest microbiome health score since starting.

8.6/10

Milestone

Derma Biome Score: 8.6

You've reached your highest microbiome health score since starting.

Update Your Skin Profile

Your skin evolves. Retake the quiz to refresh your personalized recommendations.

Takes 5 minutes

Quick & easy

Refined results

Better accuracy

Fresh insights

Updated guidance

Last completed

October 15, 2024

25 days ago

Retake Quiz

Keep your profile up-to-date and get personalized guidance from Flora AI

Quick Actions

Quarterly Testing

One collection every 3 months to track your progress

Deep Analysis

100+ bacterial species analyzed per test

Membership

Your premium Milieu membership and personalized skincare ecosystem

Your membership includes

Your Personalized Products

One-time purchases of products formulated for your unique microbiome

Key Ingredients

Prebiotic Complex

Hyaluronic Acid

Niacinamide

Benefits

Supports skin microbiome balance

Gentle, non-stripping formula

Maintains optimal pH

Why This Works For You

Your microbiome analysis shows a need for gentle cleansing that preserves beneficial bacteria while addressing dryness. This formula supports your unique bacterial diversity.

$42

Add to cart

Personalized

Cleanser

Hydrating Gel Cleanser

Key Ingredients

Ceramides

Peptides

Postbiotics

Benefits

Strengthens skin barrier

Reduces sensitivity

Enhances microbiome resilience

Why This Works For You

Based on your sensitivity scores and microbiome composition, this serum targets barrier repair while nourishing your skin's beneficial microbes for long-term health.

$64

Add to cart

Personalized

Serum

Barrier Restore Serum

Key Ingredients

Live Probiotics

Squalane

Beta-Glucan

Benefits

Deep hydration

Introduces beneficial bacteria

Calms irritation

Why This Works For You

Your biome type (Forma) benefits from probiotic supplementation to enhance diversity. This moisturizer delivers active cultures that complement your existing microbiome.

$78

Add to cart

Personalized

Moisturizer

Probiotic Balance Cream

Key Ingredients

Prebiotics

Antioxidants

Adaptogens

Benefits

Feeds beneficial bacteria

Protects against environmental stress

Improves stability over time

Why This Works For You

This targeted booster addresses your lower stability score by providing prebiotics that support the growth of keystone species identified in your microbiome analysis.

$56

Add to cart

Personalized

Booster

Microbiome Defense Booster

Account Management

Your Orders

View and track your past purchases

Manage your subscription, payment methods, and contact information

Track Your Skin's Evolution

Your next test is scheduled for July 15, 2025 • Every 3 months

Your skin microbiome changes over time based on products, lifestyle, and environment. Premium members receive quarterly testing to track improvements and adjust your personalized routine based on real scientific data.

Advanced Analysis

100+ bacterial species detected

Track Progress

See how your skin evolves

Simple At-Home Kit

Easy swab test, results in 2 weeks

Updated Formulas

Adjust products based on changes

Included with Membership

Next Test Kit

Free

Ships July 1, 2025

Complete microbiome analysis

Detailed progress report

Updated product recommendations

Free shipping included

Order Extra Kit ($99)

Last test: December 15, 2024

Profile Information

Update your personal details

Email

nathan.shatz@email.com

Phone

+1 (555) 123-4567

Change Password

Notification Settings

Subscription Settings

Manage your membership plan

Current Plan

Premium Membership

Active

Next Billing Date

April 15, 2025

$29.00

Pause Subscription

Cancel Subscription

Payment Method

Update your billing information

VISA

•••• 4242

Expires 12/26

Edit

Add Payment Method

Billing Address

123 Wellness Street

San Francisco, CA 94102

United States

Shipping Addresses

Manage your delivery locations

Default

Nathan Shatz

123 Wellness Street

San Francisco, CA 94102

United States

Add Shipping Address

Quarterly Microbiome Testing

Track your skin's evolution with comprehensive testing every 3 months

Order History

View your past purchases and track current orders

Another aspect we implemented was the Flora AI view, which serves as a guidance layer within the app, helping users better understand their skin microbiome and personalized results. Designed as a conversational interface, it allows users to ask questions in natural language and receive clear, approachable explanations about complex skin concepts. The experience balances depth with simplicity, surfacing relevant information without overwhelming users, and reinforces trust by framing Flora AI as a supportive expert that is personalized to the user.

As users enter the application, we also created an onboarding and quiz flow, designed to gradually collect essential skin, lifestyle, and demographic information. Questions are broken into focused steps with clear progress indicators, helping users understand where they are in the process and what remains. By structuring the quiz into manageable sections and using simple selection patterns, the flow feels approachable and intentional, which sets the foundation for accurate personalization.

I was also asked to create authentication screens to introduce Milieu’s core branding. The landing screen establishes brand tone and sets expectations, while login and account creation flows are streamlined to reduce cognitive load. Clear visual hierarchy, minimal inputs, and consistent styling help users move quickly from entry to engagement.

FINAL PRODUCT

High Fidelity

LOOKING FORWARD

Reflection

This project was a meaningful learning experience for me, both as a designer and as a collaborator. It was one of the first times I worked closely with another designer on a fast-moving product, which pushed me to think more deliberately about alignment, communication, and shared decision-making. We spent a lot of time defining a clear information architecture and dividing ownership across dashboard views, which helped us move quickly while still keeping the experience cohesive. Balancing consistency across the app, especially under a tight timeline, taught me how important early structural decisions are to downstream execution.

Milieu also challenged me in new ways as a UI-heavy project. The company already had a well-defined and polished design system, so much of my work focused on translating that system thoughtfully into mobile rather than reinventing patterns. Compared to previous projects that leaned more heavily on research and discovery, this experience sharpened my visual design skills, attention to detail, and ability to design within established constraints.

Most importantly, working with a YC-backed startup that was nearing launch made the impact of my work feel very real. Designing for a product at this scale, with real users and real timelines, gave me a stronger sense of responsibility and confidence as a designer. Seeing how design decisions could directly support a company preparing to launch reinforced my excitement for building products that are both thoughtful and tangible.