Top Hat is a platform that allows lecturing professors to engage their students in class. We wanted to build on this model by introducing gamification - creating a new feature called tournaments.
The idea driving the tournaments feature was to take the interactive questions professors create in Top Hat, and present them to students in a fun and competitive way. To prepare I spent some time demoing existing quiz apps and trivia games and comparing them to the Top Hat experience.
Screenshots from Kahoot, Quizup and HQ Trivia
I also interviewed many of our existing customers who had expressed interest in a gamification feature. We learned through these findings that professors were not just looking to give their students a fun experience. They also wanted to use the game to assess their students' comprehension of the material. The professor could use this data to focus on areas where students could improve.
Diagramming the flow of data through the feature.
We wanted to deliver a tournament experience where a class of hundreds of students could compete against each other on their phones and laptops. Using solution sketches and feedback from the engineers, I proposed a flow of events and animations in the game that would appear seamless to the end user, while allowing for lag times from our server.
It took multiple iterations to get this flow correct
Now that we had a flow in mind, I built a simple prototype to test the effectiveness of the game. I tested this prototype with student volunteers to guage the effectivness of the game. I tested the prototype with student volunteers, tweaking after each round of participants. This testing helped me create a flow of events that users could understand and master as well as make key decisions around timing and presentation.
Screenshots from the early prototype
I used the learnings from the prototype to design a more polished student experience. This was a responsive design for mobile and desktop, incorporating timed events and animated transitions
UI for the mobile student experience
UI for the desktop student experience
I also designed the experience of the professor creating the tournament. Using the insights from professors, I proposed various methods of drawing results from the tournament and sharing them with the class.
Creating the tournament
A completed tournament
At this point we felt we had arrived at a vision of what this feature could be, but no data on how it would perform in a live classroom.
Working closely with my product manager, I planned a scope alignment exercise. I broke my proposed design into multiple sub-features and invited the engineers to break the work down into manageable chunks. We agreed on a minimum viable product to do a live test and a minimum sellable product to release as a feature.
Results of our scope alignment exercise
Four our MVP we built a stripped down version of the student experience and agreed on success metrics for a live test. We wanted to make sure students reacted positively to the competitive aspects of the game in a large class setting. We reached to the same professors who requested the feature and asked them to run test tournaments in class. Through data gathered from in class surveys, we were pleased to see that students rected positively to the game.
Student reactions to our test version
The live test gave us the confidence we needed to build the remaining components for a full release. The work is far from over as we'll be looking for feedback and data to determine how to iterate on this new feature.
The finished leaderboard for students