My Health Portal
Mobile and Responsive web design
Project Overview
The Product
My health portal is a Cape Town based app that helps community members to find and book a health practitioner in their area. The app is designed for community members who have access to a device to access it. The app aims to bridge the gap between doctors and patients.
Problem
Finding the right medical specialist can be tough, especially if you get sick in a new city. Another headache is waiting rooms in a hospital or doctors office. Usually people just want to go in and go out, for which booking in advance is very helpful.
My role
The lead UX designer leading the app and responsive website design from concept to delivery
My Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Project Duration
June 2022-July 2022
Goal
Build an app that will help community members to find a medical practitioner in their area and book appointments too.
User Research
Summary
The research question was deduced from conducting a survey on few people who reside in the city Cape Town. Survey was conducted via google forms where the link was shared in the community Facebook page. People indicated that they rely mostly on recommendations they get from friends and family when they have to find a medical practitioner. Some indicated their frustrations with waiting lines for doctor’s appointment.
Personas
Here are some of the personas I have made
Problem statement:
Terry is a caregiver for Mrs. Jenkins who needs to book a doctor’s appointment for Mrs. Jenkins in advance because she needs to avoid sitting in the waiting room with Mrs. Jenkins.
Problem statement:
James is an junior accountant who needs to find a nearest dentist
because he just moved to the city and does not know anyone around.
Paper wireframes
I took time to draft paper wireframes of screens of the app. This gave me idea of features that should make it to the digital wireframes and to be able to pick those features that solves the user pain points. The idea was to make every information available for the user on home screen.
Digital wireframe
After drafting some paper wireframes I had to put the ideas in a digital design. The designs follows a simple user flow for finding and booking a doctors appointment.
Here are some more screens
Low-fidelity Prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of booking a doctor appointment.
View here
Usability Study
15/07/2022
Study Parameters
Study type. Unmoderated usability study
Location. Cape Town, remote
Participants. 4 Participants
Length. 5-10 minutes
Findings
Here are some of the findings of the usability study.
Bookmark
People want to be able to select their favorite practitioner.
Rating
People want to be able to give doctor reviews
Booking for someone else
People wants to be able to book to someone else.
Mockups
Users in the usability study indicated that they would like to see the reliability of the doctor they are booking with, I have accomplished this by adding patients review system that shows the rating of the doctor.
Before usability study
After usability study
Before usability study
After usability study
In the usability study users indicated they would want an option to book for someone else, I included a pop up option that ask the user who they are booking for.
Here are of the Mock ups...
Hi-fidelity prototype
The hi-fi prototype follows the same user flow as the the low-fi including the changes made from the usability study and visual changes.
View here
Accessibility Considerations
1
Interactive labels are labeled clearly that are visible to users.
2
The home screen includes almost every information that the user will need to use the app thus reduces difficulties with navigating around the app.
Sitemap
After finishing designing the app, I started designing the responsive web version. I initially created a site map that game the idea of the structure of the website and how each screen should be, to have a very cohesive user experience across the devices.
Responsive designs
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
Mobile Screen
Tablet Screen
Desktop Screen
Take Away
Impact:
Users indicated that the app could be useful especially for someone who just relocated to a new place.
"This app could be a life saver and I mean literally" ~ David
What I learned:
I learned that a problem cannot be solved completely but coming close to a feasible and useful solution is always a goal in design and that is what I was aiming for with the design.