previous arrow next arrow

Performance Health Technology

I worked as part of a small team to redesign a suite of healthcare applications used daily by staff in healthcare provider offices.

  • Timeline: June 2015 – Nov 2016
  • Context: Client Project at Mentor Creative Group
Performance Health Technology screen

The Problem

Performance Health Technology, or PH Tech, is a company in Oregon with a suite of healthcare products used daily by over 8,000 people.

Most of PH Tech’s products were built in the 1990s by engineers. The products help healthcare workers do their jobs, but they’re not always easily learnable or efficient to use.

The Solution

In short, PH Tech’s products were in need of design thinking to improve usability and efficiency. For over a year, I worked with a small team at Mentor Creative Group to help PH Tech redesign a few of their applications.

I was involved at all stages of the redesign projects, including research, design production, and usability testing, and I was the primary designer responsible for the application visuals.

All patient information shown here is placeholder data.

Search widget of Bridge application for Performance Health Technology Alternate states of search widget of Bridge application for Performance Health Technology

These screenshots show the search widget of the application Bridge. Billing managers, referral coordinators, and receptionists in provider offices begin many of their daily workflows by looking up patients (insurance “members”) in a search.

User Interface Challenges

One of the major UI challenges of these projects is that the healthcare content is text-heavy with no imagery. I worked to present information in more digestable ways so that users could quickly hone in on the information most important to them. I also worked to make the applications more engaging, as many healthcare workers are using the software almost forty hours per week at their jobs.

One UI paradigm that I created specifically for a PH Tech application called Bridge is a “card row.” Card rows display information that was previously contained in tables in the old version of the app. I used card rows in Bridge for tables that had repetitive information (now pulled out into headings), important statuses (denoted in card rows with colors like green and red), and calls to action (made more prominent with icons and other design decisions). As shown in examples below, Bridge card rows are very adaptable to different types of content.

Search results in Bridge application for Performance Health Technology

This is the search results page after a user has performed a member search. Results are shown in the UI paradigm I created called a “card row.”

Alternate persona versions of search results in Bridge application for Performance Health Technology

These are two additional versions of the member search results page. The left is specific to the persona “Sophia,” a billing manager, and the right is specific to the persona “Amber,” a receptionist.

These two examples also show developments in the design of the Primary Care Provider (PCP) section as requirements from the client changed.

Member Details page in Bridge application for Performance Health Technology

This page is accessible from the member search results page, and displays additional details about a member.

Claims page in Bridge application for Performance Health Technology

This page is also accessible from the member search results page, and shows a member’s insurance claims. These card rows include the additional feature of a “drawer” that opens up to display more details about a claim. Billing managers (the persona “Sophia” in our project) occasionally need to access these details.

Additional states of Referrals and Authorizations page in Bridge application for Performance Health Technology

This shows another widget, besides the search one, that lives on the landing page of Bridge. It displays the most important referrals and authorizations that a referral coordinator needs to deal with immediately.

Style Guide

An ongoing part of our design work for PH Tech was an online style guide. As designers and front-end developers at Mentor Creative Group, we used this regularly for reference, but its primary users are the PH Tech back-end developers. They use the style guide frequently when building parts of their apps that Mentor is not involved in.

The style guide includes code snippets for developers to grab. It covers everything from small components like checkboxes and toast messages to larger UX guidelines about when to utilize various information paradigms.

View a short video walkthrough of the style guide below.

In Sum

Ultimately, working on the PH Tech applications was very fulfilling. Each design decision impacts the lives of real people who use these applications daily for their jobs. Additionally, the complexities due to health information privacy issues and backend technical constraints made for interesting design problems to solve.