Design System | Mysite

Design System Development

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 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

Research assistant
Interaction design details
Visual design exploration (UI)
Implementation

Design Toolkit

Sketch

Invision

Optimal Workshop

Research

What we wanted to learn?

Users complain about the grading process being slow and tedious. What are the specific interactions that make the process slow?
What are the most important pieces of information users need to be able to grade assessments?

Methodologies

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.

Hypotheses

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.
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

Unmoderated usability testing - heat map and task analysis

Schoology Backpack

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.

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.

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.

Design System Development

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 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

Research assistant

Interaction design details

Visual design exploration (UI)

Implementation

Design Toolkit

Sketch

Invision

Optimal Workshop

Research

What we wanted to learn?

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

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

Methodologies

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.

Hypotheses

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.

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

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

Unmoderated usability testing - heat map and task analysis

Schoology Backpack

Component Development

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.

Expanding Header

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.

Prev

Next