Healthsome

As a student of CareerFoundary's  "UX immersion" course, I was tasked with designing a responsive health and wellbeing web app that allows health-conscious people to record their health and medical information and access general physical and mental well-being features. 

My first step was to research the market and see if there was a potential opportunity and assess the current competition. During this competitive analysis, a gap in the market was found. No single health application simultaneously focused on the medical and mental aspects of health. 

Gathering information on the competitors gave me a potential problem statement and a better picture of what users expect from a health app. This helped me create a Business Requirement Document, Functional Requirements, and User Stories. However, all the hypotheses formed during this stage had to be justified by real users through user research. 

• Better understand user behavior and motivations when any health-related issues arise. 

• Determine which tasks users would like to complete using a health app. 

• Document user pain points with existing health and wellness apps on the market. 

• Collect data on the context in which users would use health and wellness apps. 

The research validated the assumption about the frustration around the lack of a unified health app. 100% of the interviewees use different apps to fulfill their health needs, and they find it inconvenient. Also, most users expressed interest in personalization/coaching, mindfulness, and tracking. 

• Users need personal dedicated coaches/experts who will understand their individual needs. 

• Users expressed the need for social interactions as a way to support and motivate themselves in their health journey.

• Tracking mental state or mood was expressed by many as an activity they need to better understand their emotional patterns on a day-to-day basis. 

• The majority of health-conscious individuals would like a way to reduce stress and want to practice mindfulness. 

In order to better visualize the target audience for Healthsome, 3 user personas were created with qualities extrapolated from the user interviews.

These personas would later guide me in the decision-making prosses as they represent the overall ideas of the findings from my research. 

The most common scenarios were put into user journey maps taking into account persona's goals, needs, and motivations. I imagined what actions personas would take in each scenario and how they would feel while achieving their goals. Empathaizing with my users was the most important part of this task. 

A responsive web app that helps people connect with their health specialists anytime, anywhere; while also providing fitness and mood trackers along with different resources to help users stay on top of their health.

It was time to think about the content necessary to be included based on all of the information I had gathered. I did it by considering the importance of the mobile-first design method. I defined which persona needed certain features, which devices should include them, and why.  

The following features were defined as MVP to resolve the user needs that were identified. Other features from the sitemap will be developed later.

After defining each user's objectives, I outlined each task's entry and success points. Then every interaction was mapped out into a user flow to ensure a user-centered design. 

Based on persona-based content and user flows, the initial sitemap was built and then revised due to some findings through a card sorting activity. 

After completing user flows, it was time to build the app's infrastructure. Considering user personas and their journeys, I created the initial sitemap. Later, I conducted a card sorting activity to validate or invalidate my decisions. This activity helped me understand my users' association with labels and my chosen categories. Using OptimalSort, I created 20 labels and conducted open and closed card sorting to test my assumptions. I had about 10 people per activity, which gave me a good picture of how users group things. 

• Many people believed "yoga" to be an activity for the body and the mind. Open card sort also revealed that people grouped "mind" and "body" activities in one. I decided to merge these categories into one to avoid confusion. 

• Subcategories "My health recommendations" and "Health records" were distributed between categories " Specialists" and "Me" respectively. I chose to create a separate category: "My Health," to make the navigation easier for my users. 

• Participants seemed to have difficulty grouping "profile," "help," and "settings," so I decided to create a footer and a separate category named "Profile." 

Based on the 3 user flows, I created a few versions of low-fidelity paper sketches. They helped me capture the key information for each page and shift my focus from aesthetics to the app's high-level functionality. 

The initial sketches were re-drawn digitally and refined to generate basic low-fidelity wireframes using Figma. These wireframes contained more details but kept basic. 

Based on the low-fidelity wireframes, I created an interactive prototype.  Although this version lacked colors, user interactions were developed to showcase how the full-fledged app would function. This would allow users to thoroughly test the features and provide useful feedback. 

This study aimed to assess the Usability of the Healthsome app on a mobile device. I hoped to gain clarity around how real users would interreact with my product, both the difficulties they would encounter and what would work well for them. This information could then be used to address any significant issues if any were prevalent and further improve the app.  

• Determine if participants understand what the app is about and the value it provides. 

• Observe how users navigate to complete their tasks — can they successfully find what they're looking for? 

• Find usability issues that users might face. 

The majority of the participants had no difficulty completing all tasks. However, 1 serious usability error was found: the back arrow was missing. After analyzing the test result, the following opportunities for improvement were identified: back navigation, home screen layout, flow for event registering, and logging activities flow. 

Rainbow spreadsheet 

Below are the top issues multiple users experienced during their test sessions. I later implemented solutions to the issues in the latest prototype iteration. 

After iterating the app to include my solutions, I executed a preference test for the following screens: the landing page, the home page, the local event page, and the health specialist page. These pages showed some issues during the usability test; therefore, I used this opportunity to put them to the test and see the outcome. 

After turning all screens for the determined flows into high fidelity, it was time to get them checked by other UX designers. Sharing my work with my peers helped me identify mistakes I made and brought fresh ideas and solutions. 

• Because many people during the user testing mentioned that the home page looked cluttered and contained a lot of information, I decided to revise what my users would actually do on this screen. Now users can pick what categories they want in the quick access menu from the home page. 

• The position of the menu icon was changed to a more common one.

•  The CTA changed color due to contrast ratio issues.

• The categories were renamed to make the screen look neater. 

• The initial idea of the search bar was not convenient for Users and was changed several times. The final version of the search bar has standard filter and sort buttons to allow for a more granular search. 

• During the user testing, I realized that not all of my icons on the "action pannel" underneath the image were clear/necessary for users. I changed them and added a little more relevant information. 

•  Users also pointed out that the calendar was confusing if each card already had a date on it. That's why I removed the calendar and added the confirmation page before users register.

• Some users stated that they shouldn't input their email to get a QR code. They would expect to see it in their profile. I added that note to the confirmation page with the link to it for quick access.  

• The initial idea of the "share your logs" on the chat page wasn't understood by users during testing. I decided to give the chat page a more standard look and hide this feature under the attachment section. 

• The specialist's page changed according to a design system implemented. 

•  During the peer review, I learned that it was not clear to everyone that they could access the specialist's page by clicking on their picture or name. I then ran a preference test between the version with the specialist's name being underlined and a card version. Most people preferred the card version because of its clean look and consistency with other pages on the app. 

I applied visual design principles throughout the app, which helped shape and improve its Usability. The following principles were used: Gestalt psychology, Gestalt Laws of Grouping, and Principles of Design. 

My web app is meant to work for all people, regardless of disabilities or impairments. After reading about accessibility, I  realized that I had some issues with contrast, typography, and field forms. So I addressed them as seen below. 

UX documentation is a crucial part of the UX design process. It serves as a reference, giving context to the product’s journey from the initial concept to the current iteration for whoever is going to work on the product next.

Final Design Look