Before jumping into ideas, I went over the app requirements to really understand the scope of the project.

A competitor analysis was conducted on key competitors to understand the problem and market space.

Conducted a S.W.O.T analysis & UX analysis : Evaluated their usability, layout, navigation structure, compatibility, differentiation, and call to action. This helped identify product opportunities for an app that integrates handling multiple health aspects in a quick & trustworthy way while encouraging users to pursue healthier habits.

User Research

To get a better understanding & observation of our potential users, I conducted a few interviews with 3 goals in mind:

Prior to the interviews, I ran a short survey composed of 14 questions total, with 6 short free-response questions and the rest as MC. The goal was to obtain at least 10 responses. I obtained 14 in less than 3 days.

For the interviews, I recruited those who were genuinely interested in improving their health & had experienced tracking their health or booking appointments through websites/apps/ even phone.

High-level Insights

All participants are health-conscious individuals.

• People get discouraged when appointments by phone are difficult or tedious to make.

• Participants are struggling with keeping a consistent sleep schedule, which leaves them feeling lethargic.

• People feel motivated by visual representations of progression, notification nudges, and/or motivational reminders.

• Sometimes other things prioritize people’s health routines.

• People need motivation and flexible options to make progression on a busy schedule.

User Personas

Analyzing the findings gave me better insights into the target audience. I was able to discover how they interact with products and handle task management relating to discovering healthier choices or booking appointments. I was also able to dig deeper into what drives their internal and external motivations

To realistically portray our target users and establish empathy towards who we’re designing for, I created user two user personas. These were based off the data and user needs.

Sitemaps

Proposed Sitemap

I created this sitemap with co-existing hierarchies so that users would have a general location in which to input their information as well as a page to find overall health-related information.  I also isolated the medical and mindfulness tabs. The goal was for all sections to be easily accessible.

However, after conducting open card sorting I validated some of my beliefs but invalidated others. I had to make refinements to the sitemap so as to accommodate user’s  mental models better.

To establish how the app’s pages would be laid out before creating mockups & validating the content structure, I conducted open card sorting with real potential users.

I recruited 5 participants interested in completing a digital, open card sort. They created a total of 24 categories with a median of 4 categories each. I used OptimalSort and used all of the 20 cards allowed with the free plan to include the basics of the content that would be included on the sitemap. Based on the results, I iterated on the sitemap to produce the following:

Analysis

After going through the data, I realized that my categories could use different naming conventions. Many participants separated physical aspects of health from mental aspects – which I was content about– but used slightly different terminology that was more upfront in its own way. Rather than ‘health and fitness’  and ‘mindfulness,’ these became ‘body’ and ‘mind,’ highlighting the area of focus in the user’s health as they navigate through. 

Also, although there were a total of 24 categories created, many of the categories were similar in their groupings – such as ‘profile’, ‘general’, and ‘tools’. Most of the users categorized medical information and tools together. However, the majority included ‘records’ under the category of profile or general tools and account features. Therefore, I decided to include records and inbox under the user’s profile. This was also the case for “inbox” or notifications.

Also, I realized that I could label “tracker” /“planner” as “Plan”  and integrate as a co-existing hierarchy for easy access. 

This feature would allow users to easily book a doctor appointment with their providers or with someone new. Additionally, it shows the option of a virtual versus an in-person appointment.

Mid-Fidelity Prototype

Using Figma to create my mid-fidelity prototype, I added more details to better communicate specific interactions. I focused on establishing a better sense of what would happen next when items were clicked on. I used grayscale to focus on the interactions before spending too much time on visuals.

High-Fidelity Prototype (not final)

For my high-fidelity prototype I focused more on the placement, fonts, and button sizes. I wanted to generate the look and feel of the app, adding minimal color & omitting specifics.

Exploring Desktop Design

Although I was focused on a mobile-first approach and on mobile device testing, I created a few desktop designs for each of the flows in order to depict how the design could transfer from one screen size to the next. This image shows the first step when booking a doctor appointment.

Usability Test

After conducting a series of moderated and unmoderated usability tests with 6 participants, I sorted out the data into an affinity map and used a rainbow spreadsheet to showcase which data point– or error found– belonged to its corresponding participant. Then, I created the following affinity map to identify insights.

The map helped me further understand user attitudes, needs, and expectations. The rainbow spreadsheet also helped me rate the errors based on frequency and usability issue. After this, I proceeded to make fixes based off my prioritized errors.

Takeaways:

• It’s important to make the users feel at ease and make sure that tasks are easily understandable.

• The “Sleep Tracker” feature could probably be placed under the “mind” or mindfulness page as five of six users navigated to that page when listening to the task.

• The flow for booking a doctor’s appointment could use clarification and updates on the UI for trustworthiness.

• Sometimes it is necessary to improvise when asking users to navigate through your prototypes so as to dig deeper and gain a better understanding of their feelings and perceptions.

Updates based on testing

I made the following updates based on testing. Additionally, some of these updates were verified with A/B testing through UsabilityHub, including a response of 13 participants.

Designing for Accessibility

After creating a style guide and receiving feedback from a few designers, I made sure my design was more accessible/inclusive. The following changes were implemented in order to improve the accessibility and usefulness of the app.

Here, I made sure the input fields had a greater contrast with the background color to improve visibility. I also added placeholders to clarify what type of information is being filled.

The visibility of the estimated time to complete a workout or recipe was too dependent on its contrast against the images.

For consistency and greater visibility, I decided to add a dark blue bar with white text on each content card. This way, users can easily spot the approximate time an activity will take.