Top Hat Gradebook

The gradebook is a key component of the Top Hat teaching platform. The engineering team had delivered an elegant new design, yet professors still preferred the old version. My mission was clear: ship discoverable, impactful features that would convince professors to switch.

The Plan

  • Interview profs to uncover pain points
  • Define clear success metrics to monitor
  • Propose 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 old gradebook was ugly, yet robust
Which features would convince them to switch for good?

Keeping an eye on the switchers

The switchers were the key to building a dedicated audience for new gradebook. By collecting the feedback in app, we could rank and prioritize missing functionality.

An in app feedback form would trigger for profs moving back and forth

Sketching sessions

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

Developing a component library

Often new features required new components. Reusing these components would speed up work for the team and create familiar patterns for our users.

Since the format of the new gradebook was so different, I would often tweak these components after launch to make the new functionality more discoverable.

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

The toolbar

With some wins under our belt, it was time to undertake a more challenging feature. Profs would export their data with the intention to hide certain columns and recalculate. Our "Customize" toolbar was designed to give them this ability live in the app.

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

Analytics come up frequently in our conversations with profs. The incorporation of a class average row helps the professors track student performance across various assignments. This is also the perfect spot to link to more contextual information in a modal.

Ready for anything

Now that we have these key components in place, the team can build features faster and place them in discoverable spots. Since beginning this work, we've seen a significant uptick in profs switching to the new gradebook.