QualityNet

Category: UI / UX, Web Development

Technology: EJS, Angular, Node.js, Adobe Illustrator, Adobe Premiere, InVision, OptimalWorkshop

Role: UI/UX Design Lead, UI Developer

Client: Centers for Medicare and Medicaid Services (CMS)

View the live site.

The 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. Improvements 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 UCD process included:

  • Compiling existing research + site analysis
  • Internal user interviews with content submitters, including a card sorting exercise to understand the users’ thought model for content organization
  • Initial low-fidelity wireframes based on feedback + task-based usability testing and A/B testing with end-users
  • Design iterations and high-fidelity mockups + task-based usability testing and System Usability Scale
  • Comparative testing + first impression testing

Sample Usability Test Findings Report: [pdf-embedder url=”http://saraneel.net/wp-content/uploads/2019/12/20180712_CMS-ESS_Baseline-User-Testing-Findings-Report.pdf”]

Along with redesigning the public-facing site, the team also had to design and build a custom content management system to support it. Design and development worked closely together to ensure the content management system design was in sync with what was needed for the MVP QualityNet.org redesign as well as the needs of the stakeholders. After much coordination and testing, the pieces came together and the team successfully deployed the public-facing redesign and the custom content management system.

I was the UI/UX design lead and UI developer responsible redesigning the public-facing website, conducting and observing user research efforts, and coding the website UI. I iterated upon wireframes and mockups based on feedback from user study sessions until the design was solidified. Then, I determined and implemented the site content management structure and organization, including the content types, content type metadata, and page templates so that the site could be modified by a content manager via the custom content management system. The content management system is Angular-based and dynamically renders the public site via EJS page templates so the content fields are customizable. Once I identified all of the necessary page templates, I coded all of the EJS page templates and formatted them so they were consumable by the content management system. Once the organization and structure of the site was set up, I spent a couple weeks building the new QualityNet.org on the custom content management system from the ground up.

Training video

Training video I created with Adobe Premiere walking through the redesigned QualityNet.org.

Screenshots of Coded UI

QNP-index
QNP-inpatient-overview
QNP-measures
QNP-data-management
QNP-program-overview