HIPAA Help Center

This web application is massive. It's like the Russian nesting doll of applications. It may just look like one big app but in reality it is a complex gathering of smaller apps that have to work together seamlessly for the whole app to work properly.

The purpose is to help smaller healthcare organizations manage their HIPAA Compliance. Breach fines are expensive and can easily put a small practice out of business. In 2015 the government changed the mandate for HIPAA compliance in smaller organizations to now be held to the same level as larger organizations, like a hospital. The problem for these smaller companies is that they seldom had budget, staff or training to meet the new requirements. Enter the HIPAA Help Center.

The Discovery:

I was brought in by Aperia Solutions to clean up a mess of an application that was initially created by their "B-Team" of business analysts. I sat down in a conference room with a new internal BA lead and the app to try to set up a 5 person office. Three hours later we were still unable to get past the office setup process. We weren't even able to start working on setting up the requirements needed to reduce any Risk in the compliance rating. The concept for the app was brilliant. The execution was devastating.

Screen Shot 2019-01-13 at 10.53.36 AM.pn

The Issues:

I was able to identify 3 main issues that were holding this app back from being usable.

The on-boarding process required a single user to input ALL of the data for the company (including all locations), the full workforce and designate team roles. Only after all that information loaded could that user, "Launch" the site.
The subscription sign-up process was confusing and extensive.
Once in, the site setup had to be 100% complete to start managing risk.

Essentially, I had to tell them that if this app was a wrecked car, it would be totaled.

HIPAA Proposal_Page_02

HIPAA Proposal_Page_03

HIPAA Proposal_Page_12

HIPAA Proposal_Page_02

1/11

The Re-Engineering:

My goal was to simplify everything from the sign up process to the setup process for the company workforce and locations. I needed to re-design this application to convert and retain accounts. I had to present my plans at every step of the process to get approval from the stakeholders. My method for presentations is short, simple visuals and a solid verbal performance. It commands attention and allows for the development of more interpersonal interactions.

HIPAA User Flows_Page_2

HIPAA User Flows_Page_3

HIPAA User Flows_Page_8

HIPAA User Flows_Page_2

1/7

New User Roles:

I boiled the amount of User types to 5 roles (the Basic User can also have other functions assigned but it's not a true 6) down from 12. The original functions didn't go away but were nested in the right User. The model was to sell to small offices with an average staff of 5 - 10 employees. Having more roles than employees in the organization didn't make a whole lot of sense. From there I plotted new user flows. These were adjusted over time but this gave us a great jumping off point.

To keep the project on track we ran branding and UI upgrade concurrently.

HIPAA_BrandingDesign_v1_Page_02

HIPAA_BrandingDesign_v1_Page_03

HIPAA_BrandingDesign_v1_Page_20

HIPAA_BrandingDesign_v1_Page_02

1/11

The Re-Brand:

They had been using a pretty standard and generic healthcare symbol that didn't even begin to represent what the application was about. The logo mark needed to be addressed so that it was ready by the time it came to designing the UI.

We had also started layout of the interior of the application from one of the easiest modules to get a head start on during the UX phase. While this would still evolve it became a foundation for us to work from.

HIPAA_BrandingDesign_v3_Page_4

HIPAA_BrandingDesign_v3_Page_6

HIPAA_BrandingDesign_v3_Page_4

1/2

The Final Re-Brand:

Over the course of several rounds of design iterations we narrowed it down to a stylized healthcare cross that resembled a lock for security. The color blue was used to demonstrate stability and professionalism.

The final style for the app was selected and as wireframes were finished they would each be designed out using these elements. The style chosen had good visual hirarchy and a clear color coded system.

A demo was made for development from over a thousand pages and interactions we designed.

Style Tile:

I created this style tile and distributed it to my design team and to the development team in Vietnam. We all worked from the same asset playbook. This was incredibly important for this sized project with all of my designers contracted from remote locations. This ensured we were turning over consistent design assets to the dev team and gave the developers a guideline to fall back on if inconsistencies arose.

Final Layouts:

Over this 18 months project myself and my design team created over 1 thousand pages both in interactive wireframes and then again in design. Because we were working with a Vietnamese development team, every interaction had to be designed and documented and illustrated in InVision. Our data and copy had to be accurate to avoid any confusion so no lorem ipsum was to be used in the final demo.