top of page

HerHeartCo Mobile Application
iSchool Capstone Project

My Role: UX Researcher
Team: Sydney Morales, Bethany Chum, Daniella Tsing, Kristy Nhan & Trevor Tang

Transparent iPhone 14 Perspective Semi-Left Mockup
Transparent iPhone 14 Perspective Semi-Right Mockup

Scope 🩺

Discover and implement market and user insights to guide the design of a women's health app

  • Client: HerHeartCo, a women's health start-up

  • Methods: Competitive Analysis, User Survey, Affinity Diagram, Prototyping, Usability Testing

  • Tools: Figma, Miro, Google Docs, Google Forms, Zoom

  • Duration: January - June 2024 (6 months)

Context ♥️

Cardiovascular disease (CVD) is the leading cause of death in women worldwide and is often missed due to unmonitored women-specific warning signs.

HerHeartCo (HHC) is dedicated to protecting women’s heart health by ensuring that women approaching menopause have the tools needed to monitor and decrease their red-flag symptoms, increasing their heart protection long-term.

Screenshot 2024-07-23 at 12.28.52 PM.png

The HerHeartCo Logo

Objectives 🎯

My team’s objective was to provide UX design and front-end development for the HHC app, which was still in the ideation stages. Conducting thorough UX research was imperative for understanding our users and guiding our design decisions throughout this project.

Research Goals
1. Understand the challenges women face in healthcare and how HHC can bridge the gap.
2. Evaluate similar health solutions to understand what motivates users to track and improve their health habits.
3. Find the best way to implement the HHC app design to meet users' needs.

Methodology 💡

The research process was split into two phases:

1. Discovery

2. Validation

  • Competitive Analysis

  • User Survey

  • Affinity Diagram

  • Wireframing

  • Prototyping

  • Usability Testing

The discovery phase was aimed at developing a detailed understanding of potential users, their needs, and their context.

Competitive Analysis

We looked at over 20 health applications and online tools, noting unique features and good/bad reviews and compiling our findings in Miro. HHC's main competitors included Maven Clinic, Clue, Gyroscope, and HelloInside.

Screenshot of our Miro board with competitive analysis findings

Screenshot of our Miro board with competitive analysis findings

Competitive analysis findings

✅ Users liked receiving actionable recommendations based on their current metrics

✅ Personalized and immediate feedback promoted positive behavior changes in users

❌ Users didn’t like being bombarded with explanations containing medical jargon

❌ Features that were locked behind a paywall received negative reactions from users

1. Wearable Device Integration

HHC stands out by connecting with Dexcom, FitBit, and Apple Watch to track health metrics.

  • Wearable device usage motivated users to improve their health.

  • This could lead to accessibility issues since not all users may have access to wearable devices.

2. CVD Metric Tracking

​HHC serves a unique purpose in tracking and preventing CVD in perimenopausal women.​​

3. Exclusive Membership

​HHC is set to be partly subscription-based, with certain features locked behind a paywall.

  • Health metric tracking was a central feature of many competing health apps.

  • What sets HHC apart is its commitment to tracking CVD-related metrics and providing recommendations to prevent CVD.

  • Subscription-based features received a largely negative reaction from users.

  • HHC's main features should not be locked behind a paywall.

User Survey

To better understand women's healthcare experiences, my team and I drafted and sent out a user survey using the snowball approach and received 45 responses. The survey was made using Google Forms.

Bar chart depicting survey results rating participants' experiences receiving healthcare from 1-5
  • ​​"I feel comfortable talking to my healthcare provider"

  • "I feel that my doctor is too busy to help me (i.e. have to schedule appointments months in advance)"

  • "[Doctor] not being available when needed"

Pie chart depicting survey responses for the question, "When using health apps, do any of the following relate to you?"
  • Health apps serve as a source of motivation and have helped users reach their health goals. 

  • Subscription-locked features, data privacy concerns, and inaccurate data visualizations are among users' biggest pain points.

Key Takeaways:

1. Combining Convenience and Healthcare

While many women feel comfortable talking with their healthcare provider, their provider is not always available when needed.

2. Maintaining Motivation through Goal-Setting

Goal-setting as a feature could motivate users to reach their health goals and maintain healthy habits.

Affinity Diagram

To organize research findings from throughout the Discovery phase, my team combined and organized our insights into categories in Miro to gain an overview of the research we had completed.

