ZeeMeeDesign Exercise

Workflow deep-dive · Onboarding

Onboarding optimization: 27 screens, four eras, no payoff

A lead-UX-designer review of the first-run flow in app v5.11.1. The flow collects the right nine dimensions of data. The field set maps cleanly to the matching engine and the commercial funnel. But the experience of giving it up is dated and anxious. It kills momentum. This is a 17–19yo audience that decides whether to keep an app inside the first 60 seconds.

Reader: PM · Eng · Design  ·  Scope: 27 screens in Screenshots/01_Onboarding-Signup/  ·  Related: Topics Picker pattern

TL;DR: three things to fix, in priority order

  1. Compress 27 → ~11 screens. Group the eight single-question form screens into four contextual cards. Add a five-stage progress indicator so the student can see the finish line.
  2. Rebuild the topics picker. Alphabetical text list → categorized, visual, chip-based selector. This is the single most under-designed surface in the app, and the entire matching engine runs on it.
  3. Replace the “You're all set!” mascot dead-end with a personalized Meet your people payoff. It uses the data the student just spent five minutes giving. Three cards from their selected schools, matched on shared topics, with a one-tap wave.

Expected impact: +25 to +40% onboarding completion. 2 to 3× richer day-1 engagement. And a foundation that makes every downstream moment (admission, first DM, profile completion) feel like the same app.

1 · Current state, screen by screen

The full first-run flow, with the business value of each data field and the issues observed. Numbers correspond to the screenshot files in Screenshots/01_Onboarding-Signup/.

Onboarding screen 01: Splash (brand)
#01 · Splash (brand)
Onboarding screen 07: Stage (radio)
#07 · Stage (radio)
Onboarding screen 17: Topics (alphabetical)
#17 · Topics (alphabetical)
Onboarding screen 27: All set (mascot)
#27 · All set (mascot)
#ScreenPurposeBusiness valueIssues
01SplashBrand intro + auth entryBrand recall, App Store trustStrong. Best brand moment in the entire flow. Only issue: SIGN UP / SIGN IN button is deep blue, breaking the gradient.
02Phone entryAuth + SMS marketing channelRe-engagement channel, account recoveryPhone-only auth excludes the meaningful share of Gen Z who default to Apple/Google. Heavy legal copy competes with the input. Blue NEXT.
03SMS autofill promptOTP entryVerified phoneAcceptable. Uses iOS autofill. Empty 6-dot UI is faint.
04SMS code enteredOTP confirmationVerified accountNo auto-advance after 6th digit. The student must tap blue NEXT. Lost micro-moment.
05–06Name (empty → filled)IdentityPersonalization across UITwo full-width fields stacked vertically use ~⅔ of screen for two short strings. Third 'Let's get started' moment of the flow.
07–08Stage (radio)Funnel segmentationHighest commercial value field. Drives branching into prospect / applicant / admit / committed funnels. Admissions partners pay for late-stage students.Visually equivalent to 'Which color do you prefer?' Selection uses iOS system blue, breaking brand. Should feel like a meaningful identity choice.
09How-we-can-help interstitialValue reassuranceTrust/retentionCUT candidate. Mascot illustration from 2016, generic copy, no personalization despite knowing the student's stage. Breaks momentum.
10School-interest promptLead-in to school searchSoft sell on school valueWastes a screen on a heading + empty search bar. Should merge with #11.
11School search empty stateSchool discoveryCollege partner matchingDead empty state. For a Class of 2030 user from Cincinnati, this is the moment to show trending / popular / near-you. None exist.
12School search resultsSchool pick–Functional. Logos help. Disambiguation between RIT Christian / Grad / Undergrad is good.
13Schools selected listConfirm selection–'Remove' link buttons are visually weighty for a destructive action. Blue NEXT becomes loudest thing on screen. No min/max guidance.
14Profile info (empty)Bundle of 3 fieldsMajor + topic + hometown signalRight pattern (3 questions in 1 card). Defeated by the next 6 screens because each subfield opens a full modal. The card is a façade.
15Majors modalMajor pickerMatch dimensionModal UX is fine. Orange checkmark is a positive brand cue. Should be used everywhere.
16Majors filledConfirm selection–Selected majors render as `Environmental Science; Forestry`. The semicolon string reads as database output. Should be chips.
17Topics selector emptyPrimary matching signalThe matching engine. Every 'topics in common' badge depends on this.WORST SCREEN IN THE APP. 100+ topics in an alphabetical text list. No categories. No visuals. No popular-first. A teenager picks the first 6 they see and abandons.
18Topics selectedConfirm selection–Selected topics render as comma-separated emoji-decorated text: 'Anime 🍙, Band 🎺, Baseball 🥎...'. Inverse of every social app of this generation. Should be filled gradient chips.
19Hometown modalGeo signalRoommate matching, 'people from your hometown'Functional. Should pre-populate based on IP geolocation.
20Profile info filledConfirm bundle–Same comma-separated text problem. No visual completion cue.
21Photo promptTrust + recognitionProfile completeness drives DM reply rate, match acceptanceBig empty avatar + small gradient pencil. Functional but joyless. No fallback option leaves photo-averse students facing a one-way prompt.
22Photo action sheetPhoto source–Native iOS sheet. Fine, but extends the visual-era pile-up.
23Photo setConfirm photo–No celebration of the choice. No filter, sticker, frame option (table stakes for the audience).
24Grad yearCohort segmentation'Class of 2030' community auto-join, classmate matchingThree native dropdowns. Reads like a financial-aid form. For an audience whose identity IS 'Class of 2030', this should be a celebration screen.
25Notifications primingPre-permission askRetention. Push enables every re-engagement loop.Gray bell. No social proof, no notification mockup, generic copy. YES, NOTIFY ME is blue again.
26iOS permissionOS-level consent–Standard. Fine.
27You're all setWelcome / handoffFirst-day retentionWORST PAYOFF IN THE APP. Generic mascot + 2014 'WELCOME' ribbon. None of the data captured appears. Dumps the student into Chat (a sidebar) rather than Make Connections (the discovery surface).

