Problem
Amid COVID, a surge in user signups from online-teaching teachers led to a spike in customer support requests, highlighting usability gaps in our software for classroom state comprehension.
Outcome
A redesigned information architecture, along with interaction design changes, reduced the time it takes for teachers by 80% to answer which students are struggling and identify the problems the class is struggling with.
Streamlining Assignment Reports for Busy Math Teachers
Assignment reports are produced once homework is assigned to students and are primarily intended for teacher use. Our main users—teachers—are swamped with lesson planning, grading, and various other tasks.
They have limited time to engage with assignment reports, as evidenced by low engagement and high drop-off rates among new users.
Additionally, many found our proprietary grading system challenging, hindering their use of the Assessments software.
My Role in the project
As the Product Designer, I collaborated with our VP of Product & Engineering, Lead UX Engineer, Teacher Experience Team, and Software Engineers to refine the assignment report.
My responsibilities included internal staff interviews to pinpoint issues, teacher interviews for problem identification, grading system redesign, interface design, and conducting usability tests for further improvements.
Objective: Enhance Teacher Usability & Adopt New Design System
Our VP of Product & Engineering aimed to revamp the software for better teacher usability while integrating our new VueJS-based Material Design system.
The target was to launch this update within two months, in time for the new school year.
Initial Insights from Customer Success & Teacher Experience Teams
Before diving into external research, we gathered existing feedback from our in-house teams who conduct demos and teacher training. This helped us prioritize key issues in our initial wireframes:
1.
Information Overload
Teachers found the assignment report overwhelming, as each cell displayed multiple data points like student answers, correctness, and percentage scores.
See Image 2 Below.
2.
Question Clutter
Teachers had to open a new tab to view each question, disrupting the report's context.
3.
Grading Ambiguity
The grading symbols used were not intuitive, leading to misunderstandings.
As seen in Image 1 below
Check: Correct
Green Cross: Partially Correct
Red Cross: Correct but with multiple hints/attempts
Red Cross on Yellow: Incorrect
Image 1: Ambiguous Grading System with Confusing Symbols and Colors
Image 2: Current Dashboard Overloaded with Complex Information
Wireframing Phase
Informed by internal feedback, our first step was to conceptualize the new assignment page through wireframes that explored high-level ideas.
Visualizing Class Performance Through Charts
The wireframes featured innovative graphs designed to help teachers quickly identify struggling students and problematic questions. Various graph types were considered to eliminate the need for teachers to sift through raw scores.
Visualizing Student Performance, Score Distribution, and Overview
In-Depth Student Metrics for Teacher Insight
In-Page Question Viewing
A key improvement was enabling questions to be viewed on the same page via a side-sheet UI, which also allows for future feature expansions.
In-Report Sidebar for Question and Answer Viewing
Tracking Assignment Completion
We also added a feature to show the number of assignments assigned and completed, eliminating the need for teachers to revert to Google Classroom for this data.
Data Accessibility
I explored ways to offer detailed data without overwhelming the user interface, settling on expandable table rows as a viable solution.
Assignment Status: Assigned vs. Completed Counts
Expandable Rows for Question-Specific Details
Grade Redesign
A significant focus was on rethinking how grades are displayed. We experimented with various combinations of color, text, and icons to convey meanings more effectively.
Iteration #1
Iteration #2
Final Grade Indicators: Utilizing Green, Orange, and Red
First Round of Usability Testing
After internal validation of the wireframes with customer support and program managers, we conducted usability tests with teachers to assess:
Their ability to identify struggling students via graphs.
Comprehension of the new grading system.
Interaction with the full question text.
We recruited five math teachers with experience ranging from 6 months to 5 years using ASSISTments. All tests were conducted via Zoom, with a program manager present for note-taking and gathering user feedback.
Insightful Takeaways
1.
Question Ease
Teachers appreciated the ability to view questions within the report, eliminating the need to open new windows. This was especially useful when projecting to a class. One suggestion was to allow the drawer to expand for better visibility at the back of the classroom.
2.
Intuitive Colors
The intuitive red, green, and yellow color scheme was well-received, making it easier for teachers to understand grading at a glance.
3.
Symbol Challenge
Teachers found it challenging to distinguish between "crosses" and "triangles" initially but adapted quickly. This area requires further refinement to reduce the learning curve.
4.
Quick Highlights
The bar graph was effective in quickly highlighting which questions needed attention, offering immediate practical value.
5.
Student Overview
Having a quick list of students at the top eliminated the need to switch to Google Classroom, aiding teachers in deciding whether to grade assignments based on completion rates.
Accessibility Considerations
During the design process, questions arose about the color accessibility of the green, orange, and red indicators. While the scores provided context, we aimed to ensure that all teachers could easily distinguish between these colors for quick data interpretation.
Ultimately, we opted to align with default operating system settings for colorblind modes to address these scenarios.
Refined High-Fidelity Wireframes
Following extensive feedback, we advanced to the next phase by integrating these insights directly into our wireframes. Utilizing VueJS, based on material design components, allowed us to expedite the design process and focus more on user interactions.
1.
Assignment Status Categories
We segmented the list of students by their assignment progress stages—Not Started, In Progress, Completed, and Assigned—to minimize extra clicks and sorting.
2.
Enhanced Performance Graph
We refined the graph to support horizontal scrolling and filtering, enabling teachers to extract all the information they need effortlessly.
3.
Comprehensive Report Options
We added a toolbar at the top of the table for better score system comprehension. Features include the ability to hide specific columns like average score and time taken, as well as export options.
Interactive Assignment Status Cards
Each status card was made clickable, showing which students fall into each category and their last interaction with the report. The long-term aim is to add features that nudge students to continue their work.
Interactive Score Cards
Each status card was made clickable, showing which students fall into each category and their last interaction with the report. The long-term aim is to add features that nudge students to continue their work.
Enhanced Question Sidebar
Based on teacher feedback, we improved the question sidebar by adding an expanded view and additional tags about question standards. We also introduced tabs to prioritize "Instructional Recommendations," aligning with a significant grant we were pursuing.
Final thoughts & takeaways
1.
Collaborate with everyone
I spearheaded the project from inception to completion, collaborating closely with various departments within the company. Customer Support was instrumental in offering initial feedback on the existing assignment report. Both the Program Manager and the VP of Product contributed valuable insights through multiple product iterations. Finally, Front-End Engineers were crucial in defining feasible UI elements using VueJS, ensuring we adhered to technical constraints
2.
Balanced UX
One of the key achievements was successfully balancing diverse stakeholder needs while maintaining a streamlined user experience. The grading scheme was a focal point of collaboration, especially given the CEO's strong vision. User feedback proved invaluable, enabling us to articulate decisions clearly and advocate for meaningful change
3.
Innovative Learning
Each project execution offers fresh learning opportunities. In this instance, the unknowns surrounding the new version of assignments became a catalyst for innovation. Through focused exploration and iterative problem-solving, we crafted a meaningful solution that enhances teachers' interactions with our product.