UX/UI Case Study: Mobile Health and Wellness App Design Concept

Riley Pelosi
12 min readFeb 27, 2019

--

Introduction

Health Pal is a product that came to life through my UX Design 10-month certified training program at CareerFoundry. Initially, the project started as an expert app that would enable anyone, anywhere to instantly chat with an expert in virtually any field. After conducting surveys and user interviews, I learned that there’s a great need for a particular expert product, I pivoted from building a product that would touch all expert categories such as business, home improvement, law, and health to focusing on one expert category. My survey results concluded that Health ranked highest in terms of greatest expert need by users. Through this discovery is where Health Pal, my health and wellness product, is born.

What sets Health Pal apart from its competition, is the primary feature, which allows users to have access to an intuitive and reliable Health Pal, a health care assistant, that helps answer user questions and connect effortlessly with health and wellness experts who are proficient and highly recommended in their fields.

Teachers

Dana Lynn

Dana was my wonderful Career Foundry UX Mentor who critiqued my work throughout the UX Certified Program and gave me high-level solicited advice during our 1-on-1 skype sessions. Dana is a UX Design Lead at Hewlett Packard Enterprise with many years of experience in the design and tech industry.

Evan Verdoia

Evan was my Career Foundry UX Tutor who critiqued and approved my weekly assignments, provided feedback, relevant UX articles, and answered any questions I had about the course material. Evan is a UX Designer at CA Technologies based in San Francisco.

Anthony Pelosi

Anthony, my husband, and occasional product and tech mentor since 2014, helped provide product feedback, constructive UX design criticism, formulate long term business objectives and tested my prototype. Anthony is a Product Director at BCG Digital Ventures.

My Role & Process

Health Pal is an individual project which allowed me to plan and direct each step of the design thinking process as a UX strategic design student with mobile and web UI design experience. Starting the project, I conducted generative research first to understand my potential users and the complexity of their needs, motivations, and behaviors. This research helped define Health Pal’s problem and provided insights to inform the ideation phase. During the developing process, I moved through the lean feedback loop (build, measure, learn) making design improvements and increasing the usability of my prototype based on moderated usability test, a/b test, and preference testing to finally deliver my finished product and it’s three core features.

Design Methodologies

When working on a new project, I begin my process with design thinking and gathering generative research through empathy and a deeper understanding of user needs and desires. Afterward, I’ll combine the systems and design thinking methodology during the phases of evaluating, defining and developing the product. I’ll consider the big picture first and the specific interactions later. What are the core components in the product, how are they connected, what does the overall purpose of these elements serve? Do these elements solve my persona’s problems? By understanding the inter-relatedness of the collective system, I can better design for the user journey and behavior through the entire ecosystem.

Surveys and Interviews

To get the project started, I began my research by formulating questions to ask people who need the advice of an expert, but don’t have a friend or family member to call. My target age demographic is 18–40 since younger people are less likely to elicit expert help and older people may be more likely to be turned off by the technology and the virtual call aspect. I kept an open mind and considered everything about my customer by listening to them and learning about the complexity of their needs.

Click link to view: Survey and Interview Results

Affinity Map

With the results of my survey and interview research analysis, I synthesized the data collected through the creation of an affinity map. This process is a great method to help me make sense of all my information when I have a lot of mixed data. After synthesizing the data, I built user personas, user journey’s, and user flows showcasing the data grouped based on identified themes, and a list of insights supported by relevant examples and presented in a logical, visually engaging way.

Click link to view: Affinity Map

Key Takeaways:

  • Health and wellness is the highest ranked expert category needed for those seeking expert advice.
  • People more frequently find an expert through a personal network of colleagues, friends and family referrals.
  • My survey results state that 54% of users search for an expert on their own rather than any other form. That said, in my moderated user interviews 75% of people would rather have someone provide expert recommendations to them rather than researching on their own.
  • 66% of users would prefer to receive an experts advice by phone or video call than any other form.
  • People appreciate when experts follow up with their questions after the service has been provided for no additional charge.
  • Having a virtual consultation between expert and customer will help speed up the process for receiving help.
  • Providing expert ratings, qualifications, reviews, price, location, and measurable goals are what people are looking for when making a final decision on working with an expert.
  • More than 70% of the time people will check Google and Yelp reviews and ratings even after receiving a referral. How can I incorporate google and yelp ratings and reviews in the app? How can I validate and build trust with the ratings and reviews of an expert?

