Monica Moore

Top Hat

Multi-Section Management

Due to a partnership with a textbook publisher, it became necessary for Top Hat to support the management of multi-section courses. These courses can have dozens of sections with dozens of different instructors, and hundreds of students. Handling these courses in Top Hat is currently a huge pain. If we could do enable these courses to be managed in Top Hat, it would open up $3m in revenue.

Users

Multi-section courses posed a challenge, in that there were so many user types to consider, with 2 completely new ones: Course Coordinators and Lab Coordinators. The PM and I extensively interviewed people from each group to learn about them.

Primary Users

Secondary Users

Course Coordinator Personas

Through our interviews of Course Coordinators, we discovered 4 main persona types. Based on their pervasiveness and depth of the problem space, we decided to prioritize the Prescriptive Coordinator and the Customizer.

Types of Multi-Section Courses

From our interviews, we identified many types of multi-section courses, and ideally we want to accommodate all of them.

One Professor, Multiple Sections

Sections taught by different profs, organized by a course coordinator

Tutorial Sections

Labs

Current State in Top Hat

Talking to the Support team, we learned that currently for multi-section courses there are 2 methods used today:

It’s so much work that the majority of it is done by support, rather than the customer.

Key User Goals to Prioritize

From speaking to Coordinators, we decided to focus on these main goals first.

As a Course Coordinator, I want the management of the following to be seamless in order for students taking my course to be successful, which ultimately translates into success in my role:

User Problems

After talking to all our user types, we heard the following problems over and over again. For V1, we would have to prioritize the problems based on their importance and difficulty to solve. I've put an * next to problems we kept for the MVP.

User Journeys

After all this discovery work, I began solutioning. The rough idea was to have a place where coordinators could create and manage all the course content, and it could be synced to the sections. Having sections separate from the course manager would allow for individual instructors to have flexibility over their sections.

Before Course Begins

During Course

Iterative Design Process

I ran workshops with people throughout the company, led a cross-functional team to gather input, and created lofi prototypes in Balsamiq. I tested these prototypes with both internal employees and a diverse range of professors and coordinators. I iterated on the lofi designs until all observed usability issues were eliminated before moving onto high fidelity designs.

The Solution

The concept is to have a "master course" (called the Multi-Section Manager) where the Course Coordinator can create their content, the sections, and add instructors to the sections. From there, they can sync the content to the sections when they're ready. Each section is similar to an individual course, except that the content is coming from the Manager. The Section Instructors could add more content to their course if the permissions allow. The end goal is to allow the Coordinator to set permissions on whether Section Instructors can add or edit the content.

This is a massive project with many development iterations and stages, so I can't possibly present all of the design work here, but I'll do my best to showcase the main components.

Creating a Multi-Section Course

I added on to the existing course creation modal, by creating a "This course has multiple sections" checkbox. The user then can enter the # of sections and name them, with the option to either auto-number or name the sections themselves. The vast majority of college sections are named 001, 002, etc, so having them auto-numbered would save users a lot of time.

The Multi-Section Manager

Once they create the course, they're brought into the Multi-Section Manager. It looks very similar to a regular course, in order to ensure familiarity for the user. I chose to use the empty state for some onboarding instructions. In general, we need better onboarding in Top Hat, but this was a low-effort way to create some in-app onboarding.

In the Base Content tab, the Coordinator can create the content. Once they're done, they can click the Sync Content to Sections button, which pushes all the content into the sections. We chose not to do auto-syncing, because the Coordinators may not want the sections to be updated before the content is finalized. It would also be confusing to Section Instructors if the content was constantly updating after every change.

Managing Sections

The Sections Tab is where the Course Coordinators manage their sections. They can add/edit section instructors here, add and delete sections, and go to the sections.

If they click Add an Instructor or Edit, a modal opens where they can make changes to the section. Here they can add instructors to a section, who would then get notified by email. I also designed a Class Times feature, which is a delighter for users. We found that instructors and students typically refer to their sections by the time they're at. Having this info would make it much easier for students and instructors to identify their sections. This could also open the door for many Top Hat features in the future.

When filled out, the Section tab looks like this:

The Course Lobby

One of the issues our users had was extremely cluttered Course Lobbies when they had many sections as individual courses. This new, collapsible card design makes it easy for Coordinators to access both the Manager and the Sections.

Section Instructors would see something similar, but they don't have access to the Multi-Section Manager, unless they're granted access.

Sections

Although there are some different scenarios depending on permissions, the most common use case is that the Section Instructors can't edit Base Content, but can add their own. The Base Content synced from the Manager is labelled with a crown, distinguishing it from the content that the Section Instructor creates themselves. The Edit and Delete buttons have been removed.