Improving pathing + navigation
Cleaning our junk drawers and increasing studying while we're at it
Role
Lead product designer
Platforms
iOS, Android
Timeline
April to June 2022
For the user
For the biz
At the time, we just launched a new premium product — homework solutions — that we aimed to promote to drive revenue. Additionally, the app's dated design and information architecture were limiting our ability to innovate and scale.
And so what?
The new mobile information architecture increased deep studying on the apps by +9.7% and set up a foundation for future product development aligned with company priorities.
Defining the problem
The app at the time did not reflect our product ambition, the navigation was limiting, and the ways we organized content were not clear.
Our focus
Pathing on the app fails to guide users to actual “studiable content” (flashcards, solution pages), which is where students get the most value from Quizlet, and how we make money.
We’ll know we’re successful if we see that more students are studying, and for longer. There was no OKR or product team driving this work, so we had to be scrappy. It started with a few designers ideating during a hack week, and ultimately I drove the project forward and got it funded.
Design explorations
I started with two different directions. The first has Home / Search / Library as the bottom navigation items. It's fairly generic, but easily understandable and simple. The second has Home / Study Sets / Solutions / Search. This one is more unique to Quizlet as it puts our product verticals directly in the navigation. Both directions clean up the redundant pathing and have easy paths into studiable content.
I tested both directions with users, where they were asked to complete certain tasks. While both generally performed well, it was interesting that in Direction B, even though we put "Study sets" in the navigation, students didn't have as much ease finding a previously studied sets as we hoped.
Listing out the pros and cons helps me (and stakeholders) evaluate the directions.
A
Home/Search/Library
(➕) It’s more scalable to new content types (i.e study guides, practice tests)
(➕) Aligns with how users are currently using the app.
(➖) It’s a generic navigation, it doesn’t feel “own-able” or unique to our product offering.
B
Home, Sets, Solutions, Search
(➕) More emphasis on premium product area
(➕) Aligns with the two biggest jobs we hear from students: sets & solutions
(➕) Very “own-able” by Quizlet
(➖) Not scalable: we will need to have conversations about where to put new product areas.
Finalizing the solution
After a short break, I came back to it with fresh eyes and worked on a third direction.
The biggest change is a different take on Home, rebranding it to Explore. The entry point to search is now on the home screen. We had some initial reservations that removing search from the bottom bar would reduce its prominence, but this framing actually makes Search more prominent while giving the Home screen more purpose.
Keeps Library as the place for your content. This is a very recognizable name and mental model.
Keeps Solutions as a navigation item to give the premium product area more exposure.
Adds Profile, where the user's streaks and achievements will be stored along with settings.
Adds Create button because that drives the content flywheel
Visual design of Home screen header
The search field is front and center on the screen, wrapped in our brand color and a shape inspired by the Q in our wordmark. I also rounded the corners of the input field and Upgrade button to give the header overall a more friendlier look. The swoop motif has potential to flex to premium users, seasonal moments, or other page headers.
Visual design of iconography
We also explored options for iconography for the bottom bar, ultimately deciding on the more visually simple and utilitarian options. I created a subtle bounce-back animation as you tap on each icon.
Impact
+9.7%
in number of questions answered per user — our proxy for “deep studying”
This means that more students were finding the right “studiable content,” which was our main goal.
An non-measureable aspect of this work was that our drawers are now organized. Everything has a place where users expect to find them. It sets up foundations for future iterations aligned with the company’s priorities. It sets up:
Home with a purpose to keep iterating on and brings Search front and center
Solutions, our premium product, with high prominence
Profile to be the hub for badges and streaks, an area the company was investing in