Competitive Analysis

I chose two potential competitors for my product and built their marketing profile, SWOT profile and conducted a UX analysis of their products. The goal was to identify what type of problems users encounter with competitor products, as well as understand what the users might expect from my product.

Click link to view: Competitive Analysis

Usability Heuristic Evaluation

After collecting generative research, I decided to move forward with designing a product that was the most needed expert category by focusing on the Health and Wellness industry. I conducted a Usability Heuristic Evaluation using Nielsen’s 10 Usability Heuristics with Health Pal’s biggest competitor ZocDoc.

Click link to view: ZocDoc Usability Heuristic Evaluation

Problem Statement

Users need a way to utilize a health assistant to provide tailored research for their specific health needs because they are busy and often struggle using their health insurances web portal to find a health practitioner and schedule an appointment.

Hypothesis

We will know this to be true when we see how many users are submitting requests to our health assistants and in return the assistants are able to effectively handle all healthcare needs by providing best doctor recommendations, available appointments that meet the users schedule, and book their next appointment for them.

Potential Solutions

Develop a competitive industry-specific expert market place, a health assistant app, that delivers solutions to patient problems and eliminates the time it takes to find the perfect health expert utilizing a health pal. The goal of this app is to give people a simple, intuitive way to book with health practitioners in nearly any field quickly by utilizing an informed health assistant so they can stay on top of their annual checkups (and not-so-everyday) health problems.

Business Requirements Document and User Stories

Wrote my first executive summary, business objectives, scope, functional requirements, delivery schedule, and user stories. Keep in mind I wrote this before pivoting my product business model. I did not have time to go back and revise. Click link to view: BRD and User Stories

User Personas

Based on the generative user research I gathered, I created three user personas that capture the essence of my target users. Meet Nya, Alex, and Kate!

User Journey’s

By creating persona journey maps, I wanted to illustrate the process of how Nya, Alex, and Kate behave, feel and what they think while accomplishing their goals to detect pain points or moments of delight.

User Flow’s

I built user-focused flows to ensure that my personas can successfully complete their key objectives while reducing the existing pain points.

Card Sort

I conducted a closed card sorting user test using OptimalSort to help design and evaluate the information architecture of my app Health Pal. In my card sorting session, the participants organized cards/content topics into already determined categories that made sense to them. I had 6 participants take my card sorting test and listed below is what I took away for analyzing the results of the test. These results were taken into consideration when building the second version of my sitemap.

The popular placement matrix helps me understand what cards were placed in which categories that made sense to the 6 participants the most. When viewing the popular placement matrix, it’s easy to see how the results can help inform my decisions for my sitemap.

Example:

Card- “View health experts calendar for available appointments”

Category -100%, all 6 participants placed this card in the “Health Expert / Doctor Profile” bucket.

Click link to view: card sort study results

IA Sitemap

I created two different versions of my sitemap; the V1 Sitemap provides more details of the user journey, whereas the V2 Sitemap offers a higher level flow of the user journey. While building the sitemaps, I took into consideration all the research I have gathered thus far, the user personas, journeys and flows, card sort test, ZocDoc content audit, and usability heuristic evaluation. This process helped with informing the structure of my information architecture and how my primary features should be mapped out. Below are the two versions of Health Pal’s information architecture.

Sitemap V1

Click link to view: Full V1 Sitemap

Sitemap V2

Paper Sketches

Focusing on the core features identified during user research, I sketched the first wireframes of Health Pal using pen and paper. Afterward, I tested the paper prototype with 3 participants to validate my initial design ideas.

Click link to view: All Paper Sketches

