DATE

November to December 2020

ROLE

Product Designer

DESCRIPTION

A user interface redesign project with the goal to provide clear data and high level insights to teachers for classroom assignments

Context

teacher
Who is the assignment report for?

The assignment reports are generated after homework is assigned to the students. Primarily to be used by the teachers.

search
What are the teachers trying to do with the report?

Teachers are addressing two main concerns. First, what problems is the class struggling with. Second, which students are struggling the most.

annoyed
Why are we redesigning the report?

The current report fails to do the jobs outline before and makes it difficult for teachers to understand the outcome of a homework clearly.

The state of assignment report before redesign.

The few things that may pop out immediately.

- Difficulty understanding meaning behind colors & symbols
- Difficulty in parsing the meaning behind "PRABMPWB"

old-assignment

Known usability issues

Before we even began doing any external research, we had feedback available from our customer success team who ran demos & teacher training. They informed of us some high level issues existing in the software that we priortized in a initial set of wireframes

old-assignment-issues

Issue #1: Teachers are overwhelmed by the information

When looking at the assignment report, teachers are often confused because each cell contains multiple pieces of information like the student answer, correct or incorrect, percentage score or "answer requested".

Issue #2: Teachers have to go on a new interface to see questions

A very common interaction of viewing the question when browsing the report is cumbersome and open a new tab for each question, taking teachers away from the context of the report

grading-scale-issues

Issue #3: Teachers find the symbols for grading (used by ASSISTments) confusing 

  • Check: Correct
  • Green cross: Partially Correct
  • Red cross: Correct with more than 3 hints or attempts
  • Red cross with yellow background: Incorrect

Wireframes

Based on the learnings from internal feedback and discussions, the team decided that the first step would be envisioning what the new assignment page could look like. For me, this mean wireframing some mockups to play with high level concepts.

The wireframes included ambitious graphs aimed at the job to be done for teachers; namely, understanding which questions students are struggling with and what students are struggling the most.

wireframe-1-1

I played with the idea of different graphs with key results. To make it such that teachers don't have to look at raw scores to get their answers.

wireframe-1-2

One of the key areas to address was opening up questions on the same page. The sidesheet UI addressed that well; with room for adding additional information around the question as the product grows

wireframe-1-3

Another improvement here was giving teachers the count of users who have been assigned and who have turned in their report without having to go back to Google Classroom to get that data.

One exploration lead me to see how we can provide detailed data to our users without making it available at all times. The expanded table rows came as a feasiable interaction for that addressing that problem.

wireframe-1-4

A big area of exploration for assignment report was conveying the different meanings with grades. We tried a bunch of explorations to test how we can convey the most meaning to our users with help of color, text and icons.

grading-1-1
grading-1-2
grading-1-3

Usability Testing

Once we had the wireframes internally tested with customer support, program managers, etc. We set to explore if teachers can understand the new interface and perform a few tasks like

  1. Quickly derive from the graph the questions studetns are struggling with.
  2. Understand the new grading scheme.
  3. Understand the interaction with get to the full question text.

For the test we recruited five math teachers with varying experience using ASSISTments in their classrooms from 5 years to 6 months to ensure we are getting a meaningful sample. All the testing was done over zoom with program manager present to take notes and listen to user feedback.

Learnings

#1: Teachers love the ability to browse questions inside the report

This was the biggest hit, since the previous iteration had them open into a new window and when presenting to the class on a projector this led to additional wait times and removing the question from the context of the report. One key feedback here was ability to expand the drawer for a scenario where the question might be too small for students to read sitting in the back of the classroom.

 

wireframe-1-3
#2: Teachers love the color coding system

The new color coding system followed the basic red, green and yellow colors we find at traffic stops so it was very intutive for teachers to understand the meaning behind the score.

wireframe-1-4
#3: Teachers couldn’t easily differentiate between “crosses” and “triangles”, but were quick to adapt


