Diagrams: Moving Quizlet beyond terms and definitions
By Christian Dorian, Product Designer, Quizlet
Every day people around the world come to Quizlet to practice and master new things. In New York City, a nursing student reviews flashcards on Quizlet for the NCLEX. In North Dakota, a tenth grader studies for an American Literature exam. These are just a few examples of the many things people study on Quizlet.
For most students, Quizlet is the obvious choice for a study app and offers a variety of study modes based on the term-definition content model. But this model has its limits — while highly generalizable across a variety of subjects, gaining a deeper understanding of many topics requires a more tailored approach. We needed to support a broader range of content.
It was time to move beyond terms and definitions.
Our starting point
We started this project by setting some high-level goals to keep us aligned. Defining these goals upfront served as a north star for us to reference as the project evolved:
- Extend beyond a memorization tool by enabling people to traverse between remembering and understanding on Bloom’s Taxonomy of Learning.
- Unlock new subjects and topics for people to study on Quizlet.
Looking for signals
Based on our knowledge of what people study and are tested on, we knew images and diagrams were a popular way to represent concepts in diverse subjects. We started by looking at top feature requests from people who use Quizlet. One of the top requests was to have images on both sides of a flashcard — the current product only allowed people to add an image to the definition of a flashcard. At first, this seemed like a straightforward request, but after looking at more study sets we saw something different. People were hacking the current product to work as a diagramming tool of sorts. They were highlighting parts of an image with an external photo manipulation tool (like Photoshop for example), then adding the image to the back side of a flashcard. They were taking large images and creating multiple cropped versions to put on each flashcard in a study set. This was a strong signal that people were looking for a way to study diagrams on Quizlet.
Our hackathon backlog
We have a hackathon at Quizlet four times a year. Like most hackathons, for three days anyone can work on whatever passion project sparks their interest. Thanks to this ritual, our team had a long list of lo-fi prototypes to work from at the beginning of this project. We went through the backlog and created a short list of top ideas — this was difficult as there were some many great ones. We eventually narrowed it down to three top ideas that aligned with our high-level project goals:
- Quizlet with friends: A multiplayer game where you could challenge friends to study and compete for top scores.
- Interactive diagrams: Creating a diagram with a base image and multiple locations linked to terms or definitions.
- Sentence writing: Improve comprehension and understanding with a sentence writing activity and challenge fellow classmates in real time.
Sprint one: validating top ideas
We had a strong signal on interactive diagrams from feature requests, but wanted to give all of our top ideas a fair shot before making a decision. To validate a winner we used a few different techniques to collect additional data:
- A Facebook ad campaign targeting four different user segments — middle school students, high school students, college students and teachers.
- A set of banner ads for people logged into the web app.
- An email campaign to a beta release group of Quizlet users.
All of these entry points led to a survey where we collected additional information about what features people felt would be the most useful and what subjects they would use them to study or teach. The survey allowed us to paint a more complete picture of people’s interests and understand more specifically how each competing idea would be beneficial.
By the time we wrapped up this research phase we had completed several rounds of user interviews, received hundreds of survey responses and had a good amount of quantitative data from the Facebook ad campaigns. We had a clear signal that interactive diagrams was the winner. This feature also had the strongest alignment with our high-level goals. We shared a gut feeling that this was the right choice and felt confident moving forward.
Sprint two: diagram creation
Our founder Andrew built a proof of concept during a prior hackathon that illustrated the core diagram creation functionality — you could upload a base image and tag locations on it. Having this at the beginning kickstarted the project by answering some foundational questions, which allowed us to focus our attention other high-level parts of the experience — thanks Andrew!
The original proof of concept needed some enhancements before it would be ready for user testing. We spent half of the sprint recreating the prototype with Sketch and InVision. We used our parts kit and added some additional screens to complete the creation flow. Working from our UI library we produced a polished diagram creation experience in a few days. The final prototype allowed you to upload a base image and link locations to terms. We spent the next few days preparing for user testing at the end of the week.
User feedback from our first testing session:
I would use this to study amino and carboxyl groups in biology.
I would definitely use this to prepare for my next biology test.
I could see myself using this in economics or finance.
It would be nice to be able to create a diagram from images in my business textbook.
This is a very useful tool.
I wouldn’t normally create a study set, but I really like this.
This would be a great tool for teaching my 7th graders music theory.
Our user testing validated there were no big pain points in the creation flow. And the sentiment for the feature was increasingly positive. But the functionality of our prototype was limiting the depth of feedback we could receive — we needed to pre-select a content type for people to create a diagram. We discussed the limitations of this approach upfront, but it was apparent that we needed a prototype with more functionality. We wanted to observe a more natural setting where people could create diagrams using their own content. At this point, the engineering lead on our team started working in parallel to build out the next version of our prototype that we would test in a future design sprint. But for the time being, it was still useful to continue using our InVision prototype to get feedback on the higher-level flow. This approach also allowed us to maintain project momentum and continue getting feedback from people.
Sprint three: diagram study
Based on the user feedback sessions the week prior, we felt confident in the creation flow and started working on the study experience. We decided to add diagram study to our existing prototype with our three most popular study modes (Match, Flashcards and Test). By the end of the week, we had an end-to-end flow where someone could create a diagram and study it. We ended the week by collecting feedback with another round of user testing on Friday.
User feedback from our second testing session:
I could see myself using this in class.
I’m excited to play with this more.
This would be most useful in biology.
This would help me learning anatomy.
I could see myself using this to teach language charts to my students.
I definitely really like it.
I could see both myself and students in my class using this on a variety of topics.
Combining diagrams with study sets
Quizlet presents some unique design challenges from other UGC apps. A thoughtful design approach needs to consider not only how content is viewed, but also how people consume it across a growing number of study modes. To ensure all of the use cases are addressed, we stress test designs on a variety of content variations — combining diagrams with the existing study set would increase the number of these variations.
At the beginning, it was tempting to justify a clean separation of these two content types — diagram study sets and non-diagram study sets. The pros of having diagram only study sets were that it reduced scope (by limiting the potential number of content variations) and allow more tailored study experiences. The main con of this separation was that it limited the depth of the learning experience. The original model was highly generalizable and allowed people to use Quizlet for a large number of subjects. We wanted to maintain the same generalizability with diagrams so people could more naturally traverse through Bloom’s Taxonomy — between remembering and understanding. After much consideration, we decided that combining these two types of study sets was the right approach. This direction had the strongest alignment with the initial project goals we established and the greatest learning benefit.
Designing across platforms
Now that we had a validated end-to-end creation and study experience, we were ready to switch gears. We shifted our format from weekly design sprints to more of a production design phase. We started working from the experience we created on the web, and adapted it to a native experience for our mobile apps.
As a part of doing a full redesign of Quizlet the prior year, we developed a comprehensive design system for each of our platforms. A shared design language is an extremely valuable resource — we use it on every design project at Quizlet. This was especially useful during this phase of the project. Working from a shared UI kit saved us lots of time so we could focus more attention on complex design problems. This also allowed us to execute with a high-level of consistency as we iterated through the project.
Adding diagrams to Quizlet required some expansion on the UI kit, but this effort was minimized thanks to having strong foundational UI elements (like typography, color, etc.) As we iterated on new UI patterns for diagram previews, points and feedback states, we closely collaborated with engineers to come up with performant and feasible solutions.
Expanding the feature set
With an initial spec almost finalized on all three platforms, we had some extra wiggle room in our timeline. We started to think about ways we could expand the feature set to support learning on more subjects.
By now we had observed a lot of people create diagrams. A common issue was that the images people picked were not ideal. Adding some basic image manipulation could go a long way. People were uploading diagram images that had text labels on them which would be an issue later in the experience when they entered a study mode. They needed a simple way to blur out text on an image. We added an edit view with some basic actions — blur, revert and delete an image.
After wrapping up designs for the edit view, we still had some room in our timeline. We decided to dedicate a full design sprint to concept ideation of additional features that could be added on top of our existing MVP. We kicked off another design sprint with three days of sketching sessions, followed by one day of prototyping, and the last day for user testing. For each sketching session, we focused on a learning activity for a specific piece of content (example: the periodic table, human anatomy and the photosynthesis process). In the sketching sessions, we used a process similar to Crazy Eights. We got contributors from across the company to get involved and put current projects on hold for a few days. For each session, we individually generated as many ideas as possible, then came together as a group to discuss concepts and vote on winners.
At the end of the third day we had a wide range of ideas and bucketed the winners into three groups:
- Categories: A way to group locations on a diagram and be quizzed with grouping study exercises.
- Connections: A way to link a unique relationship between two locations on a diagram, allowing questions to sequentially become more difficult.
- Layers: A way to add multiple variations of a diagram with different information allowing someone to study sub-systems within a larger system.
We worked quickly the next day to create prototypes for the winning ideas. With a condensed timeline, these prototypes had limited functionality but illustrated each idea enough to get meaningful feedback from people.
After a round of user testing, categories was the clear winner. We identified several subjects where adding categories to a diagram unlocked a deeper level of understanding (especially for chemistry, geography and anatomy diagrams). People also really liked how adding a category applied a different color to the location which enabled the creation of richer diagrams.
Despite the progress we made on this feature, we ended up not including it in the initial launch. Once we spec’d out adding categories we realized it would not be doable with our back to school deadline. In retrospect, trying to expand the feature set was overly optimistic, but it still lent some valuable results — the sketching sessions and prototyping were beneficial for planning the next version of diagrams. We now have a good foundation with a validated proof of concept, for when we are able to continue working on categories.
Adding delight: microinteractions and polish
Adding diagrams to study sets had some design implications to screens in the app that were already crowded. We needed an elegant way to display diagrams, study modes and content on the screen. And a way to preview locations on a diagram and see associated flashcards. Now that you could add three sides to a flashcard (term, definition and location) it was possible to create states where content was very long — which was not ideal if you needed to quickly preview a study set. We needed a new design pattern that supported both of these use cases well:
- Quickly preview study sets without excessive amounts of scrolling.
- Easily review study sets with long definitions, images and locations.
We landed on a design that created more space by consolidating the study mode buttons into a horizontal scrolling section. For the diagrams and flashcards section, we isolated these into separate views. This approach kept the high-level study set info visible, while not overwhelming people. This also created more room on the screen for the diagram and flashcard previews.
Animations were another way we wanted to increase usability and delight. We came up with subtle animations for points and shapes, as well as more complex line art animations for first-time user touchpoints. We worked with a variety of tools to create these animations (including After Effects, Framer and HTML/CSS). We also took advantage the Lottie animation framework by Airbnb — which was a game changer for shipping high-quality vector animations with relatively low effort.
Shipping diagrams: final touches
While the core diagram feature was being built out, we started working with the marketing team on a launch plan. We defined some key moments to introduce diagrams to people for the first time. A landing page was one of the first items on our list. We started with an outline that highlighted primary points about the feature and actions we wanted people to take. Based on the outline we created a wireframe and experimented with different content types. Once we decided on the final content for the page, we added final visual design and polish. The end result was a concise introduction of the feature that showed off key functionality. The page would lead people to explore a showcase of existing diagrams or to create a diagram of their own.
Next we worked on the diagram showcase page that grouped diagrams into separate horizontally scrollable sections. On iOS and Android we utilized the empty search state to display this showcase — in the future we could also use this view as a broader discovery experience. This was an important part of the flow especially for iOS and Android, as diagram creation would not initially be supported at launch.
We also wanted a way to promote diagrams in different places throughout the app and didn’t have a consistent way to do this. We decided to come up with new pattern — a banner design that could be displayed in different views to introduce new features and products. Lastly, we used a modal component from our parts kit as another way to promote the feature. With these two types of entry points finalized, we were ready to launch diagrams.
We’re just getting started
We just launched diagrams to millions of people around the world, but our work is just getting started. Want to help us design the next iteration of diagrams? Try it out and let us know what you think.
