Outcomes.com

Creating a visually informative and actionable home page

OVERVIEW

Outcomes.com is a web-based platform that allows doctors to easily manage, track and analyze patient reported data.

I led a team of seven product designers to recreate the home page for the platform through a Lean-based design process. Our process involved many steps starting with comprehensive user research to understand the needs of our users up until iterating upon our designs multiple times based on several rounds of validation studies. 

THE CHALLENGE

The main challenge that my team and I faced with Outcomes.com is that we were working with a pre-market fit product that is targeted towards a very specific group of users who we were largely unfamiliar with. 

UNDERSTANDING THE PROBLEM

OUTCOMES.COM'S USERS

We wanted to gain an understanding of Outcome.com's users (their habits, behaviors, values), and how they are able to navigate through our existing UI. 

We created a provisional persona to understand who our typical users are

USER RESEARCH

We simultaneously conducted user interviews, usability testing and card sorting to guide us in making design decisions. 

USABILITY TESTING (ON CURRENT UI)

We conducted usability testing on the current Outcomes.com platform with five different medical professionals to observe how they navigated through the website, and to see if any difficulties arose from their interactions with the interface. We gave users a few scenarios and tasks and recorded their interactions through join.me.

SYNTHESIS OF UI TEST

We synthesized our results by transferring each pain-point into a post-it note, and grouping them according to similar categories. Each doctor is represented by a differently colored dot on the top right corner of the post-it. 

OPEN CARD SORTING

We deconstructed Outcomes.com into index cards for five different individuals to sort out, and categorize in groups that made the most sense to them. We sought to determine how users made sense of the various pieces of information on Outcomes.com to guide us in reorganizing the architecture and navigational menu. 

STRATEGIZE

From our research, we saw that there was a clear need to effectively communicate relevant patient data to doctors at a glance.

We decided to address the various pain-points we uncovered by converging elements of the Patient Dashboard and the Patient Treatment Page into a home page that contained actionable and relevant information. 

DESIGN

HYPOTHESIS-DRIVEN DESIGNS

Our ultimate goal for the home page redesign is to provide more value for doctors by creating actionable information at-a-glance. 

Before sketching, we first formed several hypotheses to guide us towards creating informed user-centered solutions that address existing pain points in the app. We hypothesized that:

• The use and placement of patient cards on the home page will allow medical professionals to easily identify which patients are in need of the most attention 
• Highlighting changes in metric score will greatly reduce the cognitive load on medical professionals by eliminating their need to browse through names on the patient list 
• Adding a graph to display the trends in patient-reported pain scores will also aid doctors in identifying how their patients are doing. 

STYLE GUIDE

I created a style guide for my team to use as we explored various elements in our high-fidelity screens. I incorporated elements from the current app, and added new assets that we used in our designs. 

Using Sketch, we digitized our sketches into high-fidelity wireframes to explore various methods of presenting essential information in a digestible manner using color, copy and repeatedly validating our designs. 

COMPREHENSION TESTING

One of the biggest challenges we faced during this phase was how to best design patient cards to efficiently communicate the changes in a certain metric (ie: pain scores). To aid us in this process, we conducted comprehension tests of our patient card variants on eight people to see if they understood the information presented in each card. 

Observations:

• Users were unsure how to interpret the pain score changes unless they could refer it to a previous score
• Users interpreted red with an accompanied (+) or upwards arrow as a sign that the patient is not doing well, which was our desired interpretation

PROTOTYPE VALIDATION

We validated our designs with five more medical practitioners to assess if our designs had addressed the pain points that arose from initial UI testing. 

ANALYSIS & SYNTHESIS

We then plotted groups on two different affinity maps to determine which features were the most impactful, necessary and practical for us to iterate upon. 

FINAL DESIGN RECOMMENDATIONS

We addressed these issues on our next iterations while also creating pixel-perfect high-fidelity screens for our final deliverable. 

NEXT STEPS

Our client was pleased with our designs and is currently in the process of implementing them in time for pilot tests early  next year. We urged our clients to continue gathering user feedback once the new designs are implemented, as there is only so much data one can gather from a clickable prototyping tool (ie: Marvel). 

REFLECTION

Working on this client project really taught me a lot about design leadership, client communication and the healthcare landscape. Having a very specific user group taught me how to be a resourceful and resilient researcher to gather qualified people to interview and to conduct UI tests and validation tests. Through interacting with my client (a trained urologist), and various doctors, I developed a better understanding of the complexities and limitations of the healthcare industry. 

Outcomes.com is a valuable patient-outcome tool that many doctors are currently taking interest in. Our client just got into the Berkeley Skydeck (an accelerator for disruptive startups) for his ideas! I believe that Outcomes.com will be a useful and efficient tool that many medical professionals will be keen on adopting especially when it is successfully integrated with EMR and patient scheduling technology.