outcomes web platform


Product & Visual Designer


8 Weeks


Very niche user base with limited industry contact,
pre-product market fit with limited user data. 


Outcomes.com's original UI did not display actionable information at a glance, surgeons & doctors are extremely busy. Our goal was to create a user experience that allowed doctors to make informed decisions based on patient data. 


Client Project, Web App User Interface


Francis Wong (Founder), Luke Sheard (Engineer)
Francesca Chua (Project Lead), Mischelle Mulia (Product
Designer) , Liana Dumitru (Product Designer), Derrick Huey
(Product Designer) 






To understand how Outcomes fits into the doctors & surgeons' day-to-day schedule, we conducted user research by developing a provisional persona, utilizing a "Jobs to Be Done" framework, then validating the persona through comprehensive user interviews.

provisional PERSONA



We followed the “jobs to be done” frameworks to develop Job Stories in order to better understand the different scenarios that doctors and surgeons go through when they are accessing Outcomes.com.

By understanding this context, we were able to focus the goal of our design process and design informational interview questions that will help validate or invalidate our assumptions. 



I can’t find what I’m looking for...not sure where ‘View Analytics’ will take me, since I’m technically only looking for patient data
— Doctor 3

data synthesis & hypothesis formation

  • 5 out of 5 users could not identify which patients were doing poorly
  • 4 out of 5 users had difficulties navigating back to the home page
  • 5 out of 5 users liked seeing a graph, but had difficulty understanding it
  • 5 out of 5 users wanted to have the capability to customize patient list
  • 5 out of 5 users did not understand the use of metrics and color

Based on research results, we believed that making it easier an faster for doctors to prioritize patients who need care will increase overall engagement and functionality of Outcomes.com.

We will know this is true when we see a significant increase of more than 20% of doctors be able to quickly determine the status of their patients displayed on screen. 


Based on the results of our user research, we uncovered that doctors and surgeons will not spend the time to dig through Outcomes.com platform to find patients who need help. Instead, they would like to see actionable information as soon as they land on the home page. This key insight led us into combining the information from Patient Dashboard and Patient Treatment Page into an easily digestable and actionable home page.


Card Sorting

We deconstructed all the information available on the current platform and asked five users to sort based what made the most sense to them. 

This allowed us to implement a design decision based on the users' natural thought processes so that they wouldn't have to create new mental models to navigate throughout the platform. 


Then, to wireframe the features from the data synthesis, we used a condensed version of the Google Venture's Design Sprint to develop solutions to address the painpoints. The Co-founder and the lead engineer join us and had a blast!


Patient Card Comprehension

One of the biggest challenge in our redesign was to develop a visual communication tool that displays the right patient data for doctors and surgeons to take decisive action. We sketched several solutions for this problem and ultimately decided on the design of the ‘Patient Card.’

This was especially challenging because we wanted to be sure that doctors can understand what kind of information they can see at a glance. Thus, we ran comprehension tests on several version of the cards before deciding on a final iteration.

Patient Card Anatomy

Varying Options



After showing the patient cards and our early wireframes with doctors and surgeons, we observed the need for them to be able to customize the patient card list. Doctors and surgeons would like to be able to add and remove patients from the Patient Card list as necessary.

Thus, we designed an interaction flow that allows doctors to do so.



We then combined these elements into a clickable prototype in Sketch and built a clickable prototype in Marvel to prep for usability testing.


To test our designs we recruited another five doctors to see if we had successfully addressed the painpoints with the designs in a high fidelity clickable prototype.

I really like how I can tell the change in pain score right off the bat. Right next to that, I have an actionable list of things to check.
— Dr. Eugene L.

validation analysis

After the feedback from the doctors, we synthesized the painpoints and mapped out the features we needed to adjust. 

  • There is a significant reduction in the number and variety of pain points from 49 (UI testing) to 35 (from our redesign validation tests). 
  • 5/5 users were all able to quickly identify which patients were not doing well.
  • 5/5 users found value in being able to see patient data quickly on the patient cards. 
  • 3/5 users found value in being able to get their "newsfeed" updates via the Activity Feed. 
  • 2/5 users preferred using the 1-10 pain scale (VAS) instead of the 1-100 scale.
  • 2/5 users weren't sure who was responsible for adding notes.


Our designs resulted in an 100% increase in the users ability to quickly pin-point important data to drive actionable measures for preventative care. 

Next Steps

Our client is currently implementing the design and preparing for select testing in early 2016. With our work, Outcomes.com has also made it into SkyDeck, an accelerator program backed by the massive resources of the UC Berkely ecosystem for moonshots in business, technology, and healthcare.