\*\* 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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F35f288b9-33e2-4a1c-a54d-712bd069c3d3.png?alt=media&token=5d91675f-e1cb-444c-997d-c2650808fdc5","id":"35f288b9-33e2-4a1c-a54d-712bd069c3d3","width":1280,"height":720,"filename":"1.png","type":"image/png","caption":"Within a year, Quizizz had expanded to corporate users who made up 15% of our NON-STUDENT user base.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fc8199b22-39c3-4627-ab6e-b0433a6b1ba6.jpg?alt=media&token=b359eb5b-3308-4505-aa46-c700e63dd6a2","id":"c8199b22-39c3-4627-ab6e-b0433a6b1ba6","width":1280,"height":720,"filename":"2.jpg","type":"image/jpeg","caption":"An empty Times Square during the coronavirus lockdown in New York City, USA. Photo by Paulo Silva, Unsplash","border":false}]}
```

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’.***

**W**e 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.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F5814fed3-e476-4484-b2c7-2f8a773aefe8.png?alt=media&token=1ee8e7ed-0757-4999-8886-6131bd9279a0","id":"5814fed3-e476-4484-b2c7-2f8a773aefe8","width":1280,"height":720,"filename":"3.png","type":"image/png","caption":"Initially, slides were rendered differently on mobile. I fixed the landscape designs for the in-game Quizizz experience a few months later.","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fa12da41f-6e91-46ca-8a7c-49d776882b53.png?alt=media&token=5c68108c-9f35-46bf-a779-e4ce451a2b0e","id":"a12da41f-6e91-46ca-8a7c-49d776882b53","width":1280,"height":720,"filename":"4.png","type":"image/png","caption":"These layouts that I created solved the problem of very few people knowing important stuff about tigers. /j","border":false}]}
```

---

## **The lessons editor**

### **Early explorations**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F4a7451fa-f81f-4a59-9d84-990fabe77770.gif?alt=media&token=bda3b398-c106-4f2d-a206-ba9e8b86538b","id":"4a7451fa-f81f-4a59-9d84-990fabe77770","width":1200,"height":675,"filename":"5.gif","type":"image/gif","caption":"It helps so much down the road if engineers review these designs. Doing so uncovers constraints and opportunities that were not previously discussed.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F3a748ee0-060a-4832-8cba-eb024c545ccd.png?alt=media&token=4532171b-62b8-4dbc-a9e6-1ac939b28ffe","id":"3a748ee0-060a-4832-8cba-eb024c545ccd","width":1280,"height":720,"filename":"6.png","type":"image/png","caption":"This is the editor as of December 2020. The 'Themes' toolbar is the latest feature addition.","border":true}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F39133a68-231b-4f86-8016-732b2c4ca84a.png?alt=media&token=13b283db-5cac-46d0-894b-3c8f2481de0a","id":"39133a68-231b-4f86-8016-732b2c4ca84a","width":1280,"height":720,"filename":"7.png","type":"image/png","caption":"No such thing as too many components.","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fe8a42edc-353f-4c3c-8508-2392a6e388fa.png?alt=media&token=ccdf6be1-aac4-4eb6-8708-779ae36341b2","id":"e8a42edc-353f-4c3c-8508-2392a6e388fa","width":1280,"height":720,"filename":"8.png","type":"image/png","caption":"I designed the drag and drop interactions, hover interactions, selected states, and slide actions.","border":false}]}
```

### **Video editor**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F223cd4b4-dbca-4546-b906-df3a003e1a71.png?alt=media&token=87fef81e-2f78-4572-8f8a-67dc2b68ada6","id":"223cd4b4-dbca-4546-b906-df3a003e1a71","width":1280,"height":720,"filename":"9.png","type":"image/png","caption":"I designed a scrollable, draggable, editing bar with strong visual cues to set timestamps for YouTube videos.","border":false}]}
```

This small feature was so well received, it kicked off yet another feature (interactive videos) which is in a very nascent stage.

