HealthConnect

All Your Health Records, Centralized

Project Type: End-to-end app, ideation, MVP
Role: Sole UX/UI Designer
Industry: Health
Tools: Figma, FigJam, GoogleMeet
Duration: 6 weeks

View Prototype

The Medical Maze

Navigating Patient Records

Healthcare has had major strides throughout the years as technology and research have exponentially improved. Along with increasing knowledge, there has also been increasing demand and expectation for people to be more aware of their health. Yearly check-ups are a given and on average, most people need to see their general practitioner 4-5 additional times throughout that year.

The problem: A yearly check up alone encompasses a lot of medical information and any additional check-ups will only add to that pile of information. People who are chronically ill are constantly going to different hospitals and specialists which can make keeping track of all their medical records quite difficult.

Even an average, healthy individual probably couldn't tell you the specific results of their last physical.

Research has shown memory of medical information is often poor or inaccurate, especially for older or more anxious individuals. This describes the majority of patients and without accurate medical information, patients my not undergo the proper treatment they require.

Diagnosing the Problem

Insights from Patients

Research goal: I aim to understand how users in the United States store and manage their medical records to optimize information retrieval while ensuring the privacy of their personal medical history.

Objectives:

  • Understand what users do after receiving medical results/feedback and how they store that information.
  • Understand in what cases/situations users have to recollect any past medical records.
  • Understand what state users are in after leaving a doctor's appointment or hospital stay.

Methodologies:

  1. Competitive Analysis
  2. User Interviews
  3. Card Sort

Competitive Analysis

Link to competitive analysis table

Major insights: While countries like Australia have a single platform for all patient medical histories, the US lacks this system. Analysis reveals similar features, but ease of access differs significantly.

  • What features are expected within a medical records app.
  • How information is categorized for ease of navigation.
  • How content is laid out for accessibility and readability.

User Interviews

My US participants: 

  • People who have chronic illnesses.
  • People who are personal caretakers for their loved one(s).
  • People who require extra medical attention.

Interview method: GoogleMeet

Interview duration: 30-40 minutes

Link to affinity map FigJam file

Major insights: User interviews gave a clear direction in pain points and use cases as to why a medical journaling app such as this is needed in the US.

Major frustrations stemmed from the fact that health records span across multiple different portals which make managing and recollecting much more difficult.

Insight 1
Users have a pretty negative outlook when they have to see a medical professional because it means something could be wrong and this affects how they remember information they receive back.


POV
Users need a way to record information from medical professionals because anxiety or a negative mindset can hinder their memory.


HMW
How can we simplify tracking of information from medical professionals for easy reference when needed?

Insight 2
Users get many different types of test results back from different healthcare providers which makes it difficult to organize and actually understand what they mean.



POV
Users need all their medical records in one space so they understand how it all connects and affects their health.



HMW
How might we help users consolidate their medical records in one space for easy understanding and reference?

Insight 3
Users need all the medical records they can get on their loved one(s) so they can give them the appropriate care.





POV
Users need to have access to their loved one's medical record (with permission) so they can properly care for them.



HMW
How might we allow users to access their loved ones' medical records to ensure optimal care?

Empathy Maps

Link to empathy map FigJam file

3 aggregated maps:

  • Users with chronic illnesses.
  • Users who are personal caretakers.
  • Users who require extra medical attention.

These maps offer insights into users' mindsets as they go to appointments or unexpected visits.

Card Sort

Link to card sort FigJam file

A card sort was conducted with 3 participants in order to help justify the hierarchy and information architecture for the app.

Major insights: Participants agreed on where most of the content should go. It was interesting to see how they perceived categories differently when they did. However, the results were quite similar overall, so I felt confident moving forward with the information I had.

Meet the Patients

Stories Behind the Records

I carefully crafted 2 personas to reflect the goals and pain points expressed by users during the interviews.

Link to persona Figma file

A Care Plan

The Strategy

Information Architecture

Card sort to sitemap: Integrating the feedback I got with my card sort, I created an initial sitemap, emphasizing information hierarchy.

With my sitemap, I had a clear understanding of how user and task flows should be structured, as well as the order of importance of each element.

However, the main issue arose from the placement of the "Add Record" feature. Although I had concerns about its location, I made note to address it during usability testing.

Untangling the Mind

Sign up and onboarding: Sign up and onboarding are major features for any app, however I wanted to ensure that I was maintaining enough privacy and security with this app as it was consistently mentioned during user interviews.

Adding a new record: Adding a medical record manually was the next biggest thing users mentioned during interviews. A major pain point resulted from individuals having multiple portals storing different medical records, making it difficult to easily access and remember certain information.

Allowing a trusted representative access: One of the target audiences for this app includes personal caretakers who expressed frustration over lacking the necessary information to provide appropriate care for their loved ones.

If they could easily, securely gain access to a loved one's account, this would help them not only with their plan of care, but the confidence they feel when they carry out their care.

Accessing past records: Finally, I needed to ensure users had easy access to their records whenever they needed them. For this, I wanted to see how users navigate the app to pull up the information they needed.

A Little Anatomy

Building the Heart of the App

The Bones of the App

I began by sketching ideas, aiming to keep the layout simple to ensure users coudl focus on content and navigation.

Adding Substance

