Top Hat Tournaments

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

The Challenge

Make it easy for professors to configure and launch a tournament during class time. Students should find the tournament challenging, but fun. Professors should get insights into student comprehension.

My Role

Senior Product Designer
Working with a PM and a team of engineers.

Mapping user tasks

Professors are often strapped for time, so my first priority was to design a feature that was easy to use and made use of existing assets.

I did some UX mapping with the developers on my team to make sure we were delivering the least amount of steps possible.

Moving into mockups

Convinced that the process was as simple as we could make it, I began to mock up the events in my UX map.

Gathering feedback from professors was useful as I worked and led to some must have sub-features: like the estimated time and difficulty of the tournament.

Solution sketches

Having 100+ students competing at once was going to be a challenge for design and development. I worked alongside the dev team to create a user flow that would keep the students engaged while mitigating lag times from our servers.

Using solution sketches was a quick and easy way to trade ideas back and forth. If a solution wasn't feasilbe, I could quickly redraw it until we had a working plan.

Prototype testing

I built a simple prototype of the proposed solution in JS. I built it because I wanted to test with students and make sure the timer wasn't running too last and that they understood the rules of play.

Definition of MVP

Since this was a 0-1 feature we needed to think critically about what was required to test, release and expand on it. I lead the team through some scoping exercises so we could arrive at an MVP that was simple enough to build quickly, but also delivered a good experience.

MVP designs

At this point we were feeling confident enough that the feature would be easy to use, engaging and technically feasible. I translated my ugly prototype into finished mockups for mobile and desktop so we could start building.

Live testing and launch

We conducted some live testing in university lecture halls with classes of hundreds of students. It was exciting to see tournaments play out in real time, and we collected some valuable insights by surveying the students.

With those final tweaks incorporated we were ready to launch and push forward to the next phase of development.