
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
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.