Screenshot of our Miro board with affinity diagram findings split into categories on sticky notes

Screenshot of our Miro board with affinity diagram findings split into categories

After organizing our findings into categories, we identified recurring themes and used these insights to create our first wireframes of the HHC app. This process was particularly insightful because it allowed me to discover themes in our research that I had not considered beforehand.

The validation phase was focused on understanding if our design helps users solve their problems, how they interact with them, and where they get stuck.

Initial User Testing

After co-designing wireframes in Figma, we needed to validate our design direction and ensure our features would be useful to our audience. To do this, we scheduled and interviewed 5 users through Zoom. Users were recruited through our user survey, where respondents were given the option to enter their email if they were interested in participating in user testing.

Screenshot of the Figma wireframes we conducted our first round of user testing on

The Figma wireframes we conducted our first round of user testing on

Q: Can you explain what you see on this homepage?

 

​​"I can see some type of rating for steps, heart health, and water consumption. It's nice to see some of the visualizations in one space." - S​

 

"The red colors feel angry." - A

Q: You just ate lunch, can you walk me through how you would log your meal information?

​All users could navigate to the add screen and view the food section.​

 

Some users were confused about using the camera to log their meals.


Q: What are your thoughts on this feature? Likes, dislikes, or confusing points?

​"I really like how simple it is." - J​

 

"For the food, I wonder if it will record enough information? What you're eating in those categories matters, it doesn't seem like enough detail." - S

Key Takeaways:

1. Strike a balance between simplicity and detail

Our UI was praised for simplicity, but some users stated that it seemed too simple to accurately track their meals.

2. Change the main app colors to be less 'angry'

​Users stated that the red color choice for the app felt too 'angry', which can potentially distract from the app's purpose.

Second User Testing

My team created high-fidelity prototypes after taking the user feedback we received along with our sponsor's finalized branding. We conducted a second round of user testing to gain feedback on our updated design from the same participants.

Design Changes:

  • Added preventive recommendations, tips, and visualizations to the dashboard

  • Added brand logo and colors

Research Questions:

  • How intuitive is our current user interface?

  • Can users digest key information at a glance?

  • Are users able to discover the visualizations?
     

Screenshot of the Figma prototypes we conducted our second round of user testing on

The updated Figma prototypes we conducted our second round of user testing on

​​About the dashboard:
​​
"I like the initial graph. It tells me everything I need to know at a glance." - K

"How are the 'perfect/good/low' scores calculated?" - J​

"I don't like the number score in the middle. Scores feel judgmental, like grades." - J


About preventive recommendations:

"I would be more willing to digest [the recommendations] if there was less text." -K
 
"At first, it seemed like too much information, but now that I'm reading, it seems quite helpful." -J


Q: If we told you there were visualizations to view, how would you view them?

"The grouping didn't make me think I would be looking for it." - K

"Not sure how I'd get to more graphs." - J

Key Takeaways:

1. Create a clearer separation of information

Users had experienced information overload on the dashboard and had trouble differentiating between goals and metrics on since both were placed closely together.

2. Transparency around how metric scores are calculated

Users were unclear and sometimes expressed disdain about how their main metric scores were calculated.

3. Visualizations need to be placed strategically

All users had difficulty navigating to the visualizations on the dashboard due to the lack of clarity that those visualizations existed.

End Result 📍

Before my team took on this project, the HerHeartCo mobile app was only a rough sketch.

My team took their direction and created a mobile app aligned with the HerHeartCo brand and mission. The design was validated by real users and iterated through multiple rounds of testing. We successfully provided the groundwork for the HerHeartCo app and accelerated its official launch date.

From left to right, Daniella, Sydney, Kristy, Trevor, and Bethany at our capstone gala presentation

My team at our capstone gala presentation! <3

Screenshot of our final design iteration

Screenshot of our final design iteration

Reflection 🔮

Since this was my first project as my team’s sole UX researcher, I was nervous about adequately advocating for and representing our user’s needs and pain points.

  • If given more time, I would conduct another round of user testing on our current design to receive feedback on the most recent design iteration.

  • If I could redo this project, I would create a structured research document to make research findings more accessible to my team and sponsor for reference.

  • I would also rewrite the user interview guide to have less biased wording and leading questions, which might have unintentionally influenced participants' responses.

Overall, this capstone project was a great experience that solidified my passion for conducting UX research to understand users and create solutions that resonate with them.

bottom of page