** Click on the images to make them larger **
The big picture
The quiz experience has mainly been student-paced at Quizizz. One of its key value propositions is that students are never pressured to finish quizzes fast. They take their own time and focus on accuracy, retention, and comprehension, over speed, competition, and rote-learning.
Even though some teachers would LOVE to have a teacher-paced delivery mode, this fundamental tenet of being student-paced drove the design and business decisions. However, two events, one slow, and one sudden urged us to revisit our assumptions to keep up with changing times.
A slowly changing user base
Before 2020, corporate users would fly under the radar with the incorrect user type 'teachers' in very small numbers, <0.5%. At the time of writing this case study, December 2020, corporate teachers made up 15% of the non-student user base.
Corporate users frequently asked for instructor-paced content delivery. While the product added enough value for all customers, it did not solve the needs that Mentimeter, Kahoot!, Nearpod, or other instructor-paced learning tools solved. This missing feature stuck out like a sore thumb for users whose primary use-case was engaging distracted employees in a live setting.
COVID-19 lockdowns and stay-at-home orders
By April 2020, the coronavirus pandemic halted our regular lives which in turn halted in-person classes in most parts of the world. Teachers found themselves scrambling to set up online lectures for the remainder of the academic year. As a result, teachers turned to Quizizz to conduct their classes and keep distracted students engaged in an online setting.
A case for Lessons
The stage was set for teacher-paced content. At the end of April, the Quizizz team was used to working from home. As a result, we recognized the value that an engaging instructor paced mode would add to the product.
At this time, there were two ways of going about it—a teacher-paced mode for quizzes or a new content type altogether. We could add a teacher-paced mode to let teachers conduct quizzes. This was simple and would have a faster time-to-market. The other would involve creating a new game type. This would inevitably be a much longer project of epic proportions, unlike ones Quizizz had seen recently.
After a couple of hour-long all-hands-on-deck meetings, we tested various remote engagement tools and decided that the MVP would be a slides tool combined with the interactive power of Quizizz. At the end of it, the team had one high-level goal.
What happens when you take informational slides and marry them with the interactivity of a quiz game?
You kill ‘death by slides’.
We did just that. The end product was marketed to corporate instructors as 'Presentations' and teachers as 'Lessons'.
Overview
Product
Instructors create presentations to conduct them in-person or remotely to engage distracted participants.
Team
Two Designers. One engineer for the instructor experience, and one engineer each for the student experience on mobile, web, and app. One product manager.
Launch
July 2020
Slides. The smallest atoms of this project.
A slide is immutable. It will render the same way across different screens.
The slides we wanted to support were a combination of text and media. The most common mental model to follow would have been that of MS PowerPoint, Google Slides, and other similar presentation software.
Time constraints, however, created significant hurdles for a faithful WYSIWYG. The MVP would have a pseudo-WYSIWYG editor like the one in the quiz editor. This meant that we would need to pre-define a few slide layouts as pictured.
The lessons editor
Early explorations
These are some of the earliest explorations for what we wanted from the editor. I led the initial brainstorming for the presentation editor. When nothing is defined in the early stages of a project, I love to create wireframes using just a grey hue, a monospace font, and very little attention to detail.
This helps me explore different designs and features that would be good to include or exclude from the MVP to balance value and cost.
Final design
To date, the editor is being changed to improve code reusability, add features that improve the experience and drive revenue, and general cleanup. The modular, almost future-proof design has lasted the test of these changes to a great extent.
Some of my contributions to this project are noted below
Components
I like making components early on in the process. Earlier I would find myself in agony when one change down the road needed to be replicated in a dozen different screens on a dozen pages each.
Preview sidebar interactions
Making prototypes with a list of small tasks for the engineer to test out helps them understand the design better and helps me design better as I do a pilot run of the task before sending it out.
Video editor
This small feature was so well received, it kicked off yet another feature (interactive videos) which is in a very nascent stage.
Image constraints
I am proud of this small but impactful design. Lately, I have begun to realize how to effectively use visuals over words.
Import slides interaction design
Educating creators on how they should import Google Slides and Powerpoint Presentations was necessary as we only supported importing 'slides' from a PDF. Instead of relying on text, I simply recorded myself doing what they would need to and put that in a modal.
The presenter experience
While this product is inherently teacher-paced, it stays true to the key value proposition by making student participation and feedback a core part of the happy flow. A crucial concept in this product that sets it apart from other presentation tools is the two-way street.
Most presentations are boring because they are a one-way street.
The presenter → The audience.
Using the tools that Quizizz has near-perfected—multiple-choice questions, checkbox questions, fill-in-the-blanks, poll type questions, and open-ended questions—the presenter can know how their presentation is doing.
The reason this works better in the product than in real life is that the crowd does not answer in chorus. The product ensures that every voice is being heard. Not only that, but the nickname generator also makes anonymous responses possible.
The presenter <-> The audience.
Early explorations
All early-stage explorations were done in parallel despite this page's structure suggesting otherwise. These explorations have more colors in them but only in places that needed to be distinguished. A 'bland' approach to brainstorming is always preferred.
Challenges
The context in which the product is used.
The context in which a Lesson would be used is not the screen alone. It could be a classroom, theater, conference room, and more increasingly, video calls such as Zoom, Google Meet, or Webex. This experience was uniquely challenging as not only did we have to design for our regular use-cases of desktop, Chromebook, tablet, and mobile, but also TVs, conference room projectors, etc.
The spotlight is on the presentation, not Quizizz
Quizizz needs to be invisible when someone is using it to present their Lesson. The more time they spent interacting with the tool, the less time they would have to do what they should be doing. The control center fades away when the teacher is not interacting with the screen.
It also supports the most common keyboard shortcuts, back, forward, fullscreen, and mute. The only time a presenter would need to interact with the control center would be to proceed, go back if needed, or end the Lesson.
The learner experience
Slide mirroring
As mentioned earlier, we were designing this feature for a lot of devices and a lot of contexts. Before the pandemic this would have been a good-to-have feature, however, remote learning was on the rise. Mirroring a slide on the participant's device was a feature that we put down as a must-have as participants and presenters may not be in the same room any more.
A new answer feedback system
Student-paced quizzes meant that answer feedback was instantaneous. With an instructor-paced delivery method, we needed to ask participants to hold on if they've finished answering, and let them know that they can't answer any more if the time is up.
Landscape mode
Because slides needed to be immutable, in December 2020, I worked on the landscape mode project which added landscape support on mobile web and app. The grid in this picture is the view with and without a browser bar and a HUD that can be toggled.
Product Video 🔊
As we prepared to launch the product to 100% of our users, we decided to make a video that highlighted the key features. I took the opportunity to sharpen my motion skills. I worked with the marketing team and our in-house illustrator to create the screens in Figma, animate them in Principle, and used iMovie to stitch it all together.
Reception
