Top Hat Tournaments

College professors use the Top Hat mobile app to quiz their students live in class. By introducing an experimental "tournaments" feature we hoped to bring a sense of competitive fun to these live quizzes.

The Plan

  • Create a value proposition for a competitive new product
  • Develop a working prototype
  • Test with live classrooms
  • Develop an MVP

Why tournaments?

Profs are drawn to Top Hat because live interactions in class are enjoyable for the students. But the real value is the data they receive on their students' performance.

In my user flows, I had to ensure a fun experience for the students, but also a comprehensive summary for the profs.

Mapping the post-tournament user flow

Solution sketches

Classes who use Top Hat often have over 100 students. We wanted to ensure a fun experience that wouldn't cause connectivity issues.

Trading solution sketches with the developers helped me reach an ideal flow that would mask any lags in app connectivity.

Some sample solution sketches

Prototype testing

I built a simple JavaScript powered prototype to help test the user flow we'd developed. This was helpful in ensuring students understood the rules and gameplay. I did a few rounds of prototype testing with fresh profs and students to perfect the timing and scoring.

Screens from my prototype

High fidelity mockups

Now confident in the general flow, I moved on to creating high fidelity mockups. The students had be able to access the tournament via phone or desktop, so a responsive design was neccessary.

The student experience for iOS and android
The same experience for web

The professor experience

In addition to the gameplay, I also designed the professor's experience creating a tournament. I used flow diagrams to map out the tasks the professor would accomplish to easily create a tournament and see its results upon completion.

Creating a tournament

Live testing

While I continued to work through the professor experience, we began testing the game experience with live classes.

For each test, we'd have between 100-300 students use the tournament, then complete a survey. Students were extremely enthusiastic and helped us answer many questions about how to develop the product.

Student reactions to our live tests

MVP definition and launch

Student reaction to the prototype was positive, so we set about creating the live version. I led the team in some scope alignment exercises to ensure we were shipping an MVP that delivered a quality experience.

Within a few months we'd gone from a handful of sketches to a compelling new feature.

Guiding the team towards a quality MVP
A screenshot from the live version