### **Image constraints**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F8e9b582c-6dab-43ce-95d5-0cf53a468d7b.png?alt=media&token=281691ad-46d0-4ddc-ad41-ad777c577834","id":"8e9b582c-6dab-43ce-95d5-0cf53a468d7b","width":1280,"height":720,"filename":"10.png","type":"image/png","caption":"Small wins. Or stretched wins. You decide.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F52b4e0ad-9b13-4056-b510-cf1a49ac2dbe.gif?alt=media&token=c8785c8f-1694-4757-b1fb-bc5efd027d23","id":"52b4e0ad-9b13-4056-b510-cf1a49ac2dbe","width":800,"height":444,"filename":"11.gif","type":"image/gif","caption":"This was added after the first launch.","border":false}]}
```

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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F5bea3b8e-2d33-4c14-9f21-bed5186d735e.png?alt=media&token=32c7ada1-6144-4d00-a9b7-ee9759cc8e17","id":"5bea3b8e-2d33-4c14-9f21-bed5186d735e","width":1280,"height":720,"filename":"12.png","type":"image/png","caption":"These screens were made by both designers on this project.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fe11c96cc-c5f8-4a51-920e-2118140bab56.gif?alt=media&token=9b2d8689-4202-46bc-bff9-46f50d33c54f","id":"e11c96cc-c5f8-4a51-920e-2118140bab56","width":1200,"height":675,"filename":"13.gif","type":"image/gif","caption":"Why the fox? I didn't search for tigers and went for a random Unsplash image.","border":false}]}
```

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.**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fb85f2d73-22d5-4a63-b555-233f421b8f1b.png?alt=media&token=b7428b18-15ad-4b2e-9f8f-fe950cb4ca7e","id":"b85f2d73-22d5-4a63-b555-233f421b8f1b","width":1280,"height":720,"filename":"14.png","type":"image/png","caption":"We designed slides for 1080p and had them rendered in smaller sizes. The one mistake we made in this project was doing the same for other components as well. These screens were some of the many that I had to recreate in smaller resolutions for the developer.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fab8b7bac-6abb-405b-bee5-471b08edbba9.gif?alt=media&token=0fe55ed8-21fd-40f7-905f-ea5d39646d22","id":"ab8b7bac-6abb-405b-bee5-471b08edbba9","width":800,"height":450,"filename":"15.gif","type":"image/gif","caption":"We didn't want to reinvent the wheel here. A floating bar in the bottom left suited our use-case perfectly.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F5e7af6c2-e7db-4758-bba9-c777969f6a33.gif?alt=media&token=436618f2-e56c-4395-acc6-7875a5c3b1bc","id":"5e7af6c2-e7db-4758-bba9-c777969f6a33","width":800,"height":450,"filename":"16.gif","type":"image/gif","caption":"The first two screens are the participants' view on the desktop and the earlier view on mobile. The last screen is the actual presentation. They're practically the same by design.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fb9f7a42d-c277-42fb-97d7-10da7c279eaf.gif?alt=media&token=233c8e05-8da0-4e35-9f6c-f076f592d469","id":"b9f7a42d-c277-42fb-97d7-10da7c279eaf","width":800,"height":450,"filename":"17.gif","type":"image/gif","caption":"Yellow for time's up, green for correct, red for incorrect, and purple for submitted.","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F2e1e28b5-7097-4b4c-82dd-0346ac64543b.png?alt=media&token=849ef035-b478-4ce8-accb-a7521bddd27f","id":"2e1e28b5-7097-4b4c-82dd-0346ac64543b","width":1280,"height":720,"filename":"18.png","type":"image/png","caption":"","border":false}]}
```

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 🔊**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2Fcdecd4f6-a16d-41a1-ae06-4f075f2ba7d0.mp4?alt=media&token=de783a40-7c1d-46f5-aa75-69bfd5a88813","id":"cdecd4f6-a16d-41a1-ae06-4f075f2ba7d0","width":1920,"height":1080,"filename":"20.mp4","type":"video/mp4","caption":"The Marketing head nudged me to put my name in one of the slides. Do you see it?","border":false}]}
```

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**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FTplp4XfZNGYRfbh3CyyL%2F02f379da-2abb-4d1b-aeb6-55128e6783e0.png?alt=media&token=f0fdb304-9087-422a-8bc0-b4bbc1c5095d","id":"02f379da-2abb-4d1b-aeb6-55128e6783e0","width":1024,"height":697,"filename":"19.png","type":"image/png","caption":"","border":false}]}
```

Lessons

\*\* Click on the images to make them larger \*\*

Working at a mid-stage startup that's discovering its product-market fit brings with it a lot of incremental projects and experiments. Besides designing the regular potpourri of projects picked by the leadership, I was also encouraged to take ownership of projects that I thought would add value to the product but weren't necessarily on the roadmap.

## **Stars vs. Accuracy**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2Fu5mWfOUDYYEuE7guQolb%2F5764560d-fd02-4be1-9ccc-d72306c757c9.gif?alt=media&token=fa40371c-ee5f-46e7-a7c4-1099697ecf70","id":"5764560d-fd02-4be1-9ccc-d72306c757c9","width":598,"height":250,"filename":"1.gif","type":"image/gif","caption":"Happy stars credit, Vijaya Aswani, Illustrator @Quizizz.","border":false}]}
```

The game-end summary on Quizizz shows an accuracy bar with a percentage indicator. While this design didn't need 'fixing' I thought it could be improved to encourage all students to aim for a 90%+ accuracy.

**Team**: One designer/product owner (me), one engineer, one illustrator.

**Assumption**: Your accuracy in any game is linked to your ability while the number of stars you achieve is a proxy for your effort.

