Yerbba

Overview
Yerbba is a B2C platform that empowers patients by personalizing their electronic health record efficiently and understandably to inform treatment options, recommended tests and guidance for the long term treatment process.

Visit Yerbba Here
What I did
As a Junior UX Designer I was in charge of:
• Designing the first version of dashboard: Overview, Treatment Options and Disease History screens
• Setting UI Principles
• User Testing
• Iterating for second version
• Converting web to mobile (web responsive)
Duration
January 2019 ~ February 2020
Team
CEO, Lead Designer, UX Designer, Medical Directors, Marketing Team and Engineers
Skills & Tools
Usability Testing
Wireframing
Design Systems
Figma
Adobe XD
Illustrator
Kickoff
Project Scope
After multiple visits to the hospital, patients who are diagnosed with cancer and long term conditions are anxious about their next steps and additional information.

Many patients have difficulty trying to understand their health state to the full extent. Doctors have limited availablity and the information online are unreliable and generic.

Focusing on the people, it is important to give patients as much information and support for them to gain confidence and control of their own care.
Problem Background
What problem are we addressing?
World wide, breast cancer is the most commonly diagnosed cancer - as a starting point, Yerbba primarily concentrated on breast cancer patients because the treatment is complex and overwhelming for patients. Every individual is different, therefore, an individual centric care is crucial for the long term process.

Process includes: diagnosis, various treatment options, post-treatment care and recovery. A holistic treatment is required to address the physical, psychological and social needs.
Treatment Options
Setting Goals
Problem Statement
How might we empower patients to feel confident and take control in their own health care?
Company Goals
To tackel this existing problem, Yerbba was created. To understand the goals for the company and what impact we wanted to make, we agreed on these two goals. After talking to the CEO and Co-founder of Yerbba about their goals for the product and what I could do to contribute to the team.

Initial Design
I was introduced to these wireframes when I joined the team. From the first wireframes that the lead designer created with the initial user research, my responsibility was to find the pain points of the existing design and work together to create iterations from user research findings.
Existing Design Problem & Setting Goals
Some of the pain points from user testings and feedback:

• Since there is a lot of information in one page, it's important to have clear information hierarchy - depending on content significance.
• Interactions for some elements are difficult to determine as actionable features.
• Understand the core features for the product - Few unclear content purpose
"UI feels incomplete"
"Difficult to see overall information in one sight - Overview page"
"A lot of information to digest"
Content Brainstorm
What content should we include in the dashboard?
To fully understand what content we wanted to include in the dashboard, I had the opportunity to host an exciting Walt Disney Brainstorming session with the team.

Participants: CEO | Lead Designer | Medical Director
Key Takeaways
With participants' contribution, we were able to decide what content we wanted to include in the dashboard and create a priority timeline organized into three categories:

1. Actions we can take now
2. In 6 months  
3. In 12 months


This activity helped our whole team to see the feature prioritizations for our product which determined our short term and long term goals.
User Flow
What is the overall experience?
After the brainstorming session, the design team proceeded to organize the overall experience for the patients when utilizing Yerbba. This flow shows the process of the steps that the patients go through when utilizing this new platform and it was important to keep in mind:

• Easy to learn how to use
Allow users to feel safe and secured when utilizing this platform (privacy for medical records)
Let users to access their profile information easily
Highlight the actionable items (for questions that come up when interacting with the platform)
• Main content: active disease section, treatment options, progress history for overall summary

Lo-Fi Wireframes
After the brainstorming session, the design team proceeded to sketch out potential wireframes for the dashboard of Yerbba. I was specifically in charge of the main landing dashboard page and active disease page.

• With the main content decided for both main dashboard and active disease page, I explored various ways to display the information and roughly put in text placements to visualize the layout of the whole screen.

• Large amount of information is being displayed on each pages, therefore we all agreed on a horizonal dashboard structure that will contain different visualizations for each information.

• From our user research, many patients loved data visualizations and icons because of how it helped them understand the content better.
Style Guide
Dashboard Version 1 Style Guide
With the opportunity to set the style guide for the first version of Yerbba's dashboard design, I researched into color psychology for health care companies and business goals.

Main goals for the style guide:
1. Represent professionalism and reliability along with warmth and caring guidance

2. Be consistent - It's important to keep a consistent style throughout the design as a whole.

3. Create distinctions - utilize secondary color to highlight significant content.

4. Have clear intentions/reasonings for decisions - the chosen colors and fonts involve emotions/feel (color psychology).

Typography

Color Scheme

Hi-Fi Wireframes
With the set style guide, we completed our first completed dashboard pages.
• Overview Section
• Treatment Section
• Active Disease Section
• History Section

1. Main Overview

Summary of patient profile, disease history, care options to show their present condition, history of tests and all the possible options for the future
2. Treatment Options

Ability to explore and compare treatment options, recommended lab tests and prevention options
3. Disease History

Indepth view of previous lab test results, medical history, family history and consultations
User Testing
What works for users? What does not work?
What iterations do we need to make?

After the insights from my interview, as a reference, I looked into the existing products who target the same users and solve a similar problem.


With some participants who we were able to connect with through the University of Michigan Hospital patients, we conducted a few in lab testings with the prototypes. The following graphs show the synthesis of insights and findings of the usability testing.

Main Insights

Mismatch between status icons and text of options confused the users
Need an indicator for interactive graph
Difficult terminologies in certain sections

Next Steps

Redesign completed card UI
Change refresh interaction for "Consideration" section
Provide mearningful information through the history module
Provide tooltips or definitions for terminologies

Iterations

Before

After

Before

After

Our next goal as a design team was to take action for the feedback that we received and revamp the dashboard along with developing the website. Feel free to check out Yerbba's website to see the iterations made for Version 2 of the design.


Click Here for Yerbba's Dashboard Demo
Yerbba Version 2 for Launch
Graphic Design Elements
Along with my contribution to the dashboard design, I was also responsible for the business card design and icons that the dashboard needed for categories. This process took around 3 weeks to complete with weekly meetings with the CEO and the lead designer.
Design Tools
Illustator
Photoshop
Process/Sketches
Final Deliverables
Reflection & Next Steps
From the initial design to the launch of the website, everyone on the Yerbba team contributed with similar passion and goals for our future users, which was "To help patients to be more confident about their health state and know what steps to take next in their medical journey". With a team that had this mindset while building our product, it was important to always consider users needs and wants.

Empathy is a crucial part of the design process
As a designer, I learned the importance of empathy in the design process. We are designing for our customers who are patients and this deals with many ranges of emotion throughout the journey. It is important to communicate effectively with the users and continuously get feedback and understand their furstrations and actions in order to create a successful experience.

Next steps for Yerbba will be to implement the web designs into mobile in order for the developers to build and test out. I'm excited for Yerbba's launch and see how it will grow in the future!

Thank you for your time

Scroll Up

View other projects

Spot →
Effortless hunt for parking spots in urban areas
StreaMed →
Physical & mental health tracker for students
I'll Go If You Go →
Fun & meaningful conversation starter for bonding
Blissfully →
Design Task for Blissfully's SaaS platform dashboards