HARP

Category: UI / UX, Web Development

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

View the live site

HARP login in context

3 months to deploy the MVP

HCQIS Access Roles and Profile (HARP) is a secure identity management portal provided by the Centers for Medicare and Medicaid Services (CMS). Creating an account via HARP provides users with a user ID and password that can be used to sign into many CMS applications. The HARP team had 3 months from start to finish to deploy the minimum viable product (MVP) HARP application.

Early designs

We didn’t have a lot of solid requirements at the beginning of the 3 months. So, I created initial wireframes and InVision prototypes for the MVP functionality based on what we knew. MVP features included HARP registration, login, account management, and Security Official functionality. When the whole team met in person at our quarterly Program Increment (PI) planning event, we reviewed the wireframes and used them to facilitate requirements discussions. I updated the wireframes in real time during discussions so that by the end of the PI planning we were all on the same page about the MVP HARP design.

HARP wireframe - login

HARP wireframe - registration

HARP wireframe - Security Official

Building the base UI

Right after the PI planning event, we started developing the Angular UI. I created the initial Angular app and barebones components so that the development team had a base UI to work with. This enabled developers to quickly start developing HARP services and functionality.

HARP base UI

Designing in code

The base Angular UI did not include any high-fidelity styling. It was only intended to give the developers a start due to the accelerated timeline. As such, I designed the application’s look and feel directly in code which helped speed up the development process.

HARP-registration_profile-infog

Releasing the HARP MVP

With a lot of collaboration and late nights, the team successfully designed, developed, and delivered the MVP HARP application on time and in only 3 months (the client was very happy). Soon after in December 2018, we integrated our first CMS application with HARP.

Training resources

For security purposes, users are required to verify their identity when they create a HARP account. Because of this, the registration flow is not as simple as a typical site registration. Along with FAQ help content, I created a series of Youtube training videos in Adobe Premiere to guide users through HARP registration and other functionality.

HARP in production

HARP continues grow and evolve in production, integrating with 20+ CMS applications and over 200,000 user accounts. We deploy enhancements on a regular Agile cadence and continue to conduct user research on HARP in production. Based on user feedback, we create user stories and designs for enhancement recommendations. Since the original 3 month MVP was deployed, HARP has added new functionality including role requests, organization management for the onboarding team, and a user triage tool for the help desk. We have added countless enhancements and continuously improve the application.

HARP-login_login

HARP-registration_profile-infog

HARP-registration_confirmation-remote-proofing

HARP-userprofile_profile-info

HARP-userprofile_two-factor-devices-add-device

HARP-userroles_manage-roles

HARP-userroles_select-program

HARP-SO_user-lookup

HARP-SO_role-requests