Innovaccer is a Silicon Valley-based digital healthcare company that provides hospitals, health systems, and other healthcare providers with different digital products. InRef is Innovaccer’s referral management solution for US Healthcare. InRef helps complete the referral cycle by ingesting referrals coming from PCPs and helps networks find best specialists for their patients.

InRef is a new product in Innovaccer’s portfolio. It was designed in collaboration with a design agency before I joined in as a dedicated designers for the product. We have been aware of various usability issues as well as a lot of inconsistencies in terms of design patterns. Recently, InRef design team initiated a redesign effort to solve these. We started with the first step of the referral process i.e Creating a new referral. I’ll briefly walk you through the design process followed for delivering this.

In practice, design is a pretty non-linear design process. We can divide the overall design journey into two steps, Discovery and Design where both happen continuously. I still followed Stanford’s design process as an overarching framework.

To kick things off, we conducted a workshop called ‘Inref Experience Vision’, where members of the product team as well as other stakeholders took part. The goal of the workshop was to understand users' pain points from different perspectives within the team and to understand how the team visualised InRef in the next 5 years. We first jotted down the pain points and possible improvements for all major flows, and then focused on ‘Create Referral flow.’

End-user of InRef is Central Referral Team (CRT). We are well aware of their backgrounds and mental models so we didn’t need to derive any new insight from their user persona. Instead of conducting new user interviews, we utilised the following data sources to understand their pain points.

The pain points discovered from recordings and observation sessions were mapped to respective steps in the process in order to brainstorm relevant interventions.

Insights drawn from our discovery process were mapped to the respective screens in order to help formulate and prioritise concrete requirements.

To get inspired our design manager Josh asked us to check out great e-commerce forms. E-commerce forms are one of the most optimised forms to facilitate fast checkout so studying them gave us a lot of insights.

We then created a repository of design patterns we liked. Apart from this, I also compiled a list of ‘best form-design practices’ which guided our designs.

We followed rapid prototyping for most of the designs as as changes were small and precise. We used our Masala Design System library and started updating the interfaces. For coming up with new components, I first prototyped and validated the wireframes.

Users wanted more visibility of info they entered in previous steps as this is a multiple step process. To solve this, we designed a summary page that appears at the last step right before generating the referral, where users can confirm the selections they made.

During our ideation, we decided to check different review screens out. The best implementation we found was when websites incorporated an info summary in the stepper cards instead of 1 summary screen at the end.

In the example below:
1. There’s a sticky panel for price details and rest of the form is broken down into different steps.
2. Great thing about this flow is that it feels like 1 page, which gives us a feeling that it can be filled in short time.
3. After info is entered, the stepper closes while still showing key details the user entered. This helps the user cross check the info before completing payment.
‍

In order to accommodate space for summary information, we moved steppers to the left hand side. Key Information entered like contact info is shown inside these stepper cards. This placement also gave better visibility.

This design was well received by the product team and other designers as well. Despite this we had to drop this because of the following reasons

1. Side steppers significantly reduced the real estate available for fax documents in cases where a new referral needs to be created from a pre-filled fax document.
2. We received pushback from the design system team as it would’ve been difficult to maintain 2 different kinds of steppers. Other Innovaccer products are already using top steppers.

We improvised and moved in the direction that didn’t require more horizontal real estate. In our next design direction, forms themselves were converted into steppers where important information is always visible. Users will be able to scroll up at any stage and access previous cards.

Referral groups are associated to specific referral types viz. Medical, Radiology and Behavioural. The card to select these groups was renamed to referral groups.

Patient form has 2 main functions:

1. Patient Search: Searching and selecting relevant patient

2. Patient Information: Checking the pre-filled info fields and entering any missing information.

In previous designs a dropdown button was inappropriately being used to search for patients. This was also very limited as the view was minuscule and there were no discovery and filtering options.

We designed a new search card where search results are given full real estate of the card making it easier to find the right patient.

Users can use filters to narrow down their results They also can jump back to an earlier patient through last searched suggestions. A unique patient no. was introduced for easier identification.

Patient information shows the information of the patient selected in the previous step. Most of the fields are pre-filled through data coming in from a 3rd party roster. The main goal of the user here is to check weather any mandatory field is missing, they can also choose to fill optional info such as email address.

In an effort to make the form less cumbersome to fill in one go we explored the idea of reducing mandatory fields (marked with red dots). We collaborated closely with the product team as well as customers to make sure we don’t run into any problems later on in the workflow. Finally, we narrowed down the mandatory fields from 7 to 3.  In order to make the form mobile friendly and easier to scan, we switched to a 1 column layout.

We observed that in most cases all mandatory fields in patient as well as provider details are already pre-filled. Now that we also reduced the no. of mandatory fields required to move further in the process, we explored the idea of representing the info in the form fields in a more consumable format. We conceptualised a ‘Review Page’ where users can check the info related to selected persona. If users need to make any changes, they can click on the edit icon to access the form. e.g Address is much easier to to scan now in it's standard US format.

In edge cases where a mandatory field is missing, the users will be directly taken to that missing field before landing on the review screen.

In order to maintain consistency, referring provider form was given a treatment similar to patient form.

The form was converted to single column layout. Some fields were made non-mandatory and moved down in the form to reduce priority.

We tested our prototype internally as well as with end users. During our usability tests with 6 users, we observed

Users were able to complete the assigned task in 24% less time on avg.

Some users were confused about the form steppers. They didn’t grasp that they could scroll up and go to previous steps.

Thus, an animation was introduced to show the previous cards moving up.

Users who didn’t have context were still confused about ‘referral groups’. We’ll attempt to simplify this in later releases.

This is just one of many projects I worked on at Innovaccer. Apart from handling day to day small designs I also drove some of the major updates to the InRef platform. If you’re interested, we can discuss these as well.