✦ Case study · 03 Mobile · iOS AI · Face recognition

Rediscovering
moments
through AI.

PixMatch lets you snap a selfie and instantly find every photo of yourself across thousands of event galleries.

PixMatch home screen — Hi Angela
Role
UI / UX Designer
Platform
iOS Mobile App
Tools
Figma · FigJam
Scope
End-to-end product
Focus
AI · Onboarding · Discovery
Chapter 01 · The premise

Thousands of photos.
Almost none of them reach you.

Concerts, weddings, sports events, conferences — photographers shoot you, then you wait days for a download link that often never arrives. Or you scroll through 2,000 frames trying to find the four where you're not blinking. PixMatch fixes that loop with one selfie.

01 · The friction

Manual searching

Endless thumbnail-scrolling through unfamiliar event galleries to find a few photos of yourself.

02 · The delay

Days of waiting

Photographers deliver in batches — sometimes weeks later, sometimes not at all.

03 · The loss

Memories that disappear

The frames that captured the night are stuck on someone else's hard drive, forever inaccessible.

Chapter 02 · Design approach

The principles that shaped every screen.

Reducing cognitive load Progressive onboarding One task per screen Humanizing AI Emotional engagement
Chapter 03 · Who it's for

Meet Angela — the everyday event-goer.

Angela, 26
Social-media active · attends concerts, weddings & sports events

Wants

Quick access to her photos from events without scrolling through thousands of frames.

Frustrations

Photographers take days to deliver. Most of her event memories are stuck on someone else's hard drive.

Behaviors

Posts immediately after an event. Prefers tapping over typing. Values trust signals before paying.

Chapter 04 · Visual system

The color & type behind every screen.

A tight palette and a single typeface family — Montserrat in five weights — kept the visual system disciplined enough to scale across 38 screens without breaking rhythm.

Color palette
Deep Navy #051D4A Primary · Headers, CTA backgrounds
Action Teal #1AC1B6 Accent · Primary buttons, focus states
Cloud #F4F4F4 Surface · Cards, dividers, empty states
Paper #FFFFFF Base · App background, content surfaces
Typography · Montserrat
Hi Angela 👋
Heading Montserrat · Bold · 40 / 44
Find Myself
Subhead Montserrat · SemiBold · 22 / 26
Upload one selfie to begin
Body Montserrat · Medium · 16 / 22
Only you in this photo, please.
Caption Montserrat · Regular · 13 / 19
Step 01 · Upload
Overline Montserrat · Bold · 11 / 14 · 0.14 tracking
Chapter 05 · Onboarding

Three screens. One promise.

Onboarding sets expectations before the camera ever opens. Each screen does one job — explain face recognition, show the categories, preview the result — with friendly microcopy and a single Next button.

The result is a 3-tap journey that lands users at the home feed already knowing why they're there.

Onboarding 1 — AI Face Recognition
Onboarding 2 — Customizable Photo Categories
Onboarding 3 — Easy Download and Sharing
Chapter 06 · The find-myself flow

From a single selfie to your photos — in three taps.

Step 01
Upload or confirm photo

AI face recognition

Upload one selfie. Microcopy makes it explicit — "only you in this photo" — so users never wonder what to submit.

Step 02
You were found in 4 albums

You were found in 4 albums

Matches are grouped by event with clear pricing. Free photos are tagged, paid ones priced. Selection updates the sticky cart in real time.

Step 03
Order successful — download photos

Place order & download

One sticky checkout bar, one confirmation screen, one tap to download all. The whole flow can finish before the event's even over.

One selfie. One scan.
Every memory, returned.
Chapter 07 · Inside the build

Designed first,
assembled later.

Before any screen was finalized, I built the component library. Every tile, badge, bottom-nav state, plan card, dropdown, and progress indicator lived in a single canvas — so swapping a button radius later took one variable change instead of forty hunt-and-replaces.

This is the part of the work nobody sees, and the reason every screen feels like the same app.

PixMatch · components.fig
Design system
PixMatch component library — buttons, cards, navigation, plan tiers, photo tiles
Chapter 08 · Prototyping

Every dead end
mapped.

The clickable prototype isn't an afterthought — it's the only way to feel whether a flow works. So before handoff, every back button, modal escape, and edge state was wired up. The result is a Figma canvas that looks like spaghetti but plays like a real app.

Every blue line is a user decision I made before a developer had to ask about it.

PixMatch · prototype-flow.fig
Connected flow
PixMatch Figma prototype canvas — full app flow with every connection wired
Chapter 09 · Selected screens

A few moments of the final UI.

Hand-picked from the full flow. Each one anchors a specific decision — empty states, sticky bars, category management, trust micro-copy.

Next

Have a product that
needs the same care?