Skip to content
Jun Tan — home
Hi, I'm Jun
  • User Experience Design
    • Human-Centered AI
    • Business
Campus Leader
Previous Intern
Condensed reading mode (off) — the same case study as plain text, without animation

Native mobile · 5 months

Milieu

Crafting a mobile app for a startup redefining personalized skincare using DNA.

Role
UX Designer
Team
2 PMs · 8 analysts · 2 designers
Tools
Figma · SwiftUI

Five months, in numbers

A desktop dashboard, rebuilt for one hand.

  1. 4

    mobile components, rebuilt for touch

  2. 5

    mobile user flows, from onboarding to repurchase

  3. 20+

    high-fidelity screens, built in SwiftUI by engineering

Background

Skincare that starts with a swab.

  1. 1
    The app's next-test-kit card: included with membership, free, ships July 1
    Physical

    A kit arrives

    A microbial DNA swab, posted to the customer.

  2. 2
    The dashboard's bacterial composition donut: an estimated 319 species identified
    Physical

    The sample goes back

    Sequenced into a reading of what lives on that skin.

  3. 3
    An onboarding question: after cleansing, how does your skin usually feel?
    In the app

    The questions

    How the skin behaves after cleansing, and the one priority.

  4. 4
    Personalized product cards: a cleanser and a serum, photographed on moss
    In the app

    The routine

    Products chosen against the reading and the answers together. Then it repeats — a subscription, not a result.

Linda’s Memoji, waving

Linda

  • 28
  • Corporate employee
  • Sensitive skin

Her routine happens at the mirror, minutes before work. Her skin data lives on a desktop.

Nobody does skincare at a desk.

A native app that puts personalized skin data in reach — and stays in step with the web product people already know.

Round one · the desktop site at phone width

36s

on average to reach each goal — scrolling card after card, often past the thing they wanted.

One task in each main view, so nothing passed by being skipped.

  • Task 1

    Home

    Track six months of skin progress.

  • Task 2

    Biome

    Find your resilience level.

  • Task 3

    Profile

    Repurchase the gel cleanser.

  • Task 4

    Flora AI

    Ask the assistant for guidance.

“I was unsure what all the different microbiomes meant and how it would be applicable to my skin.” — Participant 1

A responsive page and a native app are different products.

  1. 49%

    of people use their phone one-thumbed

  2. 57%

    won’t recommend a business with a poor mobile presence

The same four decisions, both ways.

Responsive page: A menu at the top of a long scroll

Native app: Bottom navigation, inside thumb reach

Responsive page: Hover states, on a device with no hover

Native app: Swipe and tap — gestures the device has

Responsive page: Every level of detail present at once

Native app: Progressive disclosure: detail available without being present

Responsive page: Related readings stacked down the page

Native app: Card carousels putting them side by side

Design

Four patterns a phone already knows.

Nathan’s Milieu desktop dashboard — product photography, the Progress Timeline chart and Derma Biome metric cards
The same dashboard on mobile — photography first, then the Progress Timeline and the Derma Biome score carousel risen to the fold
  1. 1

    Scores sit side by side

    Four related readings stay in one swipeable row instead of four cards down the page.

  2. 2

    Time ranges become chips

    All four trend lines stay in one card, and the range is a selection state instead of a hover reveal.

  3. 3

    Hover becomes a scroll

    The web’s donut reveals each species on hover. A phone has no hover, so the hidden layer became a visible list under the chart.

  4. 4

    A sidebar becomes a tab bar

    Two designers built different halves of one app, so the map came first. Home carries the everyday reads; the biome science sits one level down.

The Derma Biome score carousel — four score cards in one swipeable row
The progress timeline card with 3M, 6M, 1Y and All range chips
Desktop bacterial composition donut with a hover tooltip, beside the mobile version listing all six species below the chart
The information architecture both designers worked from — Home, Notification, Microbiome, Flora AI, Skin and Profile

Try them

Rebuilt from the Figma components.

  • 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

Swipe it, or use the arrow keys.

Progress Timeline

Hover over lines to highlight specific metrics

6M — January to June.

Highlight a line

The four line colours and end values are the real ones.

Legible beats liquid glass.

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

Four patches sampled off one screen · same white text on each

Your skin’s microbiome is Structured

#8a847b3.71 : 1Fails AA

Your skin’s microbiome is Structured

#7576604.65 : 1Passes AA

Your skin’s microbiome is Structured

#4c553a7.87 : 1Passes AA

Your skin’s microbiome is Structured

#1e212c16.04 : 1Passes AA

The problem is the variance, not the picture — so the text moved onto a solid panel, and anything you can’t act on came out.

Milieu Microbiome Analysis screen: copy set over a mossy photograph, a chip row, three stat cards reading High, Strong and Excellent, and a collapsed rowRepeats the cards below it.Three readings, nothing to act on.A dropdown onto nothing.

Final product

Five flows, built for one hand.

Home prototype
Membership prototype
  1. 1

    Flora AI explains what the charts can’t

    Biome science gets a conversational layer, so explanation doesn’t have to live inside a chart.

  2. 2

    Onboarding is one question at a time

    A long form becomes focused steps with progress. The control shape carries the rule: circles take one answer, squares take several.

  3. 3

    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.

Three Flora AI screens — assistant home with suggested prompts and a chat explaining the skin microbiome
An onboarding quiz step with a progress bar and single-answer options
Milieu authentication screens — mossy landing with Log In and Sign Up, plus login and create-account forms

Try it

Circles take one answer. Squares take several.

Skin Goals

After cleansing, how does your skin usually feel?Choose one.
My Skin often shows or feels.. (appearance and texture)Choose any that apply.
Interactive rebuild of step three — its copy and both selection rules are real.

Round two · the native app

Same four tasks, eight seconds faster.

  1. 36s

    Round one — the desktop site, resized

  2. 28s

    Round two — the native app

One participant per round and averages only — a direction, not a measurement. What I trust more: asked to repurchase, they went straight to Profile.

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.

Built for the mirror, not the desk.

What I took away

  1. 1

    An information architecture is what lets you stop coordinating.

    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.

  2. 2

    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.

  3. 3

    Near-launch makes the impact real.

    Designing that close to shipping sharpened how I communicate decisions, and how fast I make them. Next: more interviews per round, and A/B tests so the numbers are measured rather than indicative.