Responses Tab Redesign

Refining instructor’s experience of student data

August 2024–November 2024

Design methods, research, and project management

 

I redesigned the gradebook “Responses Tab” for a major assessment platform.

 

An international courseware product with world-class content and robust assessment tools has a complex and useful gradebook for its instructors and students.

As the product has grown in complexity for the last decade, however, the gradebook has not kept up, and now does not fully serve all of the instructor’s use cases.

I was the lead designer for an in-depth redesign of the gradebook’s responses tab and delivered prototyped and validated high-fidelity designs.

The Problem

A student assessment platform has increased in complexity, and the gradebook can no longer meet the complex needs of the instructors.

The Work

  • Current gradebook UX audit

  • Review of past attempted redesigns

  • Convergent and divergent design cycles

  • Internal reviews and critiques

  • High-fidelity designs

The Solution

A redesigned “Responses Tab” with new student data “lenses” functionality, improved navigation, and a refined data dashboard.

Deliverables

  • Wireframes

  • High-fidelity screens

  • Figma prototypes

Users & Audience

  • 32,000 Secondary and higher education instructors and professors

Roles & Responsibilities

  • Workshop Moderation

  • Stakeholder Management

  • UX Design

  • UI Design

Tools

Pen and paper, Figma, FigJam, Stark Contrast & Accessibility Tools

 

Discover

Product history review and UX audit

We reviewed the tool’s history, including original design rationales and its evolution over time.

 

Legacy “Dot View”

 

The Responses Tab’s “Dot View” was a dashboard of student responses that instructors used to get quick info about:

  • How individual questions were performing

  • How an individual student was doing

Recent Attempted Redesign

 

Due to increasing complexity, changing use cases, and evolving user behavior, a new view was introduced a few years ago in “beta” form. The new page featured:

  • High-level data rollups, as well as granular data by question and by student

  • UI that guided instructors to review questions and students that needed review

  • Important functionality such as resetting or regrading a question.

We audited the Responses Tab’s current functionality and studied data on current usage patterns.

 
 

Even given the new and improved “beta” screen from a few years ago, about 17% of users are still navigating to the dot view. I looked at past research and ProductBoard feedback and determined:

 
 

Getting a quick glance at individual student performance on individual questions was the primary reason for using the dot view.

 

Design

 

Solution ideation

I led several rounds of divergent ideation and design review sessions.

 
 

I completed several rounds of sketching and critique to generate different approaches for modernizing the “dot view” while accommodating new use cases. I used feedback from other designers and engineers to hone and prioritize the use cases.

Solution design

I built and refined high-fidelity screens and a prototype using real student data.

 
 

Based on their feedback, we chose a few elements of our designs to combine into the final path forward in final wireframes, high-fidelity screens, and prototypes. Solutions addressed the need for clear screen-reader behavior, color accessibility, and clear connections between in-text indicators (like highlighted text) and their associated comments.

 

Validate

User Testing

Moderated and unmoderated testing sessions validated our design approach and supported final design refinements.

 
 
 
“Seeing on the last attempt, how successful they are and who’s struggling the most. That’s awesome. That is so cool!”
— Current User
 
“This is a much better version than the one we currently have.”
— Current User
 
 
 

I co-wrote the research plan, built the testing prototype, and helped synthesize the results for the user testing sessions with our team researcher. The results validated our designs and provided a few opportunities for final design refinements.

 Outcomes & Impact

Deliverables

We worked closely with designers, researchers, and engineers to design an effective and delightful student response review tool.

 
 

At the end of this project, we delivered:

  • Detailed and focused reports on the history of the tool

  • Documented design process

  • Wireframes

  • High-fidelity designs