ZeeMee Design Exercise · v0.1
A mobile-first language for your college community.
A product design exercise for the ZeeMee student app. The UX audit names the problem; the patterns and demo show the rebuild; the design system holds the language underneath. Stack: shadcn/ui, Tailwind v4, Next.js. Every component lives at mobile width.
Presentation deck
The 18-slide walkthrough. Start here for the live presentation.
Reports
UX audit, onboarding optimization, story map.
Patterns
Three hero workflows, rebuilt.
Demos
The redesigned onboarding flow, interactive.
Design System
Foundations, components, forms. Start with Color.
Why this exists
The audit found four visual eras coexisting in one app. A 2026 gradient brand on the splash and invite modals. A 2020-era card system in friend recommendations. A 2018-era utility chrome on every form screen. A 2016-era mascot set in onboarding. This system collapses them into one.
- Single brand layer. The deep-blue
NEXTbutton, the yellow topic chip, and the orange-text-onlyTake QuizCTA all collapse to one set of tokens. - Mobile-native primitives. Components are sized for 44pt tap targets, safe-area aware, and previewed inside a 390 × 740 phone frame.
- Three hero patterns. The Admission Moment, Topics Picker, and Friends Discovery feed. The three highest-impact redesigns from the audit, built from the system as proof.
Quick start
- Read the UX audit to see the problem the exercise is solving.
- Jump to the Admission Moment for the hero redesign, then the onboarding demo to see a full flow in motion.
- Skim Foundations for the tokens that drive it.