Milieu
Crafting a mobile app for a startup redefining personalized skincare using DNA
- Native mobile
- Interaction design
- Information architecture
- Accessibility
- Role
- UX Designer
- Timeline
- 5 Months
- Team
- 2 Project Managers
- 8 Software Analysts
- 2 UX Designers
- Tools
- Figma
- SwiftUI
Summary
Milieu formulates skincare from a swab of your skin’s microbiome — but everything it told you lived on a desktop dashboard, and nobody does their skincare at a desk. Over five months I designed the native app that brings those readings to the bathroom mirror.
I owned Home, membership, onboarding and the Flora AI assistant, and shaped the information architecture both designers worked from. The result: 5 mobile flows, 4 mobile components and 20+ high-fidelity screens, built in SwiftUI by the engineering team — and a retest where the same tasks ran eight seconds faster.
Background
Skincare that starts with a swab
Most skincare is mass-produced for an average face, with ingredient lists few people can parse. Milieu starts from the other end: it reads the bacteria living on your skin, then formulates products and a routine around what it finds — and tracks how your skin changes.
A kit arrives
A microbial DNA swab, posted to the customer.
The sample goes back
Sequenced into a reading of what lives on that skin.
The questions
How the skin behaves after cleansing, and the one priority.
The routine
Products chosen against the reading and the answers together.
Neither half works alone — the biome says what is there, the answers say what to fix.
Then it repeats. The next sample resets the reading — a subscription, not a result.
Problem
The insights lived on a laptop. The routine doesn’t.
I designed for Linda: 28, a designer in Seattle, with sensitive skin that reacts to the wrong pairing of products. Milieu’s routine works for her — but she does it in the minutes before leaving for work, standing at a mirror, nowhere near a desktop.
Problem
With Milieu’s experience confined to desktop, customers can’t reach or interpret their personalized skin insights day to day, or on the go.
Objective
A native mobile app that puts personalized skin data in reach — and stays in step with the web product people already know.
Four measures, agreed before I drew anything, kept that objective honest:
Cognitive load
Dense, data-heavy content reads without a wall of UI.Purchases
Repurchasing a product works end to end inside the app.Mobile–web parity
Labels and structure match the web, so nobody relearns the product.Diagram interpretation
Trend graphs can be read on a phone, not merely displayed on one.
Research
The web at phone width took 36 seconds a task
Before designing anything, I tested what already existed: the desktop product resized to a phone frame, with one task landing in each main view so nothing could pass by being skipped.
HomeTask 1
Track six months of skin progress.BiomeTask 2
Find your resilience level.ProfileTask 3
Repurchase the gel cleanser.Flora AITask 4
Ask the assistant for guidance.
The participant scrolled through card after card, often past the thing they were looking for — 36 seconds on average to reach each goal. What they said afterwards was about comprehension, not speed:
When following the steps, I was unsure what all the different microbiomes meant and how it would be applicable to my skin.
That set the research goal: lower the time to complete these flows by making the experience genuinely mobile. The wider numbers pointed the same way.
- 36saverage per task, resized desktop
- 49%of people use their phone one-thumbed
- 57%won’t recommend a business with a poor mobile presence
A responsive page and a native app are different products. The first compresses a desktop layout; the second is built around touch, speed and a few seconds of attention.
| Responsive page | Native app |
|---|---|
| A menu at the top of a long scroll | Bottom navigation, inside thumb reach |
| Hover states, on a device with no hover | Swipe and tap — gestures the device has |
| Every level of detail present at once | Progressive disclosure: detail available without being present |
| Related readings stacked down the page | Card carousels putting them side by side |
Design
Four patterns a phone already knows
On desktop the skin journey spreads across a wide timeline with four score cards beside it. Resize that and both fall below the fold — which is exactly what round one showed. On mobile, photography stays while the timeline and the primary score rise to meet the fold.
01
Scores sit side by side, not stacked
Four related readings stay in one swipeable row instead of four cards down the page.
Primary
Derma Biome Score
Overall skin microbiome health
8.4out of 10
+35.5%
Skin Balance
Microbiome diversity & equilibrium
8.3out of 10
+27.7%
Defense
Protective barrier strength
6.1out of 10
+27.1%
Resilience
Skin’s adaptive response
9.1out of 10
+24.7%
Derma Biome Score — 1 of 4
02
Time ranges become chips
All four trend lines stay in one card, and the range is a selection state instead of a hover reveal.
Progress Timeline
Hover over lines to highlight specific metrics
6M — January to June.
Highlight a line
What I’d catch next time
The card’s subtitle still reads “Hover over lines to highlight specific metrics.” The interaction was rebuilt for tap; the copy sat outside the component work and shipped anyway. A copy audit catches that — a component audit doesn’t.
03
Hover becomes a scroll
The web’s donut reveals each species on hover. A phone has no hover, and a donut segment isn’t a tap target — so the hidden layer became a visible list under the chart.
04
A sidebar becomes a tab bar
Two designers were building different halves of one app, so the map came before the screens. Home and Notifications carry the everyday reads; deeper biome science sits one level down, so the first screen stays a status check rather than a textbook.
- Milieu App
- Notification
- Recent updates
- Insights
- Quiz & kit updates
- Home
- Skin Journey
- Biome Score
- Recent Updates & Insights
- Quick Actions
- Microbiome
- Your biome type
- Bacterial Composition
- Pie chart
- List breakdown
- Biome 1
- Biome 2
- Biome 3
- Biome 4
- Know more ⇢ Flora AI
- Flora AI
- Questions
- Facts
- What makes a biome different
- Different biomes
- Skin
- Profile
- Notification
Every sidebar item found a home except pop-ups, which I annotated “will be nested in Profile later on.” Writing the open question into the file was more useful than resolving it to look decisive.
Accessibility
Legible beats liquid glass
Partway through, the question changed from how do we get this onto a phone to how do we make it readable on one.
01
Text moves off the photography
The visual language leaned on translucent glass panels over photographs — and a photograph is a hostile background for text.
Over #8a847b, 3.71:1 — fails the 4.5 minimum.
Over #757660, 4.65:1 — clears the 4.5 minimum.
Over #4c553a, 7.87:1 — clears the 4.5 minimum.
Over #1e212c, 16.04:1 — clears the 4.5 minimum.
3.71:1 to 16.04:1, depending only on where it lands.
Two pass, one passes by a fifteenth of a point, one fails — and which you get depends only on where the text lands. The problem is the variance, not the picture, so the text moved onto a solid panel.
02
Anything you can’t act on comes out
I marked up the Microbiome Analysis screen and removed the skin biology that didn’t help anyone decide anything.
- Repeated information — the chip row restates the cards below it.
- High, Strong, Excellent. Three readings, nothing to do about them.
- A dropdown that opens onto nothing.
Final product
Five flows, built for one hand
Two working prototypes cover the core loops — skin status and progress, and the membership side.
01
Flora AI explains what the charts can’t
Biome science gets a conversational layer, so explanation doesn’t have to live inside a chart.
02
Onboarding is one question at a time
A long form becomes focused steps with progress, so people know where they are and what’s left. The control shape carries the rule: circles take one answer, squares take several.
Skin Goals
03
Sign-in sets the tone, then gets out of the way
A mossy landing and short forms establish the brand before the first dashboard read.
Testing
Same four tasks, eight seconds faster
I ran the same four tasks again, this time on the mobile app, with a different participant.
- 36sround one — resized desktop
- 28sround two — native app
How much to trust it
One participant per round, not the same person twice, and averages only. The eight-second gap is a direction, not a measurement — what it does say is that nothing got worse, and the new components were used without explanation.
What I trust more is where someone went unprompted. Asked about resilience, they went straight to Skin; asked to repurchase, straight to Profile.
I associated Profile with subscription and anticipated that was where I would be able to re-purchase the gel cleanser.
- Milieu App
- Profile
- Subscription — reached first try, unprompted
- Skin
- Resilience — reached first try, unprompted
- Profile
Impact
What launched
- 5mobile user flows
- 4mobile components
- 20+high-fidelity screens
Each of the four measures came back with a concrete answer:
Cognitive load
Skin and Microbiome combined into one view, cutting the redundancy between them.Purchases
Repurchase nested under Profile, where testing showed people looked first.Mobile–web parity
Every desktop interaction given a mobile equivalent, not a smaller copy.Diagram interpretation
Eight graphs redrawn for a phone-width read, not scaled down to one.
Linda can now check how her skin is doing on her phone, in the minutes she actually has — at the mirror, before work.
Reflection
What I took away
01
An information architecture is what lets you stop coordinating
Building a mobile-first map that stayed cohesive across two designers’ work was the highest-leverage thing I did. The map is what let us work apart.
02
Usability over visual complexity
Milieu already had a polished visual language. My job was translation — into interactions a phone understands, and contrast a bathroom mirror at 7am can survive.
03
Near-launch makes the impact real
Designing alongside project managers and engineers that close to shipping sharpened how I communicate decisions, and how fast I make them.
Next, I’d keep interviewing so the qualitative findings rest on more than one person per round, and roll out A/B testing so the quantitative ones are measured rather than indicative.