My Role
Sole designer responsible for both UX and UI
Theme
Digital health management app
Time
4 months
Tools
Adobe XD, Illustrator, InVision, Google Forms, Optimal Workshop, Helio
Project goal
To create an app that provides personalised health plans and information for every health-conscious individual.
Why?
Everyone is different
I want to design a digital health platform where people can find professional information and advice based on their needs.
Busy lifestyle
Having companions and friendly competitions will motivate people to keep up with the progress.
Motivation & Inspiration
Having companions and friendly competitions will motivate people to keep up with the progress.
COMPETITVE
ANALYSIS
App Name:
Myfitnesspal
Category:
Weight loss/ Fitness
Purpose:
An app that helps users to keep track of their daily food and beverage intake by providing nutrient calculations
App Name:
Glow
Category:
Period tracking/ Reproductive health
Purpose:
An app designed to help women track their menstrual cycles and fertility
App Name:
Headspace
Category:
Sleep/ Stress release
Purpose:
A mindfulness app with an easy-to-use interface that takes the seriousness and intimidation out of meditation
App Name:
Lifesum
Category:
Diet/ Weight loss
Purpose:
The digital self-care app that helps users reach their health and weight goals through better eating
SWOT Profiles
USER
SURVEY
+ To get an insight into what type(s) of health routine(s) our users have regularly
+ To learn about the difficulties users may encounter while keeping their daily routine and how they overcome them
+ To learn about users’ experience of using health-related apps
USER
INTERVIEW
+ To learn the habits users have for maintaining their health and wellbeing
+ To understand the pain points users have with other competitor apps on the market
+ To learn what expectations users have while using a health/wellbeing app
+ To gather information about why users use a health/wellbeing app
PERSONA
PROFILE
After analysing my survey and interview findings, I created two personas that best summarise the backgrounds, characteristics, goals, and pain points of my target users.
User Journey Map
User Flows
Book an appointment
Create a health plan
INFORMATION
ARCHITECTURE
In order to refine my original sitemap and make sure it best matches the users’ mental models, I conducted an open card sort by using Optimal Worksop.
Test Results
Final Site Map
WIREFRAMING
I started by creating low-fidelity wireframes to explore the flow between screens. As the ideas gradually get more and more refined, I then moved on to creating mid-fidelity wireframes, with which the first prototype is created and tested with the first round of usability tests.
Low-fidelity Wireframes
Mobile
Book an appointment
Desktop
Book an appointment
Mid-fidelity Wireframes
Mobile
Share a live story
USABILITY
TESTING
I created a prototype with my mid-fidelity wireframes and conducted both moderated in-person and moderated remote usability tests with 6 participants to uncover any potential issues for the next round of iterations.
User Affinity Map
Rainbow Spreadsheet
ITERATIONS & SOLUTIONS
Online community
Create a post
Usability Issue
Participants experience difficulty finding the ‘Online Community’ button on the mobile dashboard screen.
Solution
I extend the typing box to a full-size screen to ensure that users don't get distracted by other elements at the top, this can also reduce the chance of accidentally tabbing on other icons while closing up the pop-up typing box.
Usability Issue
Participants expect the typing box to be bigger and they find the previous version of ‘Create a Post’ has very limited functionalities as it doesn't allow them to add any photo or video to the post.
Solution
I bring the navigation bar down to the bottom of the page and remove the arrow, the ‘Online Community’ becomes straight away visible on the screen, and the 'Profile' icon is removed and accessible via the profile picture at the top right corner.
Dashboard
UI
STYLE GUIDE
High-fidelity Wireframes
FUTURE INTERATION
If time allows, there are tasks I’d like to focus on improving to ensure the app will develop a pleasant service to its users:
1. 2 out of 5 of the participants from my usability tests have Android phones and mentioned that there are certain design layouts they are not so familiar with as Android users. Therefore,I’d like to create wireframes for the Android system, although both versions (iOS and Android) will have very similar screen layouts, there will be some adaptions in order to make the app more intuitive for the other users.
2. The ‘Library’ section will be further developed, it will support an efficient categorising and organising system that best stores users’ saved news and materials, it should also allow users to find specific information quickly.
3. During the usability tests, users seemed to take more time on deciding what to do in the ‘Edit My Health Plan’ section, I’d like to optimise the calendar design and how each activity is presented so that the users can easily see what their schedule and activity is at any given time.