Data Visualization of Ready Surgery's web app


What is Ready Surgery?

Ready Surgery is a progressive web app that helps surgeons calculate the risk of surgical patients.  Ready Surgery hopes to minimize risk assessment errors by taking something so complex (due to the many variables involved and content specific language), and present it in a clear way that matches a surgeon's workflow.

The Challenge

  1. Collaborate with founder to define scope

  2. Redesign the app to improve data visualization & increase overall comprehension

My Role

Collaborated with 5 other designers.

  • Conducted ethnographic research

  • Designed low-fidelity mockups

  • Designed high-fidelity prototype

  • Contributed to component audit & style guide creation

My Process

Research & Discovery

Define the scope

Data visualization by component

Designing the

user interface

Style guide


Image: My design process

Research & Discovery

Ethnographic research

We shadowed surgeons and surgical schedulers to gain insight into the current system of assessing and scheduling surgical patients.

Photo: Visiting the clinic to conduct research

Affinity mapping

We gathered our insights and wrote them on post-its.  Then we analyzed our findings through affinity mapping. We grouped our insights three ways:

  1. Role

  2. Theme

  3. Location in app

Image: Affinity mapping

User flows

To further synthesize our research we created user flows from the surgeon and patient perspectives.

Image: Surgeon task flow

Persona & job stories

To document our understandings we created individual personas and job stories to guide our design process.  Then we came together to agree on a single persona and job story to inform our design.

Image: Design team brainstorming on persona and job stories

Define the scope

After conducting, analyzing, and synthesizing our research, we collaborated with the client to identify the scope of our project.  We decided to focus on improving the Patient Profile page and Risk Report page because the impact of improving them would be:

  1. Reduced surgeon prep time so that more quality time could be spent with the patient.​

  2. Safer risk assessment because the surgeon can view a full comprehensive report at a glance.

Image: ReadySurgery's app BEFORE our redesign

Data visualization by component

Due to the content specific vocabulary and the complexities of displaying multiple variables in a graph, we worked closely with the client to effectively collaborate.  In order to efficiently explore conceptual directions and get quick feedback, the team decided to divide the content into components. We started with sketching to get rough ideas out there.  We continued to iterate and validate extensively over the course of the project. 

Image: Sketches

My team also decided to pair design and used Figma to effectively collaborate.  After conducting 3 design sprints with feedback from the founder, participating in a design critique, and guerilla comprehension testing, we were ready to move on to high-fidelity.  Here is a snapshot of some our low fidelity work:

Image: Snapshot of our iterations

Designing the user interface

There were 5 key points from our research that informed our design

1. On the patient report, there is no hierarchy of importance

Currently, each section appears to have equal weight when the risk section should be prioritized.  This data is the main value proposition of the Ready Surgery app, so it needs to be more prominent and easier to access (not available after 2 clicks).  This also makes sense because surgeons are incredibly busy and don't have time to dig up valuable information.

Image: No hierarchy shown in current design

2. The episodic (overall) risk isn't effectively communicating modifiability

Modifiability is the ability to change the state of ones' risk from a higher state to a lower one.  From user testing, the word "modifiability" is unclear.  Additionally, the current graph doesn't clearly represent modifiability's relationship to risk.  Being able to visually showing a patient how surgical risk can change is helpful according to surgeons, as they often explain this concept to their patients.

Image: Current graph doesn't effectively communicate modifiability

3. The risk by dimension information is displayed in a way that is not helpful for surgeons

The items listed in this "risk by dimension" section are the parts that contribute to the episodic (overall) risk.  When observing surgeons using this section, we noticed that they had a difficult time interpreting this information, especially on a desktop where the spacing between the text is very large.  Ready Surgery wants surgeons to engage with this data, yet it is currently not very scannable and interactive.

In the new design, surgeons will be able to filter the dimensions to easily show their patients the impact of minimizing certain risks.  Also, they will be able to see the risks comparable to each other.  By using data in this way, surgeons will be less likely to bias their decision to defer surgery due to over focusing on their personal expertise.

Image: Currently risk by dimension is not scannable

4. Clarifications are hidden and not interactive

Clarifications are actions needed to improve the accuracy of the risk graph (ie. the surgeon must review tests or paperwork).  In the current design these clarifications are hidden away in a section the surgeon must click into.  They should be more prominent so that the necessary tasks can be completed to make the risk graph as accurate as possible.  Additionally, there needs to be a way for the surgeon to dismiss completed tasks.

Image: Currently required clarifications are hidden and not interactive 

Final design

Image: Final designs

Style guide design

What is Ready Surgery?

Many aspects of Ready Surgery's brand were already established. However, we were creating new components that didn't exist elsewhere, so conducted a component audit and designed a style guide with the following in mind:

  1. Modern feel

  2. Easy to comprehend

Our design has a non-academic, yet modern look surgeons could trust.  We were very intentional with our color and font weight selections so that we could highlight various elements and actions that matched the surgeon workflow.  See the typography and color style guides.

Image: Style guide

Key Takeaways

1.  Pair designing is fun

When you pair design, you can bounce ideas off each other easily, increasing the amount of iterations you come up with.  Here's a great article if you want to learn how to try it.

2.  Designing by component is extremely helpful when doing a data visualization project

 This allows you to really think about what each individual should communicate.  Once you understand that, you can play around with combining variables to get the ultimate desired experience.  Here are two sites I found helpful to get data visualization inspirations, DataViz Project and The Data Visualization Catalogue.