Mid-Fidelity Wires

I designed a mid-fidelity prototype for my 3 core features and have taken my user personas through the feature build. For these feature flows, the persona has already launched the app and is engaging with the core product.

Core Features:

Health Pal - Ask questions, get recommendations, and book appointments with your Health Pal.

Search - Eliminate the time it takes to find the perfect health expert.

Video Call - Conduct health expert consultations and appointments over the phone.

Click link to view: All Mid-Fidelity Wires

Initial High-Fidelity Mocks

I took my mid-fidelity wireframes and converted them to high fidelity mocks, a total of 58 screens. I created all iOS designs through sketch and made character drawings. I also later played around with motion design using after effects to visually express and enhance my on-boarding screen.

Usability Test Plan and Results

The purpose of my usability test was to assess the learnability for new users interacting with the Health Pal application for the first time on a mobile iOS device. I observed and measured the success rate of 6 participants completing 2 task attempts each. I documented whether the participants understood my product, the value of my three core features, and how to achieve essential functions.

Click link to view: Usability Test Plan and Results

Before: Before the test I created a test plan, script, consent form, recruiting plan, and updated sitemap (mapping out the A/B test and tasks).

Test: The usability test was conducted as a moderated study, three in person and three via Google Hangouts. I asked participants how they go about booking health appointments and gathered their impressions while completing the tasks. Participants then commented further during a short debrief.

A/B Test: During the moderated study I also observed the participants preference with regards to signing up and creating an account. Do the participants prefer to ‘Sign Up’ at the beginning after launching the app, or would they rather ‘Skip” the sign up flow, and use the app to make sure they are enjoying the experience first?

After: After the usability test I then synthesized the data collected using an affinity map, rainbow spreadsheet, made recommendations to fix issues with my prototype, updated high-fidelity screens based on recommendations, provided learnability metrics and a usability test retrospective.

Click link to view: Usability Test Plan and Results

Usability Test Highlight Reel

Design Feedback

After my usability test and iterating my health and wellness iOS prototype, I reached out to my design slack channels for UX/UI feedback from designers and product managers who have more experience than I do in the field to provide valuable feedback. I am thankful that Ian, Philippe, and Anthony took the time out of their busy work schedule to make insightful comments on my UX/UI final project. Thank you so much!

I have documented all the highly valuable feedback provided through InVision, and have made the necessary design iterations to improve the app’s overall experience.

App Video Presentation

Design Documentation

My UI Style Guide is a design and development tool that brings cohesion to my digital product’s user interface and experience. All brand and UX components including usage documentation will be managed in a single sketch file. This file has been built based on Atomic Design principles, an effective interface design system which is not a linear process, but rather a mental model to help my team members think of our user interfaces as both a cohesive whole and a collection of parts at the same time.

Click link to view: Health Pal’s Design Language System

High-Fidelity Prototype

Project Deliverables

End to End Design Work PDF (169 pages)

Usability Test and Findings

Design Language System

InVision Prototype

Outcome

Overall users enjoyed the experience of being able to talk to a Health Pal and have the Health Pal book appointments for them, rather than going down the rabbit hole of using their health insurances web portal to make appointments. During my moderated usability test I conducted with 6 participants, I gathered some great insights to make my product more user friendly with future iterations. Health Pal has gone through 4 design iterations with usability testing, preference testing, mentor feedback, and senior design and product manager feedback. That being said, there is still more room to improve and I am just getting my product off the ground.

What’s Next

The area I would like to research and test further is the Health Appointment Booking Experience utilizing the Health Pal. A user pain point I picked up on and have not solved yet while testing, was the need to improve and provide a more efficient way for combining a patients and health practitioners schedule together in order for the health booking assistant to confirm the best appointment time. I would also like to research and categorize what health practitioners offer virtual and in-office health appointments? What types of appointments meet this criteria? What types of health practitioners are these? What are the methods of payment the health practitioners will accept? The booking experience will improve as I dig further into answering these questions and providing solutions.

--

--