A Conceptual Health Web Application



The Problem





Adults carry many hats for themselves and their families. Between working to make money for living expenses, balancing the emotional well-being of their loved ones, or pursuing hobbies and passions for themselves, available time for proper health care management becomes minimal. As a result, many adult's physical well-being may suffer and proper healthy habits go undeveloped. Since busy lifestyles can inhibit health habits, adults (health-care consumers) need a way to learn about, plan for, and be educated on developing health life habits.


By providing a digital tool that allows a user to control three major aspects of their health management (health-provider management, nutrition, exercise) we can be a part of helping adults create healthy habits for themselves and their families. We will know this to be true when we see users managing their health appointments, exercise plans, and nutrition needs through the Health-Start web app.



Project Overview





My roles for this project covered all aspects from UX Research, UX Design, Testing, Interface Design and Presentation.


Tools used for this project:

  • Affinity Designer
  • Affinity Photo
  • Optimal Workshop (Card Sort)
  • Zoom (for interviews and testing)
  • Balsamiq (low-fidelity wireframes)
  • Adobe XD (mid/high-fidelity wireframes, mock-ups, and prototypes)


Competitive Analysis





In order to gain a more wholistic understanding ofthe current products that users have access to for interacting with medical providers as well as health resources like nutrition and fitness, I completed an in-depth review of a teladoc service called HealthTap and a patient/provider portal web-app called MyCHOP (licensed from MyChart by EPIC).


I reviewed the overall objectives and strategy that I could gather for both products and completed and in-depth UX Analysis for the HealthTap web-app. Details of the analysis is below along with screenshots of the apps:



HealthTap Screen Shots



HealthTap Competitive Analysis



HealthTap UX Analysis



MyCHOP Screenshots



MyCHOP Competitive Analysis



User Interviews





With a complicated app like HealthStart that has a goal of 3 primary functions for potential users, the goal of my initial research was to identify major motivators and struggles for people who want to make significant changes in their health habits. A variety of participants were selected including habitual exercisers and nutrition trackers, people who have made recent changes, and people who have struggled. Also, participants differed in their life stages with some being married with children, single with adult children, or young and single. The interviews were conducted over the phone or through Zoom software where the participant could be seen. In addition to the interviews, a survey was conducted where 17 participants answered some similar questions as the interviewees, but several questions were added to the quantitative study such as how often someone exercised and how many doctors they see in a year.

  1. Do you currently use electronic aids like applications in monitoring your health and well-being?

  2. Tell me about your experience with your favorite mobile app? Why do you like it?

  3. Tell me abut an experience with an app that was frustrating?

  4. How do you feel about your overall health?

  5. What are some goals you would like to accomplish in your health? What do you think would
help you accomplish them?

  6. Please describe how you plan your day-to-day diet?

  7. What are your feelings toward exercising? Why do you feel that way?

  8. Think of a time where you tried to establish new lifestyle habits. What were some failures
and successes you had? How much motivation did you have and how long did it last?

  9. How do you feel about interacting with health providers? What do you find easy or hard
about it?

  10. Describe how you keep up with and store information on your providers? What do you
think could make it easier?

  11. Have you ever participated an accountability/peer group? Do you think it helped or
hindered when trying to accomplish your goal?

  12. Imagine you wanted to start a new diet program next week, where would you start? What information do you think would be important to learn before starting?

  13. What level of involvement or interest does your employer show in your overall health? How
could they help you in your health goals?


What I found was that participants who struggled with the developing good health habits struggled to do so because of their busy lifestyle (primarily familial duties) and would often start and then quit shortly into their journey. A majority of respondents and interviewees reported knowing that they needed a change, but couldn’t make them stick. Those respondents who did develop and maintained healthy habits reported being able to do so from incremental steps and by creating a plan to follow. Perhaps the most telling findings of the interviews were how the majority reported severely disliking or even “hated” interactions with doctors and other providers. All citing that the effort to find a new doctor that worked within their insurance network and with an open appointment to be among the most frustrating aspects. Others felt judged by doctors even though they were healthy and one respondent in the medical field who felt access to care should be easier than it is.



Affinity Maps





Taking the findings from the interviews, I organized the responses into "Response Squares" that were color-coded according to the 4 interviewees. With them, I created an affinity maps to see how the input from the users correlated with one another. By doing so, I was able to synthesize some insights and potentially important features to have in the web-app even in the MVP stages. Overall findings from the interviews included:

  • Finding, choosing, and visiting a doctor for the first time should be easier than it is
  • Corresponding with a doctor in simple things shouldn’t require tons of calls or visits.
  • Content gleaned from social media can be helpful, but not as much as things received/shared from trusted friends or family
  • People do not want to feel forced or shamed into acting or making changes.
  • Having a plan in place for developing a habit helps with keeping the habit in place
  • People who want to eat healthy run in to struggles with time limits, food costs, and desirability

(Click the image below to zoom-in)



User Personas





