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.
Role
Strategy, Research, Design
Timeline
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.
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.
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.
2. Starting point
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
Video support
Participants can draw
Custom re-usable themes
Math integration
Free features, usage paywall
‘Preview’ or ‘student’ mode
Live edits
4. The test version (1% launch)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Some of our initial set of themes
7. Final launch version
Final editor interface
New all-inclusive side drawer mockups
Text
Media
Shapes
Stickers
Tables
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.
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.
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.
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.
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.
8. Impact metrics
Adoption per 100 users
Old:
10.2
New:
18.1
Impact:
+77%
Lessons published per 100 lessons started
Old:
32.4
New:
51.2
Impact:
+58%
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.