Top Hat helps professors make their course content more engaging both inside and outside of class. The company's marquee product, Top Hat Classroom, makes it easy for professors to add interactive questions and discussions to their lectures.
The Covid-19 pandemic forced Top Hat to completely reimagine how this feature-set might work. The result was Virtual Classroom: a new product where professors could broadcast their lecture content and engage with students right in Top Hat.
I was the Design Lead for this experimental product. Working from an initial draft through to a big launch for the Fall 2020 semester. It involved radical prioritization of features, testing often/early, and working across many stakeholder groups.
March twenty-twenty
As Covid-2019 dawned, one of the first places to go dark was the College/University campus. Remote learning had begun and this was an uncertain moment for Top Hat.
The Classroom product was built around a lot of assumptions that had suddenly vanished:
Instructors presented Top Hat on a large display, with students responding on their own device.
With empty lecture halls and classes headed online, this begged the question for our team:
How should the Classroom product quickly evolve to meet these new needs?
Early signals from the Field
In April, we started doing research on how the pandemic was affecting the classroom experience. The themes from Instructors were clear:
Hard to “read the room”: Many instructors feed off live reactions. Online teaching was taking a lot of this intimacy away.
Juggling a lot of new technologies: instructors were just learning how to run a fully online class, with tools never made for it.
A rise in “asynchronous” teaching: Students were now spread across timezones, making it hard to run traditional lectures.
Many scenarios to prepare for: Little clarity on what the future holds: online forever?, “Hybrid” classes?, back-to-"normal"?
A survey of students Top Hat did at the time mirrored these challenges: 68% found that emergency online instruction was worse than in-person.
The Big Bet
"Zoom University" had quickly become a meme that encapsulated these issues. The tools instructors had weren't working for them.
So, we wondered: could we take the core Classroom experience and super charge it for higher education?
The plan was to "wrap" the core experience with streaming and engagement functionality.
This became the heart of the idea for Virtual Classroom. Build on-top of the familiar experience instructors already have with features targeting pain points we knew were emerging.
Building quickly in parallel
Our teams got to work in early May 2020 and set the ambitious goal of launching for the Fall 2020 semester: just 3.5 months away! Additionally, we wanted to do some beta testing in summer classes: just mere weeks away.
Twitch was an early (and obvious) inspiration for us: a product designed around encouraging engagement with big audiences. Building on this interface style gave us a base to work off of.
We went through a series of moderated tests with instructors, iterating and validating the design with each pass. Things were quickly taking shape:
Selection of iterations we went through during early user tests
In parallel, our development teams were laying down the technical foundations of key details like video streaming and chat/reactions functionality.
Test, Dog Food, Test, Dog Food
All of this work came together in a matter of weeks. We had a working prototype: it wasn't pretty, or even remotely finished, but it got us started.
We began pushing hard to gather feedback on it and had the whole company trying it out often.
We even starting using it for daily stand-ups! The definition of "dog fooding" your work.
Additionally, five brave instructors tried out our prototype with their summer classes during a Closed Beta period in July. Some of the big observations from these tests:
Passive reaction options like emojis were an immediate hit.
There were a lot of teaching-style set-ups to consider.
Focusing on the experience itself was bogged down by bugs and missing features.
This phase of rapid iteration helped us learn some big lessons before progressing to the final build.
Evolving the design for launch
As we got closer to the launch, the final look & feel of experience started to come to together:
Although this layout seemed straightforward, there was a lot of functionality packed into the small space. First beginning with the menu:
Another big area of focus was screen sharing. Both students and instructors needed to be able to do this, all while not interfering with the Top Hat app itself.
We didn't want instructors to only be able to interact with students through chat. Many wanted a way to "share the stage" with students in a controlled way:
Finally, playback of recorded classes was a key requirement. We built an entirely separate interface just for this.
Iterating with others
I lead the design for this project, but it was wide ranging. I had several designers work with me on key pieces.
One of the biggest ones was chat & reactions. Another Designer at Top Hat, Bryan Cesar, helped me find the right approach for these:
We also needed to support all this functionality on our mobile app. Our lead designer for mobile, David Alves, built out this experience.
Additionally, as we got closer to launch, other parts of the business informed us of some key requirements that we hadn't accounted for in our original product definition. We had to work quickly to bring these ideas in before launch.
Hitting launch & listening to feedback
After 3.5 months of iteration and refinement, we hit launch. The new experience was front-and-center on the Top Hat homepage.
Initial reactions from passionate instructors using Top Hat was positive. The product was unique and focused on their needs which helped us generate some early buzz.
Early usage data showed that a minority of instructors using Top Hat tried the product out, but a majority those who did use it had tendency to stick with it over several weeks in the semester.
This was an encouraging sign, but as we tracked issues across the semester, Bugs/Quality became a big challenge that we continued to work through. Solving these issues ultimately made it difficult to focus on some of additional features we really wanted to build out:
Epilogue
Although we saw some traction with Virtual Classroom, it wasn't enough to justify investing in it further. One of the biggest factors was how the market shifted: many schools mandated the use of a specific video conferencing tool for classes which hampered our adoption.
The project was ultimately an experiment during an uncertain time. We maintained the product for a passionate subset of our users until late 2021 when we sunset the feature.
Personally, this project was a whirlwind experience for me. I had never led design on such a large, visible, and high stakes project. It taught me how to be decisive in my vision for the work, ship before it's ready, and maintain quality at a high speed.
In spite of the outcome, it remains one of the projects I am most proud of.
Acknowledgments
This project wouldn't have been possible without the help of many people at Top Hat. Thank you to my PM Kay Chang for guiding the project, Engineering Manager, Jeremy Fache (+ his team), for bringing it to life, Andrew Corway, for providing lots of research/concept support in the early innings, and fellow designers Bryan Cesar & David Alves, who built it alongside me.