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.
How might we empower patients to feel confident and take control in their own health care?
To tackle 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.
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
"Difficult to see overall information in one sight - Overview page"
"A lot of information to digest"
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
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.
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
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.
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).
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
In-depth view of previous lab test results, medical history, family history and consultations
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.
• Mismatch between status icons and text of options confused the users
• Need an indicator for interactive graph
• Difficult terminologies in certain sections
• Redesign completed card UI
• Change refresh interaction for "Consideration" section
• Provide meaningful information through the history module
• Provide tooltips or definitions for terminologies
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
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.
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!