Ready Surgery

A Data Visualization Project


Ready surgery is a comprehensive tool utilized by surgeons to determine surgical candidacy through evaluating a patient's history and vitals. Our goal is to improve the UX flow on the risk report and risk detail screen of this progressive web app.

The Challenge

Which process of the surgeon journey can we improve upon as it relates to the Ready Surgery app?; Create a style guide that can be implemented throughout entire platform;

My Contributions

Working with a team, I was involved in the end to end process. I changed the visual direction of the hi-fidelity design and conceptualized the layout of the risk report screen.


User Research | Wireframing | Card Sorting | Task Flow | Prototyping | Lo/Hi-Fidelity Design | Figma

The Process

Understanding surgeon behavior and clinic workflows

Shadowing a surgeon and a scheduler

Research Process

As part of our user research process, we sought to understand the work flow of surgical centers. Our research consisted of shadowing surgeons and schedulers from different hospitals around the Bay area. We analyzed their interactions with other staff members, saw how they allocated their time and observed them using the Ready Surgery tool.

In addition to on-site research, we also conducted interviews with various people in the healthcare industry to gain additional perspectives. Using the information gathered, we created task flows and affinity maps to better organize our findings.

I created this surgeon journey map to visualize the process a surgeon might go through as it pertains to the Ready Surgery tool.

Defining the scope

Affinity mapping

Affinity Mapping

We created affinity maps to help us make sense of the pain points centered around surgery clinics and the Ready Surgery app. This helped us determine which areas needed to be focused on with the most impact for the surgeon.

Through our research findings and discussions with the founder, we determined that the "Risk Report" and "Risk" page would result in the biggest impact for the surgeon and scheduler. Our goal would be to improve scannability for these pages which would result in less prep-time for the surgeon before seeing patients.

Ideation of the Risk Report and Risk Page


We broke down the page into different sections and focused on designing each component. Because of the complexity and importance on accuracy for this tool, we frequently validated and requested feedback with the product owner. It took us many rounds of lo-fi iterations before we felt confident that the data was being portrayed accurately.

Designing by section
Early iterations of the composite risk graph

Changing the original hi-fi direction

Below is the original hi-fi direction. Believing that the colors drowned out the the most important information (the graph), I explored other options and colors that would better improve the design and usability. After bringing my concern and new ideas to the team, together, we agreed that exploring the new direction would be most beneficial to the user.

Original hi-fi versions (light and dark version)

Final Hi-Fidelity prototype

In our final hi-fidelity prototype, we used colors and font weights carefully to emphasize or de-emphasize information. We believed that keeping the UI elements minimalistic would keep the surgeons focused on the important data being presented.

Final hi-fi versions of report screen and risk by dimension screen
Original version of ReadySurgery app showing the risk report and risk page


This was a challenging project because we were designing a complex product in which our team had essentially no expertise in. Because of this, we had to dive deep into research to understand the motivations and behaviors of surgeons. Research played a crucial part in our design process and set the foundations for our ideas.

If time constraints and availability of surgeons were not an issue, I would have liked to conduct more validation testing during our lo-fidelity stages.