ZeeMeeDesign Exercise

Hero pattern · #2 priority

Topics Picker

The audit calls the legacy Topics screen “the single most under-designed screen in the app.” It's an alphabetical list of 100+ items, no categories, no visuals. This pattern rebuilds it as a categorized emoji-chip grid students actually want to tap.

Before

9:41

Add up to 20 topics

0 of 20 selected

Alphabetical list · 17_topics-selector-empty.png

After

9:41

Topics

Step 6 of 74 picked

What are you into?

We use these to match you with people you'll click with.

Popular at your schools

Music

Sports

Academics

Hobbies

Identity & values

Pick at least 3 to continue

Categorized, emoji-prefixed chips

Design decisions

  1. Categories, not the alphabet.Music · Sports · Academics · Hobbies · Identity. Each one is a moment of self-recognition. “Yes, that's me.”
  2. Emoji as visual shorthand. Reads in 200ms instead of 2 seconds of text scanning. Doubles as personality.
  3. Selection feedback is gradient + scale. Selected chips fill with the brand gradient, the same celebratory cue from the Admission Moment, applied to the everyday flow.
  4. Progress is visible at all times. Step counter and selection count update live. The audit wants the 27-screen onboarding compressed. This screen earns its slot.
  5. Disabled state is honest. Continue stays disabled until 3 are picked, with the reason stated underneath. No hidden error.

What it's built from

PhoneFrameMobileTopBarProgressChipPickerChip (selected variant)Button (gradient + disabled)