Though it aspired to be many things, StudyBlue was, at its core, a flashcard app. After Chegg’s acquisition of StudyBlue in 2018, we were given a year to essentially re-build the product inside the Chegg ecosystem. The result is Chegg Prep®. This was a major opportunity I never thought I’d get — the chance to take all our research findings from the past two years, all the learnings from our design dead ends, every UX wish list item that tech debt prevented us from working on — and incorporate them into a new product from the ground up. It was one of those rare projects where everyone involved got to start from the position of being a domain expert.
The core of the experience is this screen we affectionately call the “flipper,” where you can study your digital flashcards much the same way you’d study physical ones.
This project, and the related editor (the flashcard-authoring tool), have been two of my top achievements over the past two years. They involved weeks of user research and synthesis, and countless conversations/compromises between product, engineering, and design.
Really, this page should be broken into about seven different project writeups. Here’s a high-level list of the product and user concerns that shaped the end result. Check out the interactive prototypes at the bottom of the page to see how we addressed each need.
Most students know how to use physical flashcards, but digital flashcards offer some benefits not everyone knows about. How do we educate them?
(see: deck load animation, text below cards, settings menu open on pageload)
Students want a completely distraction-free study experience that will let them focus on the content alone.
(see: ad-free experience, one card at a time, fullscreen “focus” mode)
Students need to be able to drill down into just the stuff they’re having trouble with.
(see: “got it!” vs. “not quite” assessment CTAs, study session summary, subsequent sorting of cards at the end of the flow)
Flashcards are a unique tool that students are as likely to use on-the-go (on a mobile device) as on a computer. How can we design to serve both needs?
(see: responsive designs)
Accessibility is a strange beast when it comes to designing flashcards!
Not only is the app a highly interactive and customizable experience requiring more than just the standard browser keyboard shortcuts, but the very nature of flashcards as a tool for progressively revealing information makes things extra tricky. For example, the front of a flashcard contains an image of John Adams, and the back of the card is the text “John Adams.” How do you caption the image? This is an ongoing conversation that leaves the WCAG guidelines in the dust and demands its own line of inquiry.
