Health Spot
A personal medical records app focused on simplifying and centralizing your medical health information
Role
UX Designer leading the app from conception to delivery
Responsibilities
- Conducting Interviews
- Paper and digital wireframing
- Low-medium-high fidelity prototyping
- Usability studies
- Accounting for accessibility
- Iterating on designs
- Determining information architecture
Project Duration
8 months total
Tools
Miro
Usability Hub
Figma
Optimal Workshop
Overview
People are seeking tools to help them stay on top of their health and wellness, as well as for greater balance between the challenges of health, wellness, work, and life in general. There are a number of online tools available that allow individuals to record their health and medical information however, they’re rarely designed in a way that’s inclusive of users varying needs.
The Design Process
Empathize
- User Interviews & Surveys
Define
- Affinity Mapping
- Journey Maps
- Personas
- Synthesis
Ideate
- Sketching
- Information Architecture
- Sitemaps
Prototype
- Wireframes
- Mid-high Fidelit
Test
- User Testing
- Feedback Implementation
The Problem
Users need a way to securely record their health and medical information and access medical advice and information between medical visits because users want to live a healthy and vibrant life.
The Goal
To create an app that allows individuals to log into a responsive health and wellbeing portal to track and record their health and medical information, and to be able to manage their health in between medical visits.
Target Users
The target audience is any individual who wants to maintain their personal health data and have control over it, individuals who want to be active in their health and healthcare, and individuals who are looking for one place to have all of their healthcare information.
User Interviews
User Interviews were completed with 4 users to help understand user needs, pain points, and to empathize with the users.
After completing user interviews and empathizing with the users, I then created an affinity map to better understand the target user and their needs.
Data synthesis revealed that
User Personas
Next, I created user personas based upon research to represent the different user types that might use this personal medical records app. Creating personas helped me understand the users' needs, experiences, behaviors and goals.
After creating user personas, I created user journey maps based on individual tasks that specific user groups will need to take within the app. I created one user journey map for each persona.
At this point there was enough data and information to create user journey maps. However, there was a ton of data, information, and directions the users maps could go. In order to decide on which user journey maps to create, I revisited the user interviews. Reviewing the user interviews made it clear that one set of users was more focused on preventing health issues and the other set of users was focused on ways to help manage medical issues.
By creating user journeys, I was able to better understand the various tasks different user groups would need complete in order to meet their goals and needs.
User Journey Maps
Target Users
I created an initial sitemap from user research.
Then, I conducted an unmoderated card sort with 6 participants using Optimal Workshop. I completed the card sort to validate categories that were used in my initial sitemap.
After analyzing the card sort data, decisions were made on how to update the sitemap. In order to reflect how participants named the groups I decided torename "Health Records" to "My Health" and "Health & Resources" to "Stay Healthy". Based on user groupings I decided to group together settings and add profile, and costs & deductibles, insurance info. under profile, group together health stats, procedures/surgeries, past visits, vaccinations, allergies, tests/lab results, medication management, and schedule appointment under my health, group together health articles, health programs/classes, and medical terms under stay healthy, and under messaging group together contact doctors office, inbox/sent messages, and share medical information.
Updated Sitemap
Blue highlights the updates made on the sitemap after the card sort.
At this point I had enough information from the card sort and the revised sitemap to sketch out a skeleton of the app. While drafting paper wireframes, I created the initial designs for the Health Spot app to focus on including users goals and needs.
After iterating multiple versions of paper wireframes, a final version was complete. I then created mid-fidelity prototypes to set up the screens based on the user flow.
Usability Study
Study Type
Moderated Virtual Study
Location
Remote
Length
15-30 Minutes
Participants
6 Participants
After conducting 6 usability studies
• I created an affinity diagram using Miro to organize the qualitative information about the users and group it by category.
• Following the affinity diagram, rainbow charts were created to help the data become more digestible in order to create fixes and next steps.
A System Usability Scale (SUS) was completed and evaluated.
Finally, all possible solutions and next steps were identified by using Jakob Nielsen’s severity rating to prioritize the changes.
Preference Tests
Preference tests were conducted using Usability Hub on four screens: the sign in screen and three onboarding screens. The test was open for 24 hours and received 10 responses.
After completing preference testing the final screens were selected.
The feedback received from the usability test and the preference test were reviewed, prioritized and implemented accordingly.
Accessibility Review
After completing an accessibility review of Health Spot, I identify areas that could be improved to be more inclusive for users.
01
Font Size
Larger font size throughout the app.
02
Colors
Update the colors that do not meet section 1.4.3. of the Web Content Accessibility Guidelines (WCAG) standards.
03
Form Fields
Improve the login/signup page to meet form field best practice particularly to improve form labels and placeholders.
Style Guide
A style guide was created in order to create a set of standards for designing content and to help maintain a consistent style across the app.
Final Design
Prototype
Prototype is available if you view on a desktop.
Health Spot Demo
Take Aways
1
Even though there are a number of online tools available that allow individuals to record their health and medical information, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful for the users.
2
There is no single "right way" to do anything. There were so many avenues that could have been taken and by using empathy, data, research, and user feedback helped guide me on this particular path to this final design.
3
There were a lot of challenges along the way including time consuming tasks such as preparing for, scheduling and conducting interviews, usability studies, and preference tests. Also having to reschedule or find more users to interview or test. Being adaptable and patient will help you go through many challenges that arise during your project.
© All 2022 All rights reserved. Design by Katrina