drawing Created with Sketch.

Creating the Parallon Enterprise Style

Client:
Parallon
Role:
Sr. Designer
Skills:
UX, Wireframing, Visual Design, Icon Design, Front-End Dev

Problem

Parallon is the Revenue Cycle Management solution that powers Fortune 50 Hospital Corporation of America (HCA). Parallon actually used to be a department inside HCA until it was spun off as a wholly-owned subsidiary. This history of being part of HCA's IT branch of the org chart means that there's a lot of custom software that has been written over the years. Now Parallon has 13 service centers across the country, each with their own development teams making and maintaining interal apps. Newer apps are on cutting-edge platforms, while legacy apps may have code more than 15 years old. All the while, there were no designers working inside the dev teams... since these apps aren't external client-facing, their look and feel was at the whim of each developer. At last tally, there were close to 60 different internal applications that are being maintained and used by the company.

My primary task while working at Parallon is to compile and distill a design language that (eventually) will be used across all legacy apps. As an app is up for having a feature added, the time is added to the development cycle to re-skin it with the new style. What exactly this style is was up for definition.

Biggest Challenge

The hardest part of creating a universal style (apart from the scale) is balancing reusable components with retaining layouts that have been optimized for productivity.

The style also has to be very accessible, with elements that still work for employees that are colorblind or require screen reading software.

Color

We started by aligning colors with the Parallon corporate styleguide. The dark blue, orange, purple, and base gray are all Parallon corporate Pantone colors. The remainder of grays, shades of blue, and secondary / tertiary colors all complement the core pallete.

Header

A dark blue header spans the top of the app. Since most apps didn't have any branding related to them, with many not having an official name and instead several colloquial names, I designed a unified logo language. This way, each each app now has a specific name attached and an icon that people can start to correlate to the app.

The top-level navigation can have from 0 to 6 elements. After looking at the depth and variability (some have 20+ pages, others are a single page), we determined any app with more than 6 items should have the additional pages nested under a section header. This forced hierarchy really helped to standardize the IA across apps, as we tended to have similar categories bubble up. An optional subnavigation can be used for breadcrumbs, quick links, hamburger menus, time-period dropdowns, etc.

Typography

Parallon uses Gotham in all of their corporate communications, so we incorporated this into labels, headers, logos, and other places where it made sense. Typekit was used so that there are no issues loading the webfont across browsers.

AMAP "As Much As Possible"

Some legacy apps couldn't be completely re-styled without a full rewrite. For these apps where there weren't enough hours on the project, the apps were put into a 'wrapper' that have the updated styles. This approach lets us apply the new logo and top-level header while leaving the meat of the legacy interface as-is until we had enough bandwidth to refactor.

Skinning Client-Facing Enterprise Tools

Client-facing tools like Salesforce were matched to the look and feel of the corporate website. We used this as an opportunity to try-out design sprints for the first time at the company. The concept was well-liked and leveraged on subsequent special projects.

Icon Design

A big point of pride for the different teams was having a custom logo created for their project to be used in Salesforce and on the distributed workstation desktops. 2012-2013 was the heyday of skeumorphic design, so these are very high-detail, heavily textured icons.