**Goal**: Increase student engagement and encourage quiz mastery by using a familiar star metaphor on the summary screen.

### **Outcomes**

* Students had a replay rate of **12.11% in MAIN and 12.06% in EXP**

* Because no statistically significant conclusions could be drawn (even after increasing exposure) and because there was a negative change in replay rates the experiment was **concluded as a failed experiment.**

---

## **Improve activation**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2Fu5mWfOUDYYEuE7guQolb%2F4282d6f0-f0a2-44e2-ba63-1c165134c34a.gif?alt=media&token=868c954c-d646-4f6f-ad42-cbe8803e08c6","id":"4282d6f0-f0a2-44e2-ba63-1c165134c34a","width":1200,"height":675,"filename":"2.gif","type":"image/gif","caption":"Next, I'd like to incentivize users with a free month of Quizizz SUPER to check out power features.","border":false}]}
```

**Team**: One designer (me), one engineer, one illustrator.

**Assumption**: Activation rates have always been low but new user growth is high. The more users activate, the more increase we see in growth and revenue.

**Goal**: Use gamified tasks to nudge teachers to explore all features that Quizizz has to offer.

**Docs**: [Post-experiment data analysis sheet](https://docs.google.com/spreadsheets/d/1oc3aBTrSgCTNsUkczOKJkeqTd7g0X1Xb__7EUfMCH7c/edit?usp=sharing)

### **Outcomes**

* Over 20 days: Slightly more teachers activate globally and in the US—2% and 3% respectively.

* Globally, more teachers created and played more lessons.

* In the US, more teachers played a LOT more homework games.

* The experiment was concluded as successful.

---

## **Pre-Game NeUI**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2Fu5mWfOUDYYEuE7guQolb%2Ff8eab755-f6f9-4047-9991-da162e84ff65.png?alt=media&token=da1cac5c-74db-429d-8597-a0a5478828f2","id":"f8eab755-f6f9-4047-9991-da162e84ff65","width":1920,"height":1241,"filename":"3.png","type":"image/png","caption":"Pomegranate Minderbender is the longest name that can be generated using the Quizizz nickname factory.","border":false}]}
```

### **Intro**

Earlier on Quizizz, students would enter a game code and their name in the same component on the same page, after which they'd join the game experience. With this screen, the idea was to give them a breather between the landing page and the game and allow them to change their personal game settings.

**Team**: One designer (me), one engineer, and one product manager.

**Goal**: with 30M+ monthly impressions on the earlier page, can we split it up such that we add value AND add to our top-line revenue.

### **Outcomes**

* Students can now change game settings before the session, instead of during a session.

* Splitting the 'Enter a code' and 'Enter your name' components reduced engineering debt.

* This page brought in an additional $15,000 in monthly ad revenue through child-safe ad partners such as SuperAwesome

---

## **Motion and interaction**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2Fu5mWfOUDYYEuE7guQolb%2Fefaeefa3-83a5-4670-8851-9e94326a0a2e.gif?alt=media&token=2f5c51f8-99c1-4778-b78a-fb2785d074e2","id":"efaeefa3-83a5-4670-8851-9e94326a0a2e","width":800,"height":449,"filename":"4.gif","type":"image/gif","caption":"A yellow mystery cube would give you and everyone else either the 'Power Play' or the 'Glitch' powerup. Part of a larger project to explore revenue opportunities through paid in-game vanity upgrades for students","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2Fu5mWfOUDYYEuE7guQolb%2F767477d6-8df8-443a-8834-2e62c219c45d.gif?alt=media&token=70001f32-aa61-4ec9-8dfa-188d9467a0e7","id":"767477d6-8df8-443a-8834-2e62c219c45d","width":800,"height":450,"filename":"5.gif","type":"image/gif","caption":"Explaining this feature to teachers with only words would mean long bodies of text and a near 100% chance of it not being read.","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2Fu5mWfOUDYYEuE7guQolb%2F1dbcbab6-2f96-4159-a606-3c133ccca36d.gif?alt=media&token=c85afe89-9877-4c71-a4db-179d93b88b33","id":"1dbcbab6-2f96-4159-a606-3c133ccca36d","width":800,"height":450,"filename":"6.gif","type":"image/gif","caption":"This was one of my very first micro-interactions. The goal here was to improve SEO score by adding links for quiz categories on the landing page. ","border":false}]}
```

Small projects and experiments

\*\* Click on the images to make them larger \*\*

## **Overview**

**Product**: Teachers conduct quiz games in the classroom and send email reports of the game directly to parents via Quizizz.

**Hypothesis**: We thought we could leverage this report to show curated advertisements. The hypothesis was that parents, who have the purchasing power, would call the shots for educational expenses.

**Team**: One designer (me), one engineer, one product manager.

**Launch**: November 2019

---

## **Problems**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FyJmy8XwpSG2RVnl6jcHj%2Fa2f46fb0-1e1e-4edc-bc7c-310894a6d599.png?alt=media&token=5f2c92a4-3f29-442f-aa24-714708d511db","id":"a2f46fb0-1e1e-4edc-bc7c-310894a6d599","width":1920,"height":1256,"filename":"1.png","type":"image/png","caption":"This Typeform was a way to collect primary data on what parents 'say' they want.","border":false}]}
```

