Cindy Yuan
upstream.png

Cindy Yuan | Upstream

Through Berkeley CodeBase, I served as the lead UI/UX and graphic designer in a team of seven front-end and back-end developers to deliver results to Upstream Oncology, a startup aiming to match cancer patients with clinical trials.

 

Upstream

upstream.png

Through Berkeley CodeBase, I served as the lead UI/UX and graphic designer in a team of seven front-end and back-end developers to deliver results to Upstream Oncology, a startup aiming to match cancer patients with clinical trials.

 

PROBLEM

The main issue with existing clinical trial services is that they are not personalized, and the websites are neither intuitive nor easy to navigate.

Upstream’s target demographic is low income, middle-aged to elderly men and women with education levels of high school or lower. Keeping this and its goal of personalization in mind, I pinpointed the main problems with Upstream’s current website.

  1. The organization of the website was neither clear nor consistent, in terms of both front-end and back-end.
  2. Pages were very long and would leave users scrolling for a long time.
  3. There were many long, medical terms that are difficult to spell, recognize, and understand.
  4. Visually, the styles were not consistent and content was not aligned.
 Sample pages of the original website

Sample pages of the original website

 

SOLUTION

Rather than providing a search option like existing websites, I reframed Upstream's designs in a way that streamlines and personalizes the process. Instead of providing a search bar for patients to look up relevant studies, the new design allows patients to submit a survey of their own information and see the percentage of matching trials as they fill out the survey. Once completed, they may view the resulting trials that match their profile and be able to quickly send their information at the click of a button. Functionally, the idea is similar; however, the emotional difference is subtle but important. The implication, instead of “I’m looking up studies in a search bar as if I’m conducting research”, now becomes “I am a patient. I’m going to provide my current conditions and studies that best match me will appear.” I added and refined visual elements including a neat sans-serif font, a new logo, and a blue color scheme to produce a finished, clean, look.

upstream-screen.png
 

PROCESS

User Flow

I mapped out a user flow of the website to better organize the hierarchy of information and discussed it with the developers to match this display with the back-end organization of the website.

 Post-research brainstorming and synthesis
 

Wireframes

Next, I drafted up the layout for the main screens of the website. I explored the idea an autofill search, which would allow patients to search up familiar words and choose amongst related terms, making it easier for users who may be confused or intimidated by a long list of medical terminology. In addition, to increase personalization, the surveys would be dynamically created, in that if someone marks “male” as their sex, the menopause questions would not appear.

smartphage-flow.jpg

I discussed my high-fidelity mockups with our developers, who implemented the designs and helped bring them to life.

 

Reflection

As a designer interacting with engineers, it was important to consider the practicality of each design decision, as well as account for possible edge cases. As a developer myself, as I designed each feature, it was helpful to think about how I would go about implementing it if I were to actually code the program. In addition, having a clear goal in mind for the purpose of my redesign and knowing the target users before I began was essential for a smooth design process and thus an effective and impactful solution.