Mobile App Design

Olive Health & Wellness

Empowering users to take control of their holistic health journey

Overview

Users need a simple, centralized way to manage their health information and learn how to live healthier lives in one place.

πŸ’‘ Solution: Olive

A mobile app that:

πŸ”’

Provides secure and convenient access to personal health records

πŸ‘¨β€βš•οΈ

Enables direct communication with trusted medical professionals

πŸ“Š

Offers customized health guidance for overall well-being

Problems

Through my research and personal experience, I discovered that many users like myself often jump from platform to platform searching for trustworthy health information and credible doctors.

πŸ₯

Lack of Trusted Medical Professionals

Users lacked access to trusted medical professionals, which prevented them from receiving accurate advice on care.

⏰

Limited Resources

Many people go years without detecting worsening conditions due to limited resources and fragmented health services.

❌

Unreliable Information

The absence of reliable information from verified sources can lead to poor health decisions and delayed treatment.

πŸ” Empathize

User Research

πŸ“‹ Qualitative Research

Method: I conducted interviews with 3 users to understand:

  • Perception towards virtual healthcare services
  • Their needs and frustrations
  • User expectations from virtual healthcare platforms

Sample Questions:

  • β€’ Are you currently using any virtual healthcare apps or websites?
  • β€’ What feature do you mostly use, or what would you use?
  • β€’ If you could add a feature to a health app, what would it be
  • β€’ What features have you seen in apps that you don't use?

πŸ’‘ Key Insights

  • βœ“ Users want personalized features such as live captioning
  • βœ“ App connects with other devices, such as their watch
  • βœ“ Social interaction features are seen as unnecessary and often ignored

πŸ“Š Quantitative Research

Method: I created an online survey to gather feedback from a broader audience, allowing me to understand trends and user preferences through measurable data.

Sample Questions:

  • β€’ Have you ever used any Health and Wellness app? If so, which ones?
  • β€’ Have you found this app effective in supporting your health goals?
  • β€’ How often do you use this app?
  • β€’ How do you typically track your health and wellness goals?
  • β€’ What kinds of content would you find helpful?

πŸ’‘ Key Insights

  • βœ“ 66.7% of participants use apps to track health and wellness goals
  • βœ“ My Fitness Pal and Apple Fitness were the most commonly mentioned apps
  • βœ“ 83.3% of participants have found the app to be effective

πŸ† Competitive Analysis

Teladoc

βœ… Strengths:

  • β€’ The primary global leader in virtual care
  • β€’ Efficient diagnosis and prescription access

⚠️ Weakness:

  • β€’ A high number of complaints about poor customer service
  • β€’ Cancellation issues during emergencies

Walmart Virtual Health Care

βœ… Strengths:

  • β€’ Trusted brand reputation
  • β€’ Affordable healthcare services

⚠️ Weakness:

  • β€’ Financial sustainability concerns
  • β€’ Operational challenges in managing retail and healthcare

🎯 Define

πŸ‘€ User Personas

User Persona 1
User Persona 2

πŸ—ΊοΈ User Journeys

User Journey 1
User Journey 2

πŸ”€ User Flows

User Flow 1
User Flow 2

πŸ’‘ Ideate

πŸƒ Card Sort

Method: With the help of UXtweaks, I was able to send out card sorts to 5 participants.

Card Sort Results

Key Learnings:

01

Most participants categorized local doctors and virtual consultations into the same category as health professionals

02

Participants placed physical health and mental health categorized separate

03

These results lead me to not have health professionals as a general option. Instead, give an option for health professionals or virtual consultations

πŸ—ΊοΈ Sitemap

Sitemap Diagram

🎨 Prototype

πŸ“ Low-Fidelity Wireframes

Paper wireframes & Digital wireframes

Low-Fidelity Wireframes

πŸ“± Mid-Fidelity Prototype

Mid-Fidelity Prototype

✨ High-Fidelity Prototype

High-Fidelity Prototype

πŸ§ͺ Testing

Method: 6 Users were chosen for the remote usability test, which was conducted on Google Meet. The product was tested through Figma, with sessions taking from 10 - 15 minutes

πŸ’‘ Key Insights

Summary: Most of the users were satisfied but many showed to be hesitant on where to go or what things were. My UX writing was simple but not clear.

01

Design Consistency Matters

A participant mentioned the law of similarity and how the login and sign-up page should reflect what most users see on other apps. As mentioned, the typography and the color of the app should reflect a professional state for doctors. Those colors would be red, blue, or white.

02

Navigation Pain Point

It was noticed that most users were frustrated when returning to the homepage, which highlighted the need for a home button.

03

Iteration is Essential

Olive went through a series of iterations, with the help of feedback from several participants and other designers.

04

Fresh Eyes Catch Errors

This was crucial to the design process, as I was so focused on certain aspects, it caused me to miss small errors.

πŸŽ‰ Final Designs

πŸ“± Olive App Demonstration

Final Design 1
Final Design 2
Final Design 3
Final Design 4

πŸ’­ Reflections

🎯 UX design isn't about what I think is best

I've Learned that UX design isn't about what I think is best, it's entirely about how users interact with the product - my first set of prototypes I had thought was easy to understand, since I had created it. When I saw how users used it realized how unclear or unnecessary certain features were.

βœ… If it's not usable for them, then it's not useful

In my first high-fidelity design, I thought everything was perfect. However, during usability testing, I quickly realized that the buttons were confusing and that I was missing a home button, something users needed.

🎁 Feedback is a gift

My design was able to grow much more when it came to receiving thoughts and opinions from others, who could see things about the product that I had not seen.

🎨 Style Guide

🎨 Color Palette

Color Palette

πŸ”΅ Blue

Blue is used for the navigation bars and buttons

⚫ Black

Black is mostly used for the background frame of titles on pages and text on cards, and articles

βšͺ White

White is used on the page and icon titles and background of cards

✏️ Typography

Typography

Font Choice: I decided on Montserrat for Olive because of its clean, modern, and easy to read on all screen sizes.

πŸ”˜ Buttons

Buttons

✨ Icons

Icons

πŸ–ΌοΈ Images

Images

πŸƒ Cards

Cards

πŸ“ Grids

Grids
H&C Painters StudyNest Back to Portfolio