Category: UI / UX, Web Development

Role: Lead UI/UX Designer, UI Developer
Year: 2018 – 2019
Client: Centers for Medicare and Medicaid Services (CMS)
Technology: EJS, Angular, Node.js, Adobe Illustrator, InVision, OptimalWorkshop

View the live site

QNP Devices

Redesigning an outdated healthcare website

The QualityNet project used user-centered design to redesign an outdated public-facing CMS website that provides healthcare quality improvement news, resources, and data reporting tools to healthcare providers. The existing site contained hundreds of pages and thousands of downloadable files – it was over a decade old, didn’t pass accessibility standards, and did not scale well for growing content.

QNP Devices

Initial site analysis

The first step to redesigning the QualityNet website was to analyze the existing site. The site contained hundreds of pages with a variety of content, so the analysis included documenting and categorizing every page on the site in a methodical manner. I created a site map to visualize the website’s hierarchy and gain an understanding of the existing information architecture.

QNP Devices

Internal user interviews

We conducted a series of user interviews with internal content contributors, the CMS contractors responsible for creating content for the QualityNet website. The interviews provided insight into the reasoning behind the existing content structure and areas for improvement. It also included a card sort exercise in OptimalWorkshop that was used to help understand the users’ thought model for content organization.

QNP content contributor quotes
QNP content contributor card sort results

Low-fidelity wireframes

Based on the content contributor user research, I created and iterated upon on initial low-fidelity wireframes for the QualityNet redesign in Adobe Illustrator. The existing site analysis, internal user interviews, and card sort exercise drove the initial designs. The low-fidelity wireframes allowed for quick and iterative exploration in the early stages of design.

QNP wireframe 1
QNP wireframe 2
QNP wireframe 3

Wireframe user testing

We created a clickable prototype of the wireframes using InVision to conduct task-based usability testing and A/B testing on the design with end users. The end users included hospital administrators that regularly accessed the QualityNet website and were responsible for submitting the facility’s quality reporting measures to CMS. Users were asked to complete a series of tasks on the wireframe prototype while we measured the task success. We also conducted A/B testing with potential designs that we were deciding between.

QNP wireframe task-based testing results

QNP wireframe A/B testing results

From wireframes to mockups

After the task-based usability testing, wireframe designs were iterated upon based on user testing findings. Wireframes were then transformed into high-fidelity mockups in Adobe Illustrator. The style of the website needed to abide by the CMS Design System, featuring patriotic colors, blocky appearance, and a stoic look and feel. The CMS Design System was created to encourage consistent branding across CMS applications.

QNP wireframe to mockup
QNP mockup

Mockup usability testing

We conducted mockup usability testing with end users with the new high-fidelity mockups. The usability testing consisted of task-based usability testing and the System Usability Scale (SUS). We retested tasks that we tested in wireframe usability testing in order to quantify improvement in the design. The SUS was used as a quick and dirty method to provide a trusted overall usability rating for the proposed redesign.

QNP mockup task-based testing results
QNP mockup system usability scale

Mockup iterations

Mockups were iterated upon based on the mockup user testing findings. Various styling options within the constraints of the CMS Design System were created, compared, and ultimately finalized.

QNP mockup 1
QNP mockup 2

Baseline user testing

We conducted a final set of baseline usability testing and first impression testing on the existing site and redesigned mockups. The testing included a first impression test, first-click test, and moderated remote usability test. End users were asked to complete a series of tasks on the existing site to provide baseline metrics to compare against for any future user research. Users completed a first impression survey for the existing and redesigned sites to inform quantitative improvement. See the full Baseline User Testing Findings Report

QNP baseline task completion
QNP baseline vs. redesign first impressions

The final site

Once the design was finalized, I coded the QualityNet website UI and migrated/reformatted content from the old site to the new site. I determined how it would be implemented on our headless content management system by identifying content types, content type metadata, and page templates. The content management system is Angular-based and dynamically renders the public site via EJS page templates so the content fields are customizable and easily editable by a non-technical content manager. I identified all of the necessary page templates, coding all of the EJS page templates and formatting them so they were consumable by the content management system. Once the organization and structure of the site were set up, I spent a couple weeks building the new QualityNet on the content management system from the ground up.

The redesigned QualityNet was successfully deployed in September 2019 and receives millions of hits. Improvements to the site include faster performance, updated look and feel, simplified and scalable navigation, responsive design, increased accessibility/508 compliance, and more. The redesign involved many iterations of low-fidelity wireframes to high-fidelity mockups and multiple rounds of user testing. The final design matches modern CMS branding and greatly improves the site’s overall usability.