After spending time on User Interviews and Affinity Maps, the next step was to consolidate the insights into memorable and relatable User Personas. Although only one persona could potentially use all of the features within the app, I felt it more necessary to at least have two primary personas that would approaching using the app with different motivations and primarily needing different features to solve their main problems.



User Personas



Journey Maps





Before moving on to creating in-depth user flows and task analyses, the next step was to map out a journey for each of our personas. These maps help bridge the gap between creating a user persona and beginning to concretely see how different points in the application will connect with others. They allow me to generate an idea of what our persona could be thinking and want needs they may have as they begin using the app to solve their problems.


For these maps, I focused on having Melissa complete a two-week meal plan for her family while Brad created his account and found his first doctor by setting an appointment. Feel free to view the journey map graphics below:



Sitemap





Following the development of user journey maps and exploring different user flows, I took the time to create an initial sitemap with all of the major features and elements that were discovered through the research process.



Low-Fidelity Wireframes





Then the fun part came. Using blank index card, I began to sketch out the 3 major features of the web app in mobile layouts. Those features include:

  • Viewing a daily workout and exercise page
  • Creating a new meal plan from scratch
  • Searching for a new provider and scheduling an appointment


Mid-Fidelity Wireframes





Before moving on to creating a working prototype, mid-fidelity wireframes were created to solidify some design decisions and develop a more solid idea of how elements will be spaced together.



Usability Testing





To ensure that the decisions I made regarding the on-boarding process and active features were valid, I created a plan to interview 6 participants that fit within my two user personas.


The scenarios laid out to the participants were as follows:

  1. You have just accessed the web-app, please progress through the introductory screen and create an account profile.

  2. 
After reviewing the home screen, you want to view a work-out plan that is already uploaded and see details on the exercise. Please attempt to access that.


  3. You’ve just finished your other tasks and now want to create a new meal plan to help you organize dinners. Please create the new meal plan.


  4. It’s time for your annual check-up, but you need a new doctor. From the web-app, search for a new doctor and request an appointment.
1. How do you feel about the duration of this task?


Each test was completed either in an in-person or remote session. They took 25-30 mins to complete and were recorded, with consent, for future review.

To see the test plan, and the test script in detail, have a look HERE.



Prototype Edits





With the compiled data from the usability tests, 5 issues were isolated and prioritized for editing as stated below:


Issue 1: Final on-boarding prompt ignored and overlooked. High Priority


  • Suggested Change: Make the prompt full-screen and require acknowledgment before going to next screen

  • Evidence: All 6 users didn't notice the prompt at first or ignored it altogether.




Issue 2: Incorrect location was clicked when progressing to workout screen. Mid-Priority


  • Suggested Change: Simplify the Fitness dashboard and remove the additional "Past Workout" area.

  • Evidence: 2 users clicked on the wrong area while several others hesitated as to where to click first.




Issue 3: The back button canceled an entire flow instead of going back one page. Mid-Priority


  • Suggested Change: Make the back button go back one screen instead of back to dashboards.

  • Evidence: 2 users canceled entire tasks instead of going back one screen on both the meal plan and provider tasks.




Issue 4: Choosing dates for the meal plan is confusing without seeing a calendar. High-Priority


  • Suggested Change: Have a calendar pop-up and show chosen dates to be highlighted.

  • Evidence: 3 users expressed overall confusion on choosing the dates and expressed displeasure on the experience overall.




Issue 5: Specific doctors and/or disciplines need to be clickable when scheduling an appointment with a doctor. High Priority

  • Suggested Change: Add checkboxes where the disciplines of each provider are located or include a drop down selector on the calendar screen.

  • Evidence: 1 user who works in the healthcare field and manages her families household stated that this is standard for scheduling appointments.

Screenshots of the edits prioritized and made can be seen below:



Issue 1 Resolved



Issue 2 Resolved



Issue 4 Resolved



Issue 5 Resolved



UI Style & Mock-ups





Following the edits made to the prototypes, I was ready to begin considering the UI style for this app. With this app primarily being for adults that are beginning their journey in developing healthy life habits, it was a priority to use a color scheme that was both inviting and exciting, yet, not completely overwhelming. I chose a light-medium blue that closely denotes productivity and is often used in healthcare along with a lively green that suggests energy and life. Even though these bright colors can be overwhelmed if used all over each screen and with one another, by using white backgrounds and grayscale text/icons, we can keep the UI light and pleasing to the eye while using the bright blue and green.


The font choice, Attractive, provides a clear and legible, but not overused, type face for the app. This font also provides a wide range of families between Light and Bold that will be used for various font size settings.



HealthStart Splash Screen



Sign-up CTA



Empty Profile Text Field



Active Workout Screen



Home Dashboard



Calendar Screen



HealthStart Desktop Dashboard



Desktop Nutrition



More to come..





Thank you for viewing the project so far. As the design progresses and iterations happen, content will be added to this case study.



nicklewisartanddesign@gmail.com