The Study Hub
Redesigning Quizlet's navigation, onboarding, and organization system to turn a bundle of standalone study tools into one course-centered place students go to study, across iOS, Android, and web.
Quizlet
Company
Lead Designer
Role
Web, iOS, Android
Platforms
~20 cross-functional
Team size (peak)
Turning many products into one mental model
Overview
Quizlet had Flashcards, Study Guides, Expert Solutions, and Practice Tests. Each was strong on its own. None of it felt like one product. Students didn't think of Quizlet as a place to study. They thought of it as a place to make flashcards, or a place to find answers, depending on which door they walked in through.
The Study Hub team set out to change that. The goal wasn't another cross-promotion banner. It was to redesign the product so that every entry point made the full suite obvious, every piece of content lived somewhere organized by course, and the system got smarter about what a student needed next.
10x
School adds on profile completion flow
1,200+
Colleges with full explicit course coverage
+243%
Lift in explicit course adds
4
Content types unified in one system
Context & Problem
Quizlet was shipping the org chart, not a product
Before Study Hub, Quizlet's bridging tactics were mostly marketing placements: banners, "try this" cards, upsell modals. Product teams built one-off bridges between features, but nobody was incentivized to build a cohesive hub. The org chart shipped before the experience did.
The mental model we were trying to move students away from: Quizlet is Flashcards. Quizlet is study modes. Quizlet is Expert Solutions. Quizlet is Practice Tests. The mental model we wanted instead: Quizlet is where I go to study.
Key Pain Points
Focused and parallel workstreams
Approach
Leadership set the high-level strategy: make Quizlet a cohesive study hub, not a bundle of siloed tools. I gave feedback as that direction took shape, but the strategy came from leadership. Once it was set, I used frameworks like Jobs to Be Done to define the problems we were solving, then diverged on a wide range of solutions before converging on the ones we'd build. Some projects were assumed from the outset, like global navigation; others, like the saving flow and Your Library redesign, I identified and scoped myself.
From there, I partnered with a PM to build an execution roadmap and led design across every project, working with engineering on scope. We shipped in phases rather than all at once: navigation came first to give the rest of the experience a consistent frame, then later work ran in parallel as capacity allowed. We also fixed the data underneath it: course data went from partial coverage of 2,500 colleges with heavy implicit-match fallback to full explicit coverage at 1,200+ colleges.
Rollout Sequencing
p1
Global navigation redesign
p2
Course folders and Home redesign, parallel workstreams
p3
Your Library redesign, folder recommendations, across all three platforms
Design Work ∙ Global Navigation
Making the whole product visible from anywhere
The global nav had to work across a range of states, including light and dark mode, free and Plus, and collapsed and expanded side nav. It also had to work across all three platforms, iOS, Android, and web, each needing its own solution that felt native while still feeling harmonious for students moving between them.
iOS Navigation
Home tab: Top bar with search and user profile entry
Create bottom sheet: Entry for creation (sets, folders, etc.)
Your Library tab: Content you’ve studied and created
Upgrade tab: Q+ free trial upsell screen
Web Navigation
Web nav: Top and side nav scale from desktop to mobile web
Web Components
Top nav: Free user variants, light and dark mode
Top nav: Paid user variants, light and dark mode
Side nav: With and without folders, light and dark mode
Redesigning navigation isn't about a new menu. It's about letting students move seamlessly across a whole suite of tools, no matter which screen they start from.
Design Work ∙ Course Confirmation & Onboarding
Getting every student into the right course, fast
Before this work, course matching leaned heavily on implicit, auto-suggested courses. Many were stale, duplicated, or simply wrong. We redesigned onboarding to prioritize explicit course selection. When we didn't have coverage for a student's school or course, we let them add a custom name instead, giving them a fallback path in the moment.
That custom entry never became canonical data in our system, but it gave us a real signal for exactly where our school and course coverage had gaps. The flow confirms school first, then course. We used location to power recommendations, prioritizing nearby colleges and universities, alongside clear handling for edge cases: no match found, adding a new school, or correcting a mismatched suggestion.
New Student Onboarding Flow
Step 1: Add your school to find course content
Explicit: Course code and title matched to your school
School search: Results shown by proximity
Implicit: Custom course name added when no match exists
Step 2: Add the courses you're taking at your school
Course search: Added courses shown as chips
Course search: Popular courses shown by default
Confirmation: Courses added, ready to finish setup
Design Work ∙ Course Folders & Tagging
A folder for every course, flexible enough for any goal
New students automatically get a folder for every course they add during onboarding, and we reuse that same flow each semester to add new courses. It's a deliberate default: most students won't organize on their own, so we build the folders for them and point them to the side nav. Folders hold every content type: Flashcards, Study Guides, Practice Tests, and Expert Solutions, not just flashcards like before.
Inside a folder, students add tags for sub-organization tied to specific goals, like Exam 1, Midterm, and Final Exam for a BIO 110 folder. We also designed due dates for tags, so a tag could double as a deadline. In an ideal future flow, a student could upload their syllabus to auto-generate a course folder organized by tags and due dates, potentially powering a full study plan view inside the folder — but none of that shipped.
Folder Creation Flow
New folder: Toggle on to link it to a course
Reused onboarding school search pattern
Reused onboarding course search pattern
New folder: Title and course added
Add Tags Flow
Add tags: Select from suggested or add your own
Add tags: Confirm selections before adding
Add due dates: Optional deadline for each tag
Add due dates: Calendar picker for date selection
Primary Folder States
Empty folder: Prompt to add study materials
Add materials: Created or studied by others in the course
Folder populated: Filter with tags to view and study material
Folder menu: Place for any tertiary actions (e.g. edit, share, delete)
A folder wasn't just a container anymore. It was a space on Quizlet you'd go to that had full context on your course and your study goals.
Design Work ∙ Saving Material
Saving helps keep students organized, while training the system
We redesigned the save flow across every content type so saving to a course folder became the default, not an afterthought. Saving a Study Guide, Flashcards, or a Practice Test now prompts the student to confirm the right folder, widening the entry points into that organized space, and students can progressively tag material to their own goals rather than organizing everything upfront. Each save is also a signal: the more students save into a folder, the better we can surface what's worth studying to the next student who lands there.
Saving Flow
Flashcard set: Entry point before saving to a folder
Save sheet: Choose an existing folder or create new
Save sheet: Select tags within the chosen folder
Confirmation: Saved to folder, with option to undo
Design Work ∙ Your Library
Modernizing how students browse everything they've saved or created
Your Library already supported every content type: Flashcards, Study Guides, Practice Tests, and Expert Solutions. The problem was discoverability: content was buried across separate tabs, making it cumbersome to find what you'd already saved. We replaced that tabbed structure with a single filterable feed, upgraded sort and search, and simplified list and empty states for both light and dark mode.
Your Library Feed
Web nav: Top and side nav scale from desktop to mobile web
Design Work ∙ Folder Study Experience
Folders shouldn't be a dead end. They should be a way in
We optimized the folder study flow, and let students study not just at the folder level but at the tag level, so they could prepare for a specific goal, like material saved to “Exam 1.” Studying also became the natural next step after adding content to a folder, not just one of several options you'd see there.
Folder Study Flow
Folder view: All materials, study all button
Folder view: Exam 1 tag filtered, study by goal
Choose an activity: Flashcards, Learn, Test, or Match
Learn mode: Active studying with progress tracked
Tooling & Enablement
Reusable components across three platforms
Because so much of this work ran in parallel, we built shared components early: the folder creation modal, the tag editing sheet, and the save flow were each designed once and reused across web, iOS, and Android with platform-appropriate interaction patterns (bottom sheets on mobile, modals on web).
Execution Highlights
Shared component patterns reduced rework across parallel workstreams
Design led sequencing decisions with a PM, balancing large bets against smaller parallel chunks
Global navigation shipped across web, iOS, and Android with full light/dark and subscription-tier support
Folder creation, tagging, and saving flows shipped across all three platforms, reusing shared components
What moved, and the tradeoffs we made
Impact
We ran individual A/B tests on major pieces of this work rather than waiting for one big-bang launch. Profile completion drove a 10x lift in school adds, and a grouped Home onboarding test pushed explicit course adds up 243% and folder creation up 77%.
Not every result was positive. The iOS saving flow lifted course-folder adds but dropped overall folder creation 12%, a tradeoff we caught early by testing individually rather than relying on one broad launch metric. Details for each test are below.
Profile completion test, web
Post-onboarding nudge to finish school and course setup
Positive impact: 10x school adds and 4x course adds within 7 days, course folder creation up 230%
Negative impact: Engaged-learner conversion down 2%, set page ad revenue dropped 3.3%
Home onboarding test, web
Grouped with other home UI updates and global side nav folder shortcuts
Positive impact: School adds up 66%, explicit course adds up 243%, folder creation up 77%
Negative impact: Recommendation engagement on Home dropped 29.5%
Saving flow test, iOS
New save-to-folder flow prompting a course match on save
Positive impact: Course-folder adds up 43% initially
Negative impact: Overall folder creation down 12%, worse outside the 18–24 age range. We iterated and retested rather than shipping
Folder study redesign test, web
Study entry, mode selection, and tag-level studying redesigned
Positive impact: Users studied up 0.51%, the one statistically significant lift; engaged and active learner rates trended slightly positive but weren't significant
Neutral impact: Core retention and revenue metrics stayed flat, a healthy result for a feature meant to deepen usage without hurting the business
Key Outcomes
Course data expanded from partial coverage at 2,500 colleges to full explicit coverage at 1,200+
Course confirmation onboarding shipped across all three platforms, improving explicit course match rates
Your Library redesign partially shipped on Android; iOS and web didn't ship due to engineering capacity
Reflection
What I'd do differently
Not everything in this work shipped. Syllabus upload, study coaching, and Your Library on iOS and web were fully designed but never launched, first from engineering capacity, later from a company-wide shift away from Study Hub. Some of that was disappointing, but the foundation didn't disappear: course-centered organization and personalized coaching went on to inform Quizlet's later strategy, including Study Paths and, more recently, Workspaces.
The bigger lesson was about definitions: of success, and of who we were designing for. One ambitious top-line metric, a 10% lift in 2+ session studiers, tried to represent a dozen projects at once and was too broad to attribute to any single piece of work. We also didn't explain early enough why a small share of power users, the students creating and organizing folders, mattered as much as the larger group of casual studiers who'd benefit from that work later. Both gaps caused friction we could have avoided with project-level metrics and a clearer user story from the start.