Milieu

Have you ever considered that your skincare wasn’t made for your skin? Most of it wasn’t — mass-produced for an average face, with ingredient lists most people can’t parse.

Milieu’s answer starts in the post.

All of it lived on desktop. But a routine happens in a bathroom, standing up, minutes long — nowhere near a laptop. So the brief was narrow: a native app at parity with the web, not a responsive shrink of it.

The question was never whether people wanted their skin data. It was what reaching it cost them.

I designed for Linda: 28, sensitive skin that flares easily, does her routine minutes before work. She was never going to open a laptop to check whether her barrier score had moved.

So I built four tasks, one landing in each main view — no part of the app could pass by being skipped.

Round one ran on the desktop frame resized to a phone — not a mobile design, just the web at phone width. Four tasks, 36 seconds average, and a lot of scrolling past the thing they were looking for. The comment afterwards was about comprehension rather than speed: “I was unsure what all the different microbiomes meant.”

There are two ways to put a product on a phone, and only one of them was worth five months.

On desktop the skin journey spreads across a wide timeline with four score cards beside it. Resize that and both fall past the fold — which is what round one demonstrated.

Only the pair shows the hierarchy: photography stays, while the timeline and the primary score come up to meet the fold. Three pattern changes let them.

Score carousel. Related readings stay in one row rather than stacking down the page.

Range chips. Time ranges become selection states, and all four trend lines stay in one card rather than behind a hover reveal.

Look at that card’s subtitle: “Hover over lines to highlight specific metrics.” The interaction was rebuilt for tap; the instruction to hover shipped anyway, because copy sat outside the component work. A copy audit catches that; a component audit does not.

Hover becomes a scroll. The web’s donut reveals each species on hover. A phone has no hover, and a donut segment is not a tap target — so the hidden layer became a visible one.

Four metrics carried the goals, agreed before I drew anything.

Naming Purchases as a design metric mattered more than it looks. It is the one that stops “make the data legible” from quietly becoming the whole brief.

Two designers were building different halves of the same app, so the map came before the screens.

Home and Notifications carry the highest-frequency reads. Deeper biome science sits one level down, so the first screen stays a status check rather than a textbook.

One branch I left open. Every sidebar item found a home except pop-ups, which I annotated “will be nested in Profile later on.” Writing the uncertainty into the file was more useful than resolving it to look decisive.

Partway through, the question changed from how to get this onto a phone to how to make it legible on one.

Contrast. The design system leaned on glassy translucent panels over photography, and photography is a hostile substrate for text.

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.

Cognitive load. Then I marked up the Microbiome Analysis screen and started taking things out.

1. Repeated information — the chip row restates the cards below it.
2. High, Strong, Excellent. Three readings, nothing to do about them.
3. A dropdown that opens onto nothing.

The third pin is the cognitive-load metric in miniature: a number nobody can act on isn’t information, it’s decoration.

Two prototypes cover the core loops — skin status and progress, and the membership side.

Flora AI. Complex biome concepts get a conversational layer, so explanation doesn’t have to live inside charts.

Onboarding. A long form becomes focused steps with progress, so users know where they are and what’s left.

Answer it and the control shape is the only thing telling you the rule: circles take one, squares take several.

Auth. The mossy landing and short forms set brand tone before the first dashboard read.

Then I ran the same four tasks again, this time on the mobile UI.

So the eight-second gap is a direction, not a measurement. The honest ceiling is that nothing got worse, and the new components were used without explanation.

What I trust more is where someone went unprompted.

“I associated Profile with subscription and anticipated that was where I would re-purchase the gel cleanser.” Not a stopwatch reading — but it says the architecture matched what someone expected before they touched it, which is what the IA was for.

I owned the dashboard, membership, onboarding, and Flora AI; a second designer owned Skin and Biome, with eight analysts implementing in SwiftUI.

The information architecture became the shared reference across web and mobile, so both designers could work in parallel without diverging.

What comes next is the gap in all of it: keep interviewing, so the qualitative findings rest on more than one person per round, and set up A/B testing so the quantitative ones are measured rather than indicative.