2 · What the data tells us about the business

The 27-screen flow is collecting the right nine dimensions. Understanding why each one is captured clarifies what we can compress, what we can defer, and what we can’t drop.

DimensionCaptured onCommercial purposeCompressibility
Phone number#2–4Auth + verified SMS channelCannot drop. Parallelize with Apple/Google sign-in.
Name#5–6Personalization throughout UIMerge with another card
College journey stage#7–8Highest-value field. Drives branching, partner monetization, commit funnelKeep own screen. Too commercially load-bearing to bury.
Schools of interest#10–13B2B partner matching surface. Defines community membership.Keep own screen. Multiple selections, search-driven.
Majors#14–16Filter dimension for matching + contentMerge into 1 card with topics + hometown
Topics#14, 17–18Matching-engine fuel. Every 'in common' badge depends on this.Keep prominent, but redesign the picker
Hometown#14, 19–20Roommate matching, 'people from your hometown'Infer from IP, confirm
Profile photo#21–23Trust signal. Drives DM reply rate, match acceptance.Defer (post-onboarding nudge) without breaking activation
Grad year#24Class-cohort segmentationMerge with name screen
Notification permission#25–26Retention channel. Push enables every re-engagement loop.Keep, but reposition AFTER the payoff (ask once value is felt)
The minimum viable account is just phone + stage + at least one school. Everything else can be progressively collected. Today the app gates the full product behind all nine fields.
Stage + schools + grad year together define the student's cohort and which communities they auto-join. These three should feel like the 'build your class' moment, not three disjoint form screens.

