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.
Collaborate with founder to define scope
Redesign the app to improve data visualization & increase overall comprehension
Collaborated with 5 other designers.
Conducted ethnographic research
Designed low-fidelity mockups
Designed high-fidelity prototype
Contributed to component audit & style guide creation
Image: My design process
Research & Discovery
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
We gathered our insights and wrote them on post-its. Then we analyzed our findings through affinity mapping. We grouped our insights three ways:
Location in app
Image: Affinity mapping
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:
Reduced surgeon prep time so that more quality time could be spent with the patient.
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.
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
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:
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
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.