The concept of crosses for incorrect attempts and triangles for indicating number of hints used was definitely confusing but teacher could easily explore the table and understand the correlation between the data and symbols. This was definitely an area to explore and improve the interaction and reduce the time to learn.

grading-1-3
#4: Teachers love the bar graph to quickly decide which question to teach in the classroom


Bar graph was a hit as it highlighted the question that needed to be covered in the next session without reading the data. The other graphs meaningful; didnt provide any practical applications for the teachers.


wireframe-1-1
#5: Teachers were excited for the list of students on the top

The quick list on the top meant that teachers didn't have to go to Google Classroom or other pages to get data about this assignment. This definitely helped teachers help decide if they should even grade the assignment when enough students haven't completed their work.

wireframe-1-1

Accessibility 

At this point, one of the questions came up was around the accessibility of the green, orange and red. We wanted to make sure we ensure all teachers can easily differentialy between the colors for quickly understanding the data. We did have the scores to assist with the meaning but we mapped out how all these colors would appear for different users.

At the end we decided to go with default operating system blind mode configurations to handle these scenarios.

accessibility

High Fidelity Wireframes

After getting a bunch of feedback we decided to move the next step and in-corporate the feedback directly in those wireframes. For our design system, we used VueJS which is based on material design components, that allowed us to move quickly as a team and spend more time focusing on user interactions.

design-system

Inspiration

A part of my process is explore how UI can be styled for different areas to convey meaning without cluterring the interface. Here are a few examples of images I used

inspiration-1-3
inspiration-1-1
inspiration-1-2
high-level-figma

High level overview of the figma page

Assignment Page 

 We updated the assignment page with a few additional elements

#1 Assignment Status
We took the list of assigned students and broken them down by phases of writing the assignment to reduce additional clicking and sorting through the list of students. The statuses we added were Not started, In Progress, Completed and Assigned.

 #2 Performance Summary
We decided to make improvement to the graph and support horizontal scrolling and filtering to ensure teachers can interact with the graph to get all information they needed.

#3 Detailed Report
We added additional options at the top of the table to help users with understanding the scoring system. The ability to hide certain system columns like average score, time taken to complete assignment. Lastly, additional menus for exporting the table to CSV, hiding student names, etc.

high-fi-landing

Assigned Modal 

Each of the assignment status cards was made interactive so teachers can see which students belong in that bucket and when was their last interaction with the report. 

The goal here was to eventually built functionality to nudge or remind students to continue making progress on the report.

high-fi-student-list

Detailed Score Card 

We made the pills interactive to ensure that teachers can get all detailed information about the student score and understand the story behind it without having to go through multiple clicks.

This card displayed information about the score, the answer, the attempts and the hint that was shown to this student. The card was inspired from Google calendar where you can see additional information about an event when you click on it.

high-fi-information-card

Question Sidesheet 

The question side sheet was improved based on the feedback we got from the teachers by adding an expanded view, additional tags about the standard of the question. 

We also decided to move towards having tabs because "Instructional Recommendation" was a huge part of a grant we were working on and needed high priority on the page.

high-fi-sidesheet

Before & After

A before-and-after comparison of the assignment report page

collaborate

Collaboration

The project was designed by me from start to finish with a lot of input from different functions of the company. Customer support played a huge part in providing our initial feedback with the existing assignment report. The program manager & the VP of product provided meaningful feedback on the many iterations of the product. Lastly, the front-end engineers played a huge role in helping define the UI elements that would be possible with VueJS and how we can stay within the constraints.

Challenges

The biggest challenge in the process was ensuring the needs of all different stakeholders were met without making the user experience too cluttered.

The most impactful area of negotiation and alignment was around the grading scheme since the CEO had strong opinions about how things needed to be done. Ultimately, with user feedback it was easier to articulate the decisions and convey the need for change.

3202909
assumptions-1

Learnings 

Everytime I execute something there is something new to learn. In this case, knowing that no one knew what the new version of assignments would look like. Exploring and iterating around the problems we knew helped us create a meaningful solution that solves problems for teachers and improves their interaction with our product.