Quizlet · Internship · 2022

Student on board ⚠️

Onboarding that shows, instead of tells.

Role: Product & Interaction Design
Timeline: 5 weeks · Summer 2022
Team: PM · EM · 2 design · 3 eng
Platform: Web
Status: Partially shipped

The Mini Flashcards onboarding prototype animating on the Set Page — The onboarding prototype — a peek, then a flip, to teach the card interaction without a word.

01 — Overview

Teaching a card to teach itself

I spent summer 2022 on Quizlet's Set Page team — the most-visited page in the product. Heading into back-to-school, we were swapping Study Preview for Mini Flashcards, and the onboarding was mine. The puzzle: get a brand-new learner to touch a flashcard they've never seen.

Study Preview compared with the new Mini Flashcards — The change: Study Preview (effective, but going away) → Mini Flashcards.

02 — The problem

A high-stakes page, a wordless ask

The Set Page is Quizlet's most-visited and most-profitable page. Every change carries weight. The question that framed the work:

How do you teach an interaction without a wall of instructions?

And if the alpha came back shaky, we needed a backup ready.

The current logged-out onboarding animation — The onboarding at the time: one flip, a small nudge, and a single line of text.

03 — The goal

Earn the first flip

The brief was simple to say and hard to do: show the interaction through motion, not copy. Hint at how cards work without forcing it. Drive activation with that first flip — then find the smallest nudge that earns a second and a third.

Show, don't tell.

04 — Process · Jam

Sketching against the constraints

I started with a jam session with my mentor, Mike Castro— sketching directions and mapping what Mini Flashcards could and couldn't do, before I committed to anything.

Early jam-session sketches and explorations — Jam-session explorations with my mentor.

05 — Process · Research

Learning from paper and pixels

I leaned on prior Study Preview research — it had lifted retention 4–9% and even helped search visibility. Then I watched people handle real flashcards. And I broke the current logged-out moment into the three small things it did: one flip, a nudge left, a single line of text.

06 — Concepts

Three ways to say “flip me”

Three interaction directions:

Shuffle concept animation — Shuffle — cards shuffle into view.

Tilt concept animation — Tilt — an interactive tilt, prototyped in code.

Flip First concept animation — Flip First — a peek, then a flip.

Critique picked Flip First. Subtle, but noticeable. Playful. The peek showed both sides of the card — and that more were waiting — which is exactly the nudge to flip.

07 — The pivot

The insight I didn't plan for

Then user interviews said something I hadn't planned for: students instinctively reach for the directional arrows to flip a card.

They reached for the arrows.

That reshaped the design. The old onboarding-text spot became the arrows themselves, and I rebuilt the white space below the cards to fit — without breaking the hierarchy.

Design iterations of the onboarding layout — Iterating on placement once the arrows became the flip affordance.

08 — The solution

A peek, a flip, and a gentle chip

It came together as a peek-and-flip with directional buttons, onboarding text that no longer fought the cards, a “Chip” to nudge the next move, and the current-terms list sitting right below.

The animated onboarding chip element — The chip — a small, dismissible nudge toward the interaction.

The final onboarding text placement — The repositioned onboarding text in context.

The current-terms list component — The current-terms list, tying the card back to the full set.

09 — Outcome

What difference did we make?

Here's the honest part. The peek-and-flip got descoped before back-to-school — the Mini Flashcards alpha came back almost perfect on its own. But the data showed flips went down, and the likely cause was the missing onboarding text. So the text went into A/B testing: median questions viewed, median flipped, total time studying.

10 — Reflection

What I took away

My flashiest idea wasn't the one that shipped. The quiet onboarding text was. On a profitable page with a hard deadline, what ships is what's de-risked and measurable. I learned to hold ideas loosely, follow the data, and trust the team on what's actually launch-ready.

← Back to all work