First, the existing solution was outdated and out of sync with the rest of the product. Quizizz had a [variety of new question types](https://twitter.com/quizizz/status/1252952962839777282) and rich media support since the last update to the page.

Second, the information that parents saw on the page was insufficient to determine how their child did in class. Their child's score and accuracy alone are not complete indicators. Two out of three parents realize this, as seen from a preliminary survey that we sent out.

Finally, when their child does poorly on a quiz, parents want them to improve by replaying a quiz.

---

## **Goals**

**Objectives**: First, update the reports page functionality. Second, make it easier for parents to understand the report. Third, allow parents to encourage their child to replay a quiz.

To redesign in a way that added value, I didn't want earnings-based goals to guide design decisions.

**Key Metrics**: Games started from the report.

Other potential metrics could be whether or not subsequent reports had a higher email CTR. That, however, was beyond the timeline for this project.

---

## **Before**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FyJmy8XwpSG2RVnl6jcHj%2F25fce6e9-8955-4df2-9af6-4d5c795998b1.png?alt=media&token=0727c2f3-dc2a-464b-8071-4910b5003724","id":"25fce6e9-8955-4df2-9af6-4d5c795998b1","width":1920,"height":1457,"filename":"2.png","type":"image/png","caption":"","border":false}]}
```

## **After**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FyJmy8XwpSG2RVnl6jcHj%2F9113bde5-295a-4916-b4d4-ffc24f9b7d3d.png?alt=media&token=a2897b34-6c44-49d2-8490-5aef9b334a75","id":"9113bde5-295a-4916-b4d4-ffc24f9b7d3d","width":1920,"height":4177,"filename":"3.png","type":"image/png","caption":"","border":false}]}
```

---

## **Outcome**

Overall, the project was a success. `7% more parents played quizzes with their children (compared to 0% earlier)`. In doing so, we also improved our internal north star metric by ≈5%

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FyJmy8XwpSG2RVnl6jcHj%2F1d923d6a-5e12-49a1-8c29-107df6efb5de.png?alt=media&token=841778da-1ca4-454d-b727-914d11b6a9cd","id":"1d923d6a-5e12-49a1-8c29-107df6efb5de","width":1920,"height":1080,"filename":"4.png","type":"image/png","caption":"I used Google BigQuery to pull this data myself.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FyJmy8XwpSG2RVnl6jcHj%2F128b3199-f687-4065-8f50-81c75e13e5bd.png?alt=media&token=becabf1c-ed69-4c43-95aa-caab9d456cb3","id":"128b3199-f687-4065-8f50-81c75e13e5bd","width":1920,"height":1080,"filename":"5.png","type":"image/png","caption":"","border":false}]}
```

---

## **Iterations**

After the initial success, we explored affiliate marketing as a potential recurring revenue stream.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FyJmy8XwpSG2RVnl6jcHj%2Ff20b02d8-d3d5-4a3c-b6e6-727946ad83bb.png?alt=media&token=299fbc1c-8409-4147-9dff-01aa55620052","id":"f20b02d8-d3d5-4a3c-b6e6-727946ad83bb","width":1920,"height":1193,"filename":"6.png","type":"image/png","caption":"This is a custom banner I made using the brand colors of the affiliate company.","border":false}]}
```

### **Outcome**

The theory that affiliate prompts would do well here as parents have the purchasing power does **`not`** seem true.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FUBi8rJbjoWfaPi4DNqgOLhb6TUv2%2FyJmy8XwpSG2RVnl6jcHj%2Fed9816af-97fa-4130-a46b-2685a155ba19.png?alt=media&token=80707c7b-c3b1-4580-9924-3354254aab59","id":"ed9816af-97fa-4130-a46b-2685a155ba19","width":1920,"height":1080,"filename":"7.png","type":"image/png","caption":"The 'Play now' button saw a ≈25% decrease. Advertisement aversion most likely reduced the trust on the page.","border":false}]}
```

---

## **Closing thoughts**

For a designer tasked with redesigns, pretty visuals are only a part of the puzzle. **It is equally important, if not more, to find and solve existing problems.**

When you have tens of thousands of users using your product in the span of a few days, **it’s okay to turn to quantitative over qualitative research methods** where behavioral changes can be defined easily and measured accurately.

Karan Sanas

2020

2019

202