Values: Understanding my audience from my interviews, I knew my app had to depict a trustworthy, compassionate, and accessible presence. I searched for inspiration on how other similar platforms have successfully done thi through their layout, content, and design.

Logo: I brainstormed various names, each with its unique feel. Although I was initially drawn to more "playful" options, it didn't align with the values my brand needed to convey. To present a more professional image, I chose "HealthConnect" for its smooth sound and established sense of trust.

I grappled with the idea of keeping the logo simple with just the name, but knowing it was for a mobile app made me consider adding an icon. To encompass my brand values of trustworthiness, compassion, and accessibility, I brainstormed various heart designs.

Link to logo Figma file

Ultimately, I chose the hand-heart logo. Feedback from my peers and mentor confirmed that it effectively captured my concept while being memorable.

Link to color Figma file

Colors: As a health app, my initial thought was to use blues with cool neutral tones, following the trend of similar platforms. Although I considered adding more colors, I recognized that a simpler interface would be more accessible for users with vision issues.

I decided on the bottom hues of blue in the middle palette. Using different variations of these blues, I thought it would work well with maintaining my brand's values while giving the app an overall clean, put-together look.

Link to typography Figma file

Typography: To maintain a simple and professional theme, I opted for a sans serif font. Although some serif fonts also fit the description, I found that sans serif offered better digital legibility as well.

Legibility: I researched the most readable sans serif fonts and tested a few options. After experimenting with different styles, it became clear to both me and my peers that Source Sans Pro was the winner, being most consistent and easy to read.

Digitizing my sketches was straightforward and quick, particularly since many of my cards were repeating elements throughout the app.

What's great about mid-fidelities?: The first version of my digitized sketches are a perfect happy place in regards to commitment. The layout and look of the app is clearly visualized, but feedback or iterations can be applied without too much trouble.

Adding touches of color: This is always one of my favorite parts of the process. As I applied the chosen colors to each element and placed my logo in its designated spots, I began to see my app come to life.

Dashboard: The dashboard is the primary space for users to access stored records, so it was crucial to ensure a clean, organized layout for easy navigation.

Past appointments and adding a record: Given the importance of past appointments, I anticipated users would spend most of their time there.

However, I was a little concerned about the visual disparity of the "Add Record" CTA, as it did slightly differ from the other cards.

Accessing records: The app's primary function is to provide users access to their past medical records.

My main goal for this screen was to create a spacious and easily readable layout, as emphasized by my participants during interviews.

The bits and bobs: These are the key components I designed to achieve a simple, cohesive look throughout my app.

Link to UI kit Figma file

Although it is quite simple, I wanted to ensure my users could focus on the content of their records and tests rather than a loud, distracting interface.

Vital Signs

Testing for Reliability and Usability

Putting it to the test: User testing was conducted with 5 people who were all from the US and fit 1 of 3 categories from my target users.

Interview method: GoogleMeet

Interview duration: 30-40 minutes

I anticipated no issues with flows 1 and 3. However, I was interested in seeing if users would intuitively find where to add a new record and access their last physical exam.

Because I received feedback that it may not be clear where to start, these 2 flows were my primary focus for testing, along with a few other minor aspects of the app.

Link to full user testing analysis FigJam file

Onboarding success: As expected, all 5 users had no issues getting through the first flow. There were suggestions to rearrange the order of part of the onboarding to ensure username and password creation came first like a typical app.

Location issues with adding a record: When users were asked to insert a new record, 3 out of 5 navigated to the health summary, while the other 2 expected it to be within the dashboard.

Otherwise, they found no other issues with the task.

Another success with representatives: Just like the first, users had no issues with the third flow and actually really liked the features associated with it.

Not only were they impressed with the ease of connecting a representative, but also approved of the extent of the security measures.

Readability difficulties within appointment details: Most users had no trouble locating physical exams and other appointments but also expected to find the same information in the “Tests” section.

Although the bolding and font size did make each section distinct, they felt the content within the exam wasn't sufficiently spaced which made large amounts of text difficult to read.

The Follow-Up

Ensuring a Cohesive Experience

Fixing location: It was clear from usability testing that the location for adding a new record wasn’t as intuitive as I thought. Instead of placing it within a specific section, my users and I found it appropriate to give it its own section.

Not only does this make it significantly easier for users to find, but having a separate section also keeps track of which records were inputted by the user.

Adding location: The second most pressing iteration was allowing users to look for the results of their physical exam, or any exam for that matter, within their tests.

Adding a page for tests proved to be quite simple as I wanted to remain consistent with my design throughout the app and followed the design system I had in place.

Summing Up

Lessons and the Road Ahead

What's Next?

There were many additional features I wanted to incorporate based on user interviews. Given more time, I would have liked to include them, but I focused on the essential features needed for a minimum viable product.

Future additions: Although I couldn’t get it done within the time, these are some features I wanted to test and add:

  1. Notes section for users to compile documents and reminders when they go to see a health provider next.
  2. Medical term/concept educator for difficult medical concepts.
  3. More in-depth card for providers including their contact information.

Key Takeaways

This project challenged my limitations and time management skills. Due to issues with my other projects, I had less time for this capstone than I had planned. However, I knew I needed to invest meaningful time and energy to properly design for my users.

New growth:

  1. Time management with an end-to-end project.
  2. User-centric designs.
  3. Prioritizing features for an MVP instead of rushing and losing focus of the main problem.

Thank You!