EdTech Design Sprint Redesign

Pearson Access Next Case Study

Project Overview

The product

Pearson Access is a web application used by schools, school districts and state education officials to administer online tests and collect and manage the results. I was the sole UX/UI designer on the project.

Deliverables

User Interviews
User Personas
Facilitating a Design Sprint
Wireframes
Prototypes
Style tiles with AAA+ color contrast
Design System / Style Guide

The problem

Improve the overall user experience of Pearson Access. Pearson Access Next was difficult to navigate and too complex for most users. Users must choose their organization, then select their session in a large drop-down in the upper right hand corner of the screen every time they log in.

A prominent task menu (above) was used to complete nearly every important task. It was confusing and tool up valuable screen real estate above the fold on every screen. Task menu and data 'shopping cart' waste valuable real estate on every screen.

On the students in session screen a 'shopping cart' menu (above) had to be used to select a session to administer.

Data tables (above) do not show any results by default. This design runs search filters down the left hand column and mostly hides them below the fold. Data entry and edit screens (example below) are poorly designed.

Although a heuristic evaluation shows opportunities for improvements, we will follow a user-centered design process and identify user needs. The business goals of the redesign were to make the new UI to be a selling point for the product and to reduce IT support volume.

The goal

I found that 90% of Pearson Access's users are proctors. They sign in to proctor a single test and most view only a single organization. They also spend all of their time on the “Students in Session” screen.

I proposed running an in-person 1 week Design Sprint focused on developing a prototype focused on streamlining the usability of the four main use cases for these users. The prototype would be just the students in session screen where most users spent their time. The goal of the redesign would be to optimize the four leading tasks:

Finding Sessions
Finding Students
Printing Test Tickets
Monitoring Testing

My role

I was the only designer in my division at Pearson. I was responsible for UX of two complementary products, TestNav, the student-facing application that testers used to take standardized tests and also Pearson Access Next, the teacher/admin facing application that is used to proctor tests and collect results.

Responsibilities

Facilitated kick-off Design Sprint, created wireframe documentation and high-fidelity mockups and prototypes. Answer UX questions from developers on TestNav.

U.S.A. Map showing the location of PA Next User interviews

Foundational User research

Summary

I conducted more than 14 in-person user interviews in 6 states. In the interviews I clarified pain-points and identified key tasks. I also talked extensively with colleagues in technical support to understand what issues users have with the product most often.

Most users complained about the difficulty in finding their session, moving students from one session to another and re-starting students when something went wrong.

User Interviews

I created a Venn-diagram of user roles to show where they overlap. The insight was that only Students in Session was used by all users. I also dropped my notes into Wordle to see common themes. Some of the most useful user feedback was captured in verbatim quotes from users below.

Wordle created from user interivew notes

Most wanted feature: "Reducing number of clicks to create a student, editing a student."

Most difficult task: "Searching for a session, creating a student"

Teacher in Tallahassee Florida

Most difficult task: "Searching for a session, creating a student"

Teacher in Tallahassee, Florida

"Student test status is the most important filter.It should not be hidden under a toggle."

"It would be nice if there was a column named 'status' and you could sort that."

DAC in Tampa Bay Area, Florida

Foundational User research

Pain points

Difficulty finding sessions
Difficulty finding students
Difficulty printing test tickets
Challenging monitoring testing (fixing issues)

User Persona

I created personas to determine who our users are, what their goals are, what their frustrations with the current system are and what their key behaviors are.

Design Sprint

Over a four day sprint we developed a clickable prototype of the students in sessions page. To evaluate the prototype (pictured below), it was shown to a dozen PA Next users who agreed that it simplified the user experience for the four targeted tasks.

Exploration and Iteration

Wireframes I created worked out the details and UI elements not present in the Design Sprint prototype. I designed new simplified interfaces for moving students between sessions and entering student data into the system. New data tables pictured below feature sort-able toggles on the table headers and a row of filters to allow the user to quickly search a column for an item.

Previously, adding or removing a student to a session was a three-step process. Above, it is redesigned as a single screen using a Dual Listbox, making moving a student between the two lists visible and more understandable than in the old system.

High-Fidelity Designs

High-fidleity mockup of designed PA Next

In addition to usability improvements, I designed comps that incorporate new global corporate colors and fonts. Status colors needed to match the colors used in previous versions of Pearson Access and all colors and fonts had to meet AAA+ accessibility standards. I designed multiple breakpoints for Pearson Access because the new website would be a fully-responsive SPA (single page web application) using Angular 2.

Optimizing the proctor experience was the main goal the redesign, but the project also added a new dashboard for administrators that displays the most important data to those users (and shows off the new colors).

The dashboard doesn't just provide information. Two buttons next to each session shown on the dashboard allow power users to quickly jump to the dashboard of a session that is in trouble. Tapping a portion of the circle graph links power users to a filtered view of the student in sessions screen showing those session that match the selected status.

Screenshot of the new PA Next style guide

To support implementing and maintaining the new visual design system I created a basic style guide website (above) that contains comps of all screens and comps of each major UI component, the color palette, fonts and text styles.

Redesign Highlights

I collaborated with two additional designers to create style tiles for the redesign (one example is shown above). Partnering with the accessibility team, I adjusted the color palette to ensure compliance and applied the updated style guide to wireframes, transforming them into high-fidelity mockups. The sessions tab displays all sessions by default for most users, while a row of filters at the top of each data table simplifies the search process.

High-fidelity mockup of redesigned monitor sessions screen

The new monitor sessions screen is easier to scan at a glance and clicking on a status (like 'Exited') sorts the table below to only show those students in that status. The left-hand menu is collapsible to free up more screen space on low resolution school monitors. All users see the same monitor sessions screen UI regardless of permissions, but with no blue fly-out menu for proctors and fewer options in the black portion.

High-fidelity mockup of redesigned dashboard screen

Sessions screen for administrators.

High-fidelity mockup of redesigned sessions screen

A product tour introduces users to new features and is available to help users if they get stuck in a Help menu that consolidates help info at the top of the page above the fold. The redesigned interface and integrated help should help reduce calls to technical support.

Outcome

Results and what I learned:

A Design Sprint helped our team develop a minimum viable product and validate it early in the design process.
I learned a lot about a11y requirements, which go well beyond color contrast and font sizes.
On this project I lead UX and visual design.

Early Monitor Sessions Prototype Final Monitor Sessions Prototype

Want to work together?

If you like what you see and want to work together, get in touch!

chuck@chuckmcquilkin.com