Verification Services Redesign

Designing Clarity Across Handoffs

Overview

The National Student Clearinghouse is the largest source of enrollment and degree data for all high schools, colleges, and credentialing organizations in the United States. Employers across the country use it to verify job applicants’ education backgrounds. The verification product line represents 60% of the revenue of the Clearinghouse, which is a $100m non-profit.

I am the lead UX designer for the Verification Services and helped redesign the interface used by background screener companies and people in HR to perform these validations. It hadn’t been touched for nearly ten years, and needed to evolve to support new Clearinghouse initiatives. In addition to refreshing the design language, I helped the product team rethink the structure of the verification process to clarify and expedite the process for employers. Rounds of moderated research revealed key improvements that will have a ripple effect across the hundreds of thousands of verifications performed every year. The revenue of the Verification product line grew 50% over a two-year period after the redesign.

Project Goal

Create an app that will

Make the new verification UI easy to learn for people who use the application intermittently
Document and visualize verification timeline and clarify the status of verification and give immediate guidance on next steps
Create a fresh UI with subtle nuances while applying the corporate branding

My Role

I was the UX design lead on the team. I also conducted moderated usability study on existing Verification Services customers to get feedback. The new Verification Services UI was launched in phases in 2021 and 2022.

Skill/Tool Used

Product Strategy
User Research
Task Analysis
Stakeholder Interview
Wireframing
Interaction Design
Information Design
Visual Design
Design System Development

Problem Defined

One goal of the redesign was to clarify the status of verification requests for people who use the application intermittently. These infrequent users found themselves having to re-learn the existing interface each time they used it, so I sought to introduce design patterns that clearly display key information while avoiding visual busyness and heavy-handedness.

Verification Services transaction index for a school user, listing requests with statuses such as New, Research required, and Discrepancy reported

Whereas previous overview pages were short on information and long on explanatory copy, I designed patterns for the verification timelines that are quickly scannable and give immediate guidance. Since guidance shown to users in the timeline varies according to their account, verification type, and other factors, I documented permutations of the verification statuses for the development team. Usability tests helped us hone the language across variations of these pages

Verification request detail page for one student, showing a confirmed Master's degree with the request timeline and verified degree details

Annotated map of all completed-request states, covering confirmed, unable-to-respond, cancelled, pending-school-research, and consent-needed variations

I also documented design patterns based on Clearinghouse corporate branding guidelines, which laid the foundation for the company-wide design system the design team built later. The pattern library was also built with accessibility standards in mind.

Pattern library for the Clearinghouse design language: typography, buttons, form fields, checkboxes, date pickers, tags, and notifications

Result

By improving the verification service user experience, the administrative burden was lessened for employers, background screeners, schools and the Clearinghouse: employers and background screeners are able to come to conclusions about applicants more quickly and confidently, and schools have shorter turnaround times and the Clearinghouse fields fewer support calls.

Key Solution Elements

Slide: help users choose the right verification — pricing cards for each verification type, a type picker, and past-verification search

Slide: educate at the right moment — order flow with contextual guidance shown inline on the verification details step

Slide: shopping-cart-like experience — order summary beside the billing and personal information form

Slide: providing context — request form explaining why each field is asked for, and an order confirmation with per-item verification statuses

Takeaway

Work broadly to 75%, then refine.

One of the business analysts on the project once said: “this project is a beast!” This is no exaggeration. But as we worked through auditing the existing verification website and diagramming the flow of information of the current system, I began to identify ways that this complexity could be handled through UI improvement. Instead of laboring over small sections of the design to perfection, establish an overall structure and bring core features to moderate-high fidelity before taking a final pass. Edge cases and unforeseen complexities reveal themselves as you work across the whole terrain of the app, allowing time to prioritize refinements before launch.

Over the course of working on this project, I learned the importance and scale of the information the organization is providing access to; it’s what ensures the integrity of our country’s workforce. Some of my most memorable projects involve helping behind-the-scenes organizations like these improve their utilities in ways unseen by a majority of the public. And there’s so much of this work to be done.

Business Impact

Reduced Verification Turnaround Time

Verification turnaround time reduced by 36%

Reduced Support Call Volume

Support Calls related to verification requests dropped by 50%

Reduced Internal User Workload

Manual workflow was streamlined by automation. The internal users’ workload has reduced by 27%

Product NPS Score

Customer NPS for the Verification product increased 11 points YOY after launch

Design Impact

Establish the Visual Language of the Corporate Design System

Components in this project laid the foundation for the Excelsior design system of the organization

Incorporated corporate branding guideline

Successfully created UI color palette and type system based on corporate branding guideline.

Implemented accessibility best practices

Conducted thorough accessibility audit of design elements to ensure color contrast and interaction modes meet accessibility standards

Established developer hand-off best practices

Created clearly organized Figma file page structure template to ensure effective collaboration among design, product and engineering.