FULL VERSION
SNAPPY VERSION

Redesigning a Radiotherapy Risk Calculator

Role
Duration
Tools
Skills

UX Design Lead
January 2017  -  August 2018
Balsamiq, Sketch, Photoshop
Low-Fi Wireframing, Prototyping, User Research

Background

Another project that I worked on with the Emergency Medicine Department was a Radiotherapy Risk Calculator for older women with breast cancer. The original web app before my edits can be found here. The updated web app is currently unavailable for the public.

The radiation therapy risk calculator, originally called ROW (Radiation for Older Women) was already a fully functioning prototype when I was tasked with this project. Unfortunately, the user experience was extremely clunky and convoluted. In clinical studies with breast cancer patients, patients had many complaints about the system, including readability issues and general discomfort.

(1) General User Unfriendliness
• The front page was occupied by a massive disclaimer: not the most welcoming or comforting way for elderly patients to begin a foreign process.
• The name itself "Radiation for Older Women" felt vague, awkward, and a bit intimidating.
• Progress bar was not at 100% after completion of the survey. It only reached 100% after clinicians filled in some post-survey supplementary material. This was misleading since the progress bar existed for patients, not clinicians.

(2) Untrustworthiness/Outdated Appearance
• The word "Yale" was set in a generic font and not in the official Yale logo
• The most visible component of the home page was a a giant, low-resolution graphic of the word "ROW." This wasn't particularly compelling or relatable for users.
• Consistent errors in sizing, grammatical error

(3) Operational errors
• Certain buttons were faulty. Clicking "Disagree" to the disclaimer linked to the same text that appeared after the survey was complete.
• The audio recording automatically played on each page load, but there was no easily accessible on-screen mute button.

The UX was especially problematic considering the target demographic, senior women, who likely have poorer eyesight and less familiarity with technology.

The radiation therapy risk calculator, originally called ROW (Radiation for Older Women) was already a fully functioning prototype when I was tasked with this project. Unfortunately, the user experience was extremely clunky and convoluted. In clinical studies with breast cancer patients, patients had many complaints about the system, including readability issues and general discomfort.

Pre-existing Balsamiq Mockup

Pre-existing Web App

Structural Clarity

I created new prototypes that included formatting continuity, so that the questions and answers were always center-aligned. I removed unnecessary features like the text "Your Progress" which felt redundant. I also moved the tool heading to a separate header field for legibility. I also felt that it was important to differentiate between navigation and identification. I wanted navigation tools to be as easily accessible as possible.

Logo Redesign

I also changed the name of the web app from "ROW: Radiation for Older Women" to "Radiation Therapy Risk Calculator."

The researchers had communicated to me that they were dissatisfied with the current name, "Radiation for Older Women." I felt that "ROW" did not add particular value to the product. "Radiation for Older Women" felt vague, negative, and off-putting. I was given freedom to contribute my input for this rebranding decision.

I kept the name of my prototype relatively straightforward -- "Radiotherapy Risk Calculator" with the subtext "for Older Women with Breast Cancer."

The former logo was not only grainy and unimaginative, but unmemorable and difficult to brand. I wanted the new logo to reflect the process of disruption and breaking free from the ruthless cycle of cancer.

I chose to work off of a broken "infinity" symbol partly to symbolize the "broken" cancer cycle and partly because it evoked a ribbon: the traditional symbol for cancer awareness. I played around with a few different modes of representing cyclical rupture, but I ended up choosing to represent the discontinuation through circles. This was initially an entirely navy logo, but I ended up choosing pink for the circles to tie in traditional breast cancer connotations.

I played around with a few different modes of representing cyclical rupture, but I ended up choosing to represent the discontinuation through circles. This was initially an entirely navy logo, but I ended up choosing pink for the circles to tie in traditional breast cancer connotations. I chose the larger circles as opposed to the smaller circles to maintain graphic power at reduced scale.

Features and user flow

I rearranged the content on many of the app's pages for center-alignment and balance. On a more conceptual level, I also rearranged the home page and welcome process so as to better facilitate a friendly user experience. This decision was rooted in the idea that the calculator should be an engaging process, rather than an impersonal survey.

Below you can see the original vs. the revised home page mockups. I replaced the blurry "ROW" graphic with a more explicitly positive image of an elderly patient interacting with a doctor. I also replaced "Yale" with the official logo and included a brief blurb on the tool so that navigating to a separate page becomes unnecessary.

I moved the disclaimer to the second page so that the home page is less immediately threatening and replaced the disclaimer with a blurb and a "Get Started" button.

On the second page, I changed the formality of the language for friendliness ("I agree" vs "Okay").

I moved the disclaimer to the second page so that the home page is less immediately threatening and replaced the disclaimer with a blurb and a "Get Started" button.

On the second page, I changed the formality of the language for friendliness ("I agree" vs "Okay!"). I added "Steps" for both screens to make the process feel more digestible and transparent.

I also added a mute option because the questions are automatically voice-narrated on every screen. While I can't show every part of this survey, the screens below show the new disclaimer page and the step that follows.

Conclusion

This was an incredibly rewarding project to work on. It exposed me to the challenges of creating clinical tools that are maximally accessible to users dealing with health issues, unfamiliarity with technology, and impaired eyesight. This was a great project to start off my job at the Emergency Medicine department because it exposed me to many different stakeholders and the process of taking a product from ideation to low-fidelity and high fidelity prototypes.

Redesigning a Radiotherapy Risk Calculator

Role
Duration
Tools
Skills

UX Design Lead
January 2017  -  August 2018
Balsamiq, Sketch, Photoshop
Low-Fi Wireframing, Prototyping, User Research

Original Homepage

Pre-existing Balsamiq Mockup

Pre-existing Web App

Original UI: uncentered and unprofessional

Revised structure: new UI components and clarified layout

Original Logo: Grainy and misleading

Logo Redesign

Home Page - Balsamiq

Home Page - High-fi

Revised Onboarding