MD+ Web App
A medical web app that
provides remote access to
healthcare services.
MD+ is a medical information and communication technology solution that simplifies remote access to healthcare services.
PROBLEM
Visiting the doctors is time-consuming and frustrating for patients. There are several challenges when making an appointment and just as many inconveniences at the actual hospital. For these reasons and more, many patients try to self-diagnose at home to avoid visiting the doctor. They forego talking to a medical professional which can be potentially harmful to their health.
SOLUTION
I've developed a web app where users can do all of the following in a single space: check their symptoms, quickly communicate with medical professionals, book online appointments without hassle or queuing, store medical information about personal health, and get notifications on upcoming consultations and important medical news. The app aims to help patients by making online healthcare accessible, convenient, and trustworthy.
MY ROLE
UX/UI Designer & Researcher
TOOLS
Miro, Zoom, Figma, Slack
TIMELINE
Overall: 6+ weeks
Design & testing: 6 weeks
PROCESS
Research, Ideation, User Flow, Wireframes, Design, Hi-Fi Design
01/ DISCOVERY
PRIMARY RESEARCH
To gain insight into how users access medical care, I used screener surveys to recruit participants. I conducted user interviews and qualitative and quantitative surveys. From these sources, I found the following main painpoints.
90%
of people would agree to pay through a mobile app to get an instant doctor’s consultation
64%
of people tried to find a doctor on the internet, but they could not find a doctor in most cases.
80%
of people want to use an app, and are willing to pay more to get a more qualified doctor
50%
of people visit the doctor when they are sick. The rest visit only one to a few times a year.
78%
of people want instant consulting services that include a short chat/call/video call.
50%
of people tried to use the app to consult a doctor, but they didn’t get much help.
PERSONA
After my research, I created personas to help understand who is the product’s users, what their frustrations and goals are, and how they will use the product.
02/ IDEATE
USER STORIES
Before I could get started with designing, I had to identify the most important functions this app needs. User stories were categorized by priority, the highest being the most crucial functions, this helped me understand the necessary features and elements that needed to be implemented for a smooth experience.
High Priority
- The app should help users pinpoint what issues they have and give them the most relevant information.
- The app should use images to show what parts of the body the diagnosis is targeting and what it looks like.
- The app should use a 3d model to help pinpoint pain points.
- The app should have certified professionals write information and reply to questions online.
Medium Priority
- The app should have appointments with doctors and medical professionals online.
- The app should give users a selection of online doctors and medical professionals that they can chat with and make online calls.
- The app should have the user's medical record in the app that they can update.
- The app should give users a selection of online doctors and medical professionals that they can schedule online calls.
Low Priority
- The app should give users a selection of online doctors and medical professionals with different rates for online calls, consultations, etc.
- The app should have ratings and patient reviews on the doctors'/medical professionals’ profiles.
- The app should have a chat page where doctors/medical professionals can give their prescriptions/notes/diagnoses for the user to always have at hand.
USER FLOW
After collecting all my research data and creating my personas, I developed a main user flow to determine how each screen would be laid out in order for users to complete their tasks.
03/ DESIGN
WIREFRAMES
After creating a user flow, I designed mobile and desktop app wireframes. These wireframes covered the users' core needs and helped to determine each screen's content layout and functionality.
STYLE GUIDE
To keep the design consistent throughout the app, I created a style guide for the main fonts, iconography, and colorways. For the typography, I chose a family of universal SF pro display fonts. It is suitable for reading texts from the screen and is recommended for websites of government and social services. For the color palette, I chose shades of blue because it is typically associated with credibility, trust, knowledge, power, professionalism, cleanliness, calm and focus. These qualities are valued in the medical community and are often used in medical logos.
04/ FINAL SCREENS
After creating a visual style guide, I turned my wireframes into high-fidelity screens. These high-fidelity screens cover the main user flows including: checking your symptoms, storing your medical data, selecting a specialist, direct messaging specialists and scheduling online consultations.
Get Notified On All Relevant Health Updates
MD+ will automatically add online appointments to your calendar, remind you to take your prescribed/daily medication, and update you on top medical news.
Find The Right Doctor For You
Choose your preferred doctor by specialism, or through our recommendations. Go to their profiles and check their prices, background and reviews.
Message Your Doctor & Set Up Online Consultations
Directly chat with any online specialist or schedule an online consultation. Easily talk to medical professionals whenever, where ever you are. Ask questions, send files, and rearrange appointments without hassle.
Store All Your Medical Data In One Place
Users can store their medical data in the app and access their medical history and files when desired. Users can share these files with doctors through chat or during online consultations. The app also monitors daily health in sleep, steps taken, heart rate. etc.
Search Your Symptoms
Search your symptoms by selecting a part of the 3D model where you symptoms are present or searching in the search bar. See all the possible diagnosis's based on your selected symptoms and personal medical data.
Final Mobile & Desktop Screens
05/ REFLECTION
TAKEAWAY
Designing this app has been challenging and rewarding in its own right. During the research & ideation phase, it was a challenge to conduct the user research and prepare the whole flow to be as intuitive and smooth as possible. I learned that even though there were a number of painpoints I wanted to solve, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
The UI design of the app was particularly time-consuming because I created many variations based on color and typography research. The goal was to create a medical app design that users found clean, credible, trustworthy, knowledgeable, and professional.
Going forward, I’m excited to tackle new UX prompts and better my UI skills. Thank you for reading through! I hope you enjoyed learning about my design and thought process.