top of page

Design System

GBQ iPhone_FNL.png

The Problem

  • The current grading process for an assessments is very time consuming and tedious

  • A lot of context switching is required to go from a table with student names to a specific student submissions

  • Teachers hesitate to administer assessments using Schoology because of how time-consuming the grading experience is. Instead, they frequently use other platforms and assessment tools.

Old GBQ Screens.png

Old grading experience

My Role

I assisted in the  User Experience (UX), lead the UI design effort  and implementation. Worked collaboratively with the product manager, lead product designer, and development team to ensure quality and consistency were met.

Main Responsibilities

  1. Research assistant

  2. Interaction design details

  3. Visual design exploration (UI)

  4. Implementation

Design Toolkit



invision logo.png



Optimal Workshop


What we wanted to learn?

  1. Users complain about the grading process being slow and tedious. What are the specific interactions that make the process slow?

  2. What are the most important pieces of information users need to be able to grade assessments?


  • Remote discovery interviews

  • Optimal Workshop survey

  • Unmoderated concept testing and open questions

  • Remote moderated usability testing

What we learned during research?

  • When teachers grade assessments, it is more common for them to grade one question at a time rather than looking at a complete assessment per student.

  • Teachers want to be able to compare the quality of the responses as a whole rather than looking at who is submitting each response in order to evaluate student performance more consistently.

  • It is hard to be objective about the students (after all, teachers are human).

  • Teachers need help identifying the areas where students need more support.


  1. By summarizing the questions, average scores, and the grading status together on one page, the instructor would be able to prioritize the questions that need attention. We will know that the hypothesis is correct if the time required to grade an assessment decreases.

  2. By allowing the instructor to grade by question, they obtain a better understanding of how the class performed on the assessment. Potential bias towards some students would also decrease.

Concepts & Iterations

We spent a significant amount of time iterating and testing the main user flow and some of the secondary flows that had high complexity in terms of interactions. We started by getting the main user flow ready (user goes from summary to single question with the ability to see all students on the same screen) and then moved to secondary flows, from highest complexity to lowest.

Concept screenshots here

Early concept wireframes

Usability Testing

  • Remote moderated usability studies (2 rounds of feedback and 8+ sessions).

  • Unmoderated concept testing and open questions via Optimal Workshop (5 rounds of feedback and 500+ responses).

Remote usability testing screenshots

Remote usability testing

Task Analysis Screens.png

Unmoderated usability testing - heat map and task analysis

Component Development

During the design process we identified the need to implement and add a few new components to our design system "Backpack." Below are examples of the components that were designed and implemented as part of the first release of the new assessment grading feature. All design components are fully responsive, accessible and designed mobile first.

Flow Navigation Component

What we call "flow navigation" is one the main interactions developed for how teachers advance from one assessment question to the next. The "flow navigation" component also allows the teacher to navigate back to the main data table where users can gather insights on the questions that were graded.

Flow Navigation Component.jpg

Expanding Header

The "expanding header" component was developed because users needed a way to view the entire assessment question and answer. Users didn't always need visibility into the entire question and through user testing we identified the need to only display a question preview so the teacher knew which question they were grading. The "expanding header" component allows the teacher to be reminded of the question and correct answer without disrupting their grading flow.

Expanding Header Component.jpg

Action Tags

During user testing we received an overwhelming response to the large tag-like component. This tag component is what gave users insight into what items need grading and also where most every user expected to click to enter into the grading flow.

Action Tags.jpg
bottom of page