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.
Company
Quizlet
Platforms
Web, iOS, Android
Lead Designer
Role
~20 cross-functional
Team size (peak)
Overview
Turning five products into one mental model
Quizlet had flashcard creation, study modes, 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.
5
Content types unified in one system
1,200+
Colleges with full explicit course coverage
+243%
Lift in explicit course adds
4
Major surfaces redesigned
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
Approach
A year of parallel workstreams
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 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 and folder recommendations, parallel workstreams
Design Work ∙ Global Navigation
Making the whole product visible from anywhere
The global nav had to work well across a range of screens and user states: light and dark mode, free and Plus-upgrade variants, collapsed and expanded side nav, and mobile equivalents for iOS and Android. Every state needed to hold up whether a student was signed in or logged out, on a free account or Plus, on a laptop or switching between apps on their phone. iOS, Android, and Web each needed their own solution that felt native to its platform, 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
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.
Getting every student into the right course, fast
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
Home tab: Top bar with search and user profile entry
Explicit: Course code and title matched to your school
Home tab: Top bar with search and user profile entry
Implicit: Custom course name added when no match exists
Home tab: Top bar with search and user profile entry
Course search: Added courses shown as chips up top
Home tab: Top bar with search and user profile entry
Step 2: Confirm your courses, then finish setup
Design Work ∙ Course Folders & Tagging
A folder for every course, flexible enough for any goal
New students automatically get a course folder for every class 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: flashcard sets, Magic Notes, 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, and a syllabus upload that would auto-generate those tags from a course's real assignments, though neither shipped. Eventually, that structure could have powered a study plan view inside the folder. We didn't get that far.
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 Flow
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 Magic Note, a set, 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.
Design Work ∙ Your Library
Modernizing how students browse everything they've saved or created.
Your Library already supported every content type: flashcard sets, study guides, practice tests, and 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.
Design Work ∙ Folder Study Experience
Folders shouldn't be a dead end. They should be a way in
We optimized the flow into studying from a folder, 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.
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
Nav, folder creation, tagging, and saving flows all shipped across all three platforms
Course data quality improved from partial coverage of 2,500 colleges to full explicit coverage at 1,200+
Shared component patterns reduced rework across parallel workstreams
Design led sequencing decisions in partnership with PM, balancing large sequential bets against smaller parallel chunks
Impact
What moved, and the tradeoffs we made
+243%
Explicit course adds
Web home onboarding test
+77%
Folder creation
Web home onboarding test
Profile completion
A post-onboarding nudge to finish school and course setup drove a 10x increase in school adds and a 4x increase in course adds within 7 days, with folder creation up 230%. Time spent and retention stayed neutral, engaged-learner conversion dipped 2%, and ad revenue on the set page dropped 3.3%.
The iOS saving flow
This initially lifted course-folder adds 43%, but overall folder creation on iOS dropped 12%, mostly from drop-off between reaching the create-folder screen and finishing it. The effect was worse outside the 18-24 age range and didn't show up on web, so we iterated and retested rather than shipping as-is.
10x
School adds
Web profile completion test
-12%
Folder creation
iOS saving test
Home onboarding test
Grouped with updates to recents and side nav folder shortcuts, this test lifted canonical school adds 66%, explicit course adds 243%, and folder creation 77%. Recommendation engagement on Home dropped 29.5%, a tradeoff worth naming: students relied less on that surface once they had better organizing tools.
Folder study redesign
This moved engaged learner, active learner, and studied rates modestly positive across the board, while core retention and revenue stayed flat, a healthy result for a feature meant to deepen usage without hurting the business.
Key outcomes
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
Course data quality improved from partial coverage of 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 shipped on Android; web and iOS 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 web and iOS 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 measurement, not design. We set one ambitious top-line metric, a 10% lift in students with 2+ sessions a month, to represent a dozen projects at once. It made a good north star, but was too broad to attribute to any single piece of work. Individual tests, like profile completion or the iOS saving flow, gave us real signal instead. Next time, I'd push earlier for project-level metrics, and treat the top-line number as a quarterly check rather than the thing driving decisions.