Designing AI-Native UX in a Consumer GenAI Product

I joined MISI in late 2023 as the product designer for the first version of what is today a broader style platform. My focus was on the AI-native UX layer: designing how users would experience AI-driven personal color analysis through their physical features — eye, hair, skin tone, undertones, contrast — and how to design for trust in a consumer GenAI product from the ground up.

I designed the foundation: the design system, the onboarding flow, the AI analysis input screens, and the user journey from sign-up to personal color palette.

MISI has since evolved into a multi-feature style companion, but the AI-native UX patterns I established remain at the core of the product experience.

Three principles shaped the design.

1. Translate expertise into self-assessment.
Personal color analysis is a professional discipline — colorists train for years to read someone's features. The product needed to compress that expertise into a flow where users could accurately self-assess without prior knowledge. That meant designing each input screen as a learnable moment, not just a question.

2. Reduce ambiguity at every step.
Color analysis lives in edge cases — "cool grey" vs "warm grey," "deep" vs "light" contrast, undertones that aren't obvious to the user. Each screen had to make these distinctions visible through visual comparison, not text instruction. The user shouldn't need to know the methodology to give the right answer.

3. Build trust before the AI output.
Users won't trust an AI result if the inputs feel arbitrary. The onboarding flow had to make each input feel meaningful — connected to a real outcome — so that by the time users reached their personal color palette, they understood why it was their palette, not a generic one.

Three principles, applied across eight self-assessment screens.

Visual comparison over text instruction.
For Eye Colour, I designed a four-quadrant photo grid showing real eyes in different categories — users recognized themselves visually without needing to know color theory. The same logic shaped Hair Colour, where each option paired a texture image with the underlying methodology ("Pale Blonde, Ash Brown — Cool Grey").

Edge cases as primary cases.
The Contrast screen was the hardest to design — users had to evaluate the relationship between their hair, eyes, and skin. I built it as three visual reference cards (High / Medium / Low) with sample faces, so users could see the pattern instead of describing themselves in the abstract. For Veins — the wrist color test — I kept it radically simple: two checkboxes, blue or green.

A design system built to scale.
The component library supported all eight input types: segmented controls, radio groups with photos, photo-grid selectors, checkbox lists, progress flows. Typography hierarchy (DM Serif Display for meaning, DM Sans for instruction) gave the experience an expert feel without being intimidating.

The system wasn't about elegance. It was about consistency — so users moved through eight steps without feeling like they were taking a test.