Apollo
Keep track of your overall health and talk to health professionals online
UX Case study
By Henrik Pultz Melbye
Keep track of your overall health and talk to health professionals online
By Henrik Pultz Melbye
UX/UI Designer
Solo - Henrik Pultz Melbye
January 2023 - August 2023
UX/UI Designer
While studying UX Design with CareerFoundry, my main task was to design and create a health app. The objective for this task was:
"Allow health-conscious individuals to log in to a responsive health and wellbeing portal to record their health and medical information, and access general physical and mental wellbeing features.”
I’m very interested in tracking my sleep and learning how to optimize it. This inspired me to make this one of two main features of the app. I’m also a former therapist and was curious to see how an app that offers online therapy and other forms of medical advice, could turn out.
Introducing Apollo - a health app that allows users to track 4 key elements of the users health:
On top of this, it also allows the user to book online calls with health professionals such as therapists, medical doctors, physiotherapists and others. The user also has access to a resources section, containing information on general health.
For creating Apollo, I used the design thinking process to help me have a clear and good overview of the steps I needed to take during the way.
I started by clarifying the problem by creating a problem statement and did a competitive analysis of two similar companies.
I then turned to user surveys to get a feeling of people's experience with health apps. I also did user interviews to understand their goals, needs and frustrations.
I could then create user personas, customer journeys and userflows that gave me a starting point for creating the lo-fi wireframes.
To quickly get ideas flowing for the design, I started by sketching out wireframes by hand. Once I was happy with the outcome, I created mid-fi wireframes and then again hi-fi wireframes, that I turned into prototypes.
By doing remote usability studies, I got some very valuable feedback and could iterate on the wireframes, fix errors, misunderstandings, confusion and so on. The final results can be seen at the bottom of the case study.
First off, I needed to get a more clear idea of the problem I was trying to solve. For this I made a problem statement after defining the problems I believed users might have. The list read as follows:
"As a user I need an app where I can get professional advice and guidance on how to deal with both physical and mental pain and how to live a healthier life, because I don't like to spend my time going to the doctor or other health professionals.
For my initial user research I started by doing a user survey. This survey helped me to understand, what users would like from a health app.
Research goals
I had 11 users participate in the survey and found, that most users would use an app where they could talk to a therapist online.
When asked what kind of advice users would like to get from a health app they said:
From here on I conducted 4 user interviews, to further dig in to what the user would like in a health app and their experiences. I asked 11 questions on their past experiences getting help from health professionals. I also asked them about their experience, with using wearables and collecting personal health information.
Needs/Goals
Frustrations
Behaviors
Quotes
In this step I created personas, customer journeys, user flows and sitemaps. Here I included how the user flow could look.
Creating the customer journey gave me an outline of the user flow. The user flow determines the route I would like the user to take, in order to reach their goal. In this case Michelle would like advice on how to optimize her sleep and she would like to book an online video call, and this is how I imagined the route would be in the app.
Objective: Michelle would like advice on how to optimize her sleep
Objective: Michelle would like to book an online videocall with a physiotherapist
Needs/Goals
Frustrations
Behaviors
Quotes
Finally, after all this work of researching and understanding the user, creating the foundations for the structure of the app, I could start creating the wireframes. I started out with basic low-fidelity wireframes to get my creativity going. I used pen and paper to get my ideas down in a fast paced way.
I then started by creating the basis for the 4 most important screens
Home
My Health
Sleep
Book consultation
Booking confirmed
Having the low-fidelity wireframes as inspiration and a guide, I created mid-fidelity wireframes in Figma, and turned them into clickable prototypes.
.png)
Home
My Health
.png)
Book consultation
Sleep
Sleep
Having the low-fidelity wireframes as inspiration and a guide, I created mid-fidelity wireframes in Figma, and turned them into clickable prototypes.
.png)
Home
-1.png)
My Health
-2.png)
Book call
Needs/Goals
Frustrations
Behaviors
Quotes
Now that I had my hi-fi prototypes I tested them on users.
I created a test script and did usability tests with 6 users asking them to complete 4 tasks. This was a great learning and very helpful in refining the prototypes.
The goal of the test was to see if users understood the overall concept of the app and how fast they could get acquainted with its functions. I wanted to observe users navigate the app and get an idea of how easy it was to use and if the functionalities made sense to the user.
From my tests I created rainbow sheets and organized my findings in affinity maps. From these I found 5 errors I prioritized fixing first.
Booking-confirmation-screen goes away too fast.
Severity: High
Suggested solution: Right now, the screen changes back to the main screen of “Consultations” by itself. Change this function, so the user itself will have to click to go back to the main screen.
Evidence: Several users looked surprised and also mentioned they didn’t expect the screen to go away so fast and by itself.
No back button on onboarding screens
Severity: High
Suggested solution: Add a back button to onboarding screens.
Evidence: One user would like to back to read the screen again
The sleep card on the main screen of “My Health” doesn’t afford clicking.
Severity: High
Suggested solution: Add an arrow or other kind of affordance in order to make user awarethat they can click to get more information.
Evidence: 5 of 6 users didn’t click the sleep card and when told, they said they didn’t think of clicking it.
Back-button on home screen is irrelevant.
Severity: High
Suggested solution: Remove back-button on home screen.
Evidence: One user argued that when you’re on the home screen you shouldn’t need to go back. This we found made sense.
Text size could in general be bigger.
Severity: Medium
Suggested solution: Make text size bigger on most screens.
Evidence: All users noted several places in the app, where they would like the text to be bigger.
The final results can be seen and tried out right here in the Figma prototype
Research goals
For the next part of Apollo there are several things I would like to do:
Research goals
I’ve learnt a great deal from building this app from start to finish. Even though it’s not finished yet.
I hope you enjoyed it and feel free to get in touch, if you have any questions!
