A high fidelity image of the final lessons editor interface.
Slide Editor Overhaul
After becoming one of the largest classroom assessment platforms in the world, Quizizz needed a strong slide editor tool to capture the instruction side of education.


Strategy, Research, Design


July 2021 - Dec 2021

Cross-functional team

4 Engineers | 2 Designers | 1 PM
Want to skim through this case study? I got you covered.
Here's a 1 min TL;DR version.

What did I do?

I led the design overhaul of the entire lesson editor experience, taking it from an in-place slide editor to a fully customizable WYSIWYG editor.

Why was it done?

To help transition Quizizz from a primary assessment tool to a complete education platform. 70% of classroom time is spent on instruction and we needed Lessons to fill that void.

What impact did it have?

Post the update, lessons saw a 77% increase in adoption and a 58% increase in the publish rate.

What did I learn?

The nuances of leading a design project and to empathise with my less technical users.
A gif of a child celebrating in class.

Wait, classes can be this fun?

1. Problem and Context

Product goal:
A product that offers immersive and engaging tools to fulfil every need of the classroom experience.
The existing instruction tool was lacking.
For Quizizz, being able to offer an all-in-one world-class product that satisfied the complete requirements in the classroom from instruction to assessment to reports was seen as a great way to influence purchase decisions in a school or a district.
An illustration to demonstrate the needs of the company.
User behavior suggested a demand for a slide editor
78% of all webpage embeds in Lessons were Google Slide links. This suggested that users wanted the functionality of interactive questions in their lectures but they were having to import slides from external sources because the slide editor was not sufficing their needs.
Quiz screen where you select power-up and click it.

2. Starting point

Two images of school children at the Quizizz Bengaluru office trying out the new gamification features on the platform.

Existing editor interface

Key issues we were trying to address:
Lack of flexibility in designing slides
No flexibility to change layouts or styles and limitations on the amount of content.
The actual preview area was less than half the available viewport
The actual preview area took up less than half of the available viewport.
Editing content from a sidebar was not what our users expected
Allow users to edit content in the slide itself and not via a sidebar.

3. Competitive analysis

What features were we missing?
Unsplash integration
Collection of competing products
Video support
Collection of competing products
Participants can draw
Collection of competing products
Custom re-usable themes
Collection of competing products
Math integration
Collection of competing products
Free features, usage paywall
Collection of competing products
‘Preview’ or ‘student’ mode
Collection of competing products
Live edits
Collection of competing products

4. The test version (1% launch)

Two images of school children at the Quizizz Bengaluru office trying out the new gamification features on the platform.

Test lessons editor interface

So what was new?
Fully customizable editor
Fully flexible what-you-see-is-what-you-get (WYSIWYG) editor with support for dragging, resizing, and layering elements on the editor. This was something users expected when working on a slide editor and offered them the freedom to create whatever slide they wanted.
Pre-game lobby
Search the web from within the product
We added direct media importing via Google image search and Youtube video search while in the editor. This was done to save users time and effort of searching for content online downloading them on their machine and then uploading them on the slide.
Pre-game lobby
Dock for accessing all content types.
All supported content types were brought to the front via a bottom dock. This was done to give greater visibility to the product offerings.
Pre-game lobby
2x larger editing area
Our data showed that 720p most commonly used resolution by our users (~74%) and we optimised the interface to offer a 88% larger editing area for that resolution.
Pre-game lobby
We then got a lot of great feedback
✅ What worked
  • The interface and interactions felt familiar and easy to learn.
  • In-product Google image search was a game-changer.
  • Easy to switch between the question and slide types.
  • Users loved the speed and convenience of Teleport (a feature to search the Quizizz community and import relevant questions and slides into the current lesson).
❌ What did not
  • For teachers using 150% scaled-up screens, the actual design area was taking up <20% of the total screen.
  • With no starter template options, the time needed to finish one slide went up considerably.
A mockup to show that teachers on 720p screens could only use less than 20% of the actual screen area for editing.

5. New hypothesis

Allow users to make beautiful slides in seconds.
A fully flexible slide editor is something a teacher expects anyway. The real value driver would be allowing teachers to quickly create beautiful slides for their classes.
Pre-game lobby
Side-nav > dock (In this context)
The bottom dock can quickly become a limiting feature if we want to add more content types later, it also needed to be removed to free up vertical height in the editor.
Pre-game lobby

6. Feature additions

Curated template sets
Through several rounds of testing, we learned that while detailed templates worked great for specific use cases, when designing for millions of users it was best to make simpler templates that were easy to use and offered a limited number of elements to start with.
Illustration to show the that complicated types of templates were avoided.Illustration to show that simple and easy to use templates were preferred.

Curated theme sets collection

Easy theme switching
All provided themes had to be completely interchangeable with each other and for any possible slide type. To tackle this we came up with a system of four-color theme sets.
A gif to illustrate how color combinations remained visually appealing even when switching between different themes sets.

Curated theme sets collection

Rules for theme color and fonts
Primary rules
  • All colors and fonts are interchangeable and work with all provided templates.
  • Encourage the use of themes to create visual variety in the content on our platform.
Color specific rules
  • Satisfy AAA contrast value for small text in all curated sets.
  • Four color types: Background (BG), Large shape (LS), Small shape (SS), and Text (T).
Font specific rules
  • Header text: Serif or san serif and any text >=36 px is considered as header.
  • Body text: San serif and any text <36 px are considered as the body.
A gif to illustrate how color combinations remained visually appealing even when switching between different themes sets.

Some of our initial set of themes

7. Final launch version

A gif to illustrate how color combinations remained visually appealing even when switching between different themes sets.

Final editor interface

New all-inclusive side drawer mockups
The text side drawer.


The media side drawer.


The shapes side drawer.


The stickers side drawer.


The tables side drawer.


New updates and why we made them
Set colors and fonts up front
This was an expected behavior for slide creation as used in other widely used products and allowed users to set the style and tone of the presentation early.
UI of selecting colors and styles at the beginning of slide creation.
Directly import slides from Google Drive
Because most of our teachers already had their class slides created in their google drive, we made the process of bringing them into Quizizz easy and highly visible.
Directly import slides from Google Drive
Templates now a core aspect of slide creation
In order to make creating beautiful slides faster, we added the template selection step into the slide creation process itself. This was done so as to make the template selection feel like a natural part of the slide creation process.
Templates now a core aspect of slide creation.
Unified left-sidebar
The bottom dock was removed in favor of a unified left sidebar that acts both as a lesson preview and to explore available asset types. This also allowed us more room to potentially more content types like Giphy and Desmos.
GIF of the new unified left-sidebar
Emojis positioned as Stickers
Emojis are positioned as stickers to make them feel like they can be dragged and dropped and resized like images. This was meant to pave the way for quizizz branded sticker assets in the future.
Emojis positioned as Stickers

8. Impact metrics

Adoption per 100 users


Lessons published per 100 lessons started


9. Learnings

First major project as a product designer
This was my first major project while at Quizizz and it’s safe to say that it was a steep learning curve for me. I actively interacted with engineers, data analysts, and a product manager as well as marketing and sales, and gained a massive appreciation for all the moving parts behind any successful product.
Putting myself in the user's shoes
Empathise with your less technical users, advanced features are not always that useful. This project taught me to better adapt to user needs.
Big changes can break
Major overhauls are prone to breaking, learn to accept issues that surface post launch, take them in your stride and make the next launch stronger.

Thanks for reading. :)

Want to know more? Let's connect!