3 · Audience (17–19yo Gen Z) considerations

  • First-60-second decision

    App Store benchmarks: this cohort decides whether to keep an app inside 60s. ZeeMee onboarding takes 3–5 minutes. The math doesn't work.

  • Visual eras are legible

    A 17-year-old can't name 'this UI is from 2018' but instantly clocks it as 'this is for old people.' Four eras in one flow = 'not for me.'

  • Form anxiety

    No progress indicator means every screen could be the last or the 30th. This audience abandons rather than guesses.

  • Identity, not data

    Topics aren't form fields. They're identity statements ('I'm an Anime + Band kid going to RIT'). Treat them as such.

  • Camera-first

    They expect filters, stickers, frames on photo capture. A bare upload sheet reads as 'this app doesn't care.'

  • Social proof works harder than copy

    '2.6M students' (already on the website) does more than three bullet points of features.

  • Shareability matters

    Onboarding moments ('I made it official, Class of 2030') are screenshot-and-post moments. ZeeMee gives up free distribution by ending on a mascot card.

  • Phone auth is a friction tax

    Default to Apple/Google sign-in. Offer phone as fallback. Removes the 2-screen SMS sub-flow for the majority.

4 · Findings

  1. F01

    The flow is 2.7× longer than it needs to be

    27 screens, of which at least 8 are pure form-field-per-screen (name, stage, schools, majors, topics, hometown, photo, grad year). Combined with two interstitials whose purpose is 'keep going,' the student encounters ~10 screens that exist purely to advance state. That's the dominant friction source.

  2. F02

    There is no progress indicator

    Across 27 screens there is no 'Step 3 of 11', no progress bar, no dot row. Students have no way to estimate effort. That's a known driver of mid-funnel abandonment.

  3. F03

    The topics picker is broken

    Alphabetical scrolling text list of 100+ items, decoration emojis, no categories, no 'popular at your schools,' no visual chips. Output displays as a comma-separated string. For an app whose entire matching engine runs on this signal, this is the screen that most undersells the product.

  4. F04

    The onboarding ends on a chore, not a payoff

    After 3+ minutes of giving up rich personalization signal, the closer is a generic mascot with CHECK OUT THE CHATS. None of the data captured shows up again. The first surface after onboarding is the Chat tab (a sidebar). Not Make Connections (a discovery surface with real people).

  5. F05

    Four visual eras coexist

    2026 brand (splash, profile photo gradient pencil) sits next to 2018 utility (NEXT buttons, radio rows, list pickers, grad-year dropdowns). Next to 2016 mascot illustrations (#09, #27). Next to native iOS (action sheets, system dropdowns). The new brand already exists in zeemee-design-exercise/app/globals.css. No tokens to invent. This is an application problem, not a design problem.

  6. F06

    Phone is the only auth path

    For a Gen Z audience that defaults to Apple/Google sign-in, requiring SMS adds 2 screens of friction for ~no security benefit. The verified phone can be re-collected later as a notification channel.

  7. F07

    Empty states do no work

    The school-search empty state (#11) is a magnifying glass and a generic line. The single richest discovery moment of the entire onboarding surfaces zero suggestions. That's a student ready to pick a school, unsure which name to type. ZeeMee already has their grad year and stage.

  8. F08

    Selection state is text, not visual

    Selected majors, topics, and hometown all render as semicolon- or comma-separated strings rather than chips. Highest-impact single visual upgrade in the form section.

  9. F09

    The 'stage' question is under-designed for its commercial weight

    The 'Where are you on your college journey?' question is the most commercially valuable field in the flow. It drives partner monetization and feature gating. But it's presented as the most generic UI pattern: a flat radio list. This is the moment to feel meaningful.

  10. F10

    Notifications are asked before value is shown

    Best-practice priming asks for permission AFTER the student has felt one moment of value. ZeeMee asks before the student has seen a single community, recommendation, or person.

6 · Cross-cutting visual & interaction principles

Color & components

Primary CTA = brand gradient pill (`#ff8a3d → #f2452f → #e91e63`). Replaces every deep-blue button. Selected state = brand fill + white text (replaces iOS system blue). Card frame = polaroid token for hero cards (name card, welcome polaroid). Background = warm off-white (--surface) instead of pure white. Softens form-heavy screens.

Typography

Mirror the website's display hierarchy: large display sans for headlines (~32–36pt), friendly body weight (~17pt). Reduce per-screen copy by ~40%. Each screen has a 1-line headline and at most one supporting line.

Motion

Progress dot fills 220ms brand-eased on each Continue. Topic chip tap: 150ms scale-pop + haptic. Welcome polaroid: 800ms celebration ease (token exists). 'Wave' tap: card flips to sent-state, 400ms.

Interaction conventions

Auto-advance after the last expected character (SMS code, last name). Continue activates only when minimum fields are filled. Never let the student tap a dead button. Destructive and secondary actions move to chip-internal affordances (× on the chip itself), not right-edge links.

7 · Tradeoffs & risks

DecisionTradeoffMitigation
Cut the 'How we can help' interstitialLoses the explicit value-prop reassuranceValue prop now lives on splash (social proof) and is demonstrated on screen 09 (payoff). Show, don't tell.
Move notification priming to after the payoffSome students will close the app before reaching itThe opt-in rate at screen 10 should be HIGHER than today's #25 because the student has felt value. Worth A/B testing.
Auto-join 'Class of 2030' community on signupUsers who don't want auto-join may feel pushedMake it dismissible from the post-onboarding state with a one-tap 'Leave Class of 2030.'
Make profile photo skippableReduces photo coverage, hurts match acceptanceColor-tile fallback maintains a visual identity. Profile-completion nudge in-app retries the ask later.
Apple/Google sign-in as primaryLose direct SMS channel for those usersCollect phone post-onboarding as part of 'Get text alerts about your admissions decisions.' Same student, more compelling ask.
Single 'Vibe' card collapses 7 screens to 1Card is long. Some students may scroll past sections.Sticky Continue button stays disabled until each section has minimum input. Light scroll-hint animation on first paint.
Topics picker requires real illustration/emoji asset workEngineering + design lift before launchPhase 1 ships with category tabs + existing emoji. Phase 2 swaps in the custom illustration set.

8 · Validation plan

Pre-launch

  • Funnel analytics on current flow (baseline): per-screen drop-off, time-to-completion percentiles, % who reach screen 27.
  • 5 student interviews (mixed by stage): screen-share through current onboarding, capture confusion points + abandonment intent.
  • Card sort on topics with 8 students × 100 topics. Validates the proposed taxonomy before we lock it.
  • Competitive scan: Strava onboarding (interest selection), Hinge prompts (chip multi-select), Discord (community-first onboarding), BeReal (minimum-viable-account).

Launch

  • A/B test the new flow against current. Roll 25% → 50% → 100%.
  • Watch 30/60/90-day retention curves, not just D1.
  • Pre-register guardrail thresholds (account creation rate, SMS verify success, App Store rating).
  • Post-onboarding micro-survey on day 3: 5-pt + optional comment. Watch for 'fun' / 'fast' language as positive signal.

9 · Success metrics

Primary

  • Onboarding completion rate. Percent of students who reach the payoff screen. Target: +25 to +40% over baseline.
  • Day-1 active engagement. Percent of new students who send a message or follow a person inside 24h. Target: 2 to 3× current.

Secondary

  • Median time-to-completion (target: ≤90s Apple/Google, ≤150s phone).
  • Median topics selected per user (target: ≥10).
  • Notification opt-in rate (hypothesis: higher after value demonstration).
  • Profile photo coverage at D7 (gate the experiment if >15% drop).
  • D7 / D30 retention.

Guardrails (do-not-regress)

  • Account creation rate (auth changes risk this).
  • SMS verification success rate (for remaining phone-auth users).
  • App Store rating.

10 · What to build first

Ship in this order if we can’t land all 11 screens at once.

  1. Visual layer pass first (no IA change). Replace every blue NEXT button with the brand gradient pill, retire the two mascot illustrations (#09 + #27), kill the comma-separated text outputs in favor of chips. ~1 sprint. Largest visible-quality lift, zero flow risk.
  2. Topics picker rebuild. Standalone work scoped to the topic-selection surface. 1–2 sprints. Single most impactful screen.
  3. Welcome → “Meet your people” payoff. Screens 09 + 10. Recommendation algorithm already exists. 2 sprints.
  4. Flow compression to ~11 screens. Largest change. Ship behind a feature flag, A/B against current. 2 to 3 sprints.
  5. Auth path expansion (Apple/Google). Discrete, well-bounded. 1 sprint.

Artifacts referenced: Screenshots/01_Onboarding-Signup/ (27 source screens) · Screenshots/CATALOG.md · UX audit · zeemee-design-exercise/app/globals.css (brand tokens) · ZeeMee Product Design Exercise.pdf.

Related deliverables: Admission Moment · Topics Picker · Friends Discovery.