Top Hat Gradebook

Top Hat is a teaching platform for university professors. Their gradebook is a key component which allows them evaluate student grades and make neccessary adjustments.

Our engineering team had delivered an elegant new grading platform, yet professors still preferred the old version. My mission was clear: ship discoverable, impactful features that would convince professors to switch.

The Plan

  • Establish metrics for success
  • Understand the customer journey and pain points
  • Prototype and test iterative solutions
  • Build on successes

Out with the old ...

The profs we interviewed confirmed they preferred the new design, but it did not have the robust feature set of the old.

Our analysis showed a growing body of "switchers", users moving back and forth between the two versions. The key to our success would be convincing the switchers to stay on the new platform.

The old gradebook was ugly, yet robust
Which features would convince them to switch for good?

Understanding the user journey

With oversight from volunteer profs and customer support, I mapped the timeline of an individual course. It revealed two key periods where we could make a big impact by addressing three crucial pain points:

Mapping the professor's needs and activities

Solution sketches

New gradebook was a clean slate, where would all these features go? I used solution sketches to map out potential components we could add to the gradebook.

This was a quick, easy, and collaborative way to work with the team. It helped us prioritize features and assess our appetite for solutions.

We did a lot of these

Prototype testing

Solution sketches would be converted to prototypes and shared with profs during regular interviews. Live user testing helped assess both the enthusiasm for new features, and their discoverability in the new UI.

A failed prototype for excusing attendance and in class questions

Editing grades, and our first new component

The first pain point to tackle was the most basic function of the gradebook - finding and editing grades.

Since the format of the new gradebook was so different, new components had to be developed. Reusing these components would speed up work for the team and create familiar patterns for our users.

Our original heading popup ...
... expanded for cell based uses.

Preparing grades for export

With some wins under our belt, it was time to undertake a bigger challenge. We learned that professors would export their data to a spreadsheet and then remove certain assignments to recalculate student grades. Our "Customize" toolbar was designed to give them this ability live in the app. This was a huge time saver for professors and won us the loyalty of many switchers.

Hiding items with the total allows profs to quickly recalculate grades.

The settings menu

The toolbar also gave us an ideal space to incorporate a new settings menu, allow profs to display grades according to their personal preferences.

Choosing different settings reformats the grid

Averages and analysis

We had one major challenge to clear: analysis of student data. The incorporation of a class average row helps the professors track student performance across various assignments. But our diehard users were not going to switch without surfacing a more detailed analysis.

Surfacing the averages

The report view

The dense, grid-like layout of new layout could not display the depth of data our users were asking for. It was crucial to introduce a second UI allowing professors to "zoom in" on individual assignments and students. The new UI allowed us to incorporate more details and bulk editing features that made grading faster.

Report view of a question
Report view of a student


Once we launched the report views for questions and students, we saw a tremendous uptick in users switching to our new UX.

Feedback and interviews confirmed that the new gradebook had reached the level of sophistication and depth our users were looking for. Top Hat was able to formally deprecate the old gradebook and concentrate solely on the new platform.

A potential analytics feature, maybe someday ...