MedConnect
A solution that simplifies how patients find and access the care they need.
#mobileappdesign
#ux/uidesign
#healthcaretech
Overview
MedConnect is an app that gets users the medical attention they need when and how they need it.
This app was designed for busy individuals, parents, and people with social anxiety. It simplifies getting healthcare by offering ways to get in touch with their providers in a way that's best for them.
Tools Used
Status
My Role
I was the lead researcher and designer.
I conducted the research, interviewed users, created the wireframes and low-fidelity prototypes, conducted usability studies, designed mockups, and iterated on the final designs.
The Problem
A lot of people struggle to access healthcare they need, conveniently.
Here are three main reasons.
Availability
Next available appointments are anywhere between 2 weeks to a month out due to access to scheduling appointments online.
Long waits
Getting medical advice took a very long time, with users waiting anywhere between 48 hours to sometimes 1 month for a reply.
No communication
Users are having a hard time getting in touch with their doctors, leaving them to deal with their health problems on their own.
Business Goals
MedConnect aims to give the power back to users when it comes to getting the medical care they need.
Here are the business goals:
Increase accessibility
Providing flexible healthcare services to make care more accessible for everyone.
Ensure 24/7 availability
Offer 24/7 availability to doctors for more reliable care.
Improve engagement
Boost engagement and retention by providing a user-friendly experience.
Research
Secondary research shows some unique challenges.
This research gave me some valuable insights into what users were struggling with. These insights helped me with some of the the features I designed.
64%
of working adults struggle to find time for appointments because of busy schedules.
40%
of people delay or avoid scheduling appointments because of their anxiety.
User Interviews
I uncovered a few pain points that helped me shape the final designs.
I took the time to carefully plan the questions I wanted to ask during these interviews. The interviewees were people with different lifestyles and had different needs.
Here are some of the questions I asked:
Here are some of the questions I asked:
Q1
Do you regularly stay on top of your health and get checkups from a doctor?
Q2
How are you currently getting medical care?
Q3
What challenges are currently preventing you from getting the medical attention you need?
Q4
What features or tools would make it easier for you to manage your healthcare needs through an app?
Q6
In an ideal app, how would you prefer to receive medical care or schedule appointments?
Affinity Maps
Affinity mapping helped uncover key themes and valuable insights from user interviews.
By organizing their feedback into themes, I got a better understanding of what users really need and why they're not getting the care they need.
Click or tap on images in each card to have a closer look.
User
Organized by user.
Wants
Focused on struggles, wants, and insights.
Lifestyle
By constraints, needs and wants, likes and dislikes, and lifestyle.
User Insights
The information gathered from the interviews and the affinity maps showed some pretty surprising insights.
Busy users needed convenient access to healthcare from any location.
People with anxiety preferred receiving care from the comfort of their home.
People with mobility needs were frustrated by limited access options.
Appointment wait times can range anywhere between two weeks to a few months.
Users needing quick advice need faster ways to get medical help.
Competitive Analysis
There are existing, successful applications that already offer the ability to get medical attention virtually.
Here is what they offered and what needed improvement:
Doctor on Demand
Doctor on Demand was the most successful offering availability 365/24/7, but showed very basic UI and users complained of lack of communication in between sessions.
Zocdoc
Zocdoc offered real-time appointment availability with a wide range of search filters, but users complained of the app showing doctors in their networks but billed as out of network.
K Health
K Health offers subscriptions for unlimited visits, but lacked the availability to book in-person appointments.
Doctor on Demand
Doctor on Demand was the most successful offering availability 365/24/7, but showed very basic UI and users complained of lack of communication in between sessions.
Zocdoc
Zocdoc offered real-time appointment availability with a wide range of search filters, but users complained of the app showing doctors in their networks but billed as out of network.
Zocdoc
Zocdoc offered real-time appointment availability with a wide range of search filters, but users complained of the app showing doctors in their networks but billed as out of network.
K Health
K Health offers subscriptions for unlimited visits, but lacked the availability to book in-person appointments.
Persona
Creating a persona helped me understand the needs, behaviors, and pain points of MedConnect’s target users.
Angela is a busy marketing manager and a mother of two. She represents users who struggle to balance work, family, and health, looking for a more convenient way to get health care.
Marketing Manager
Angela
32 years old
“With two kids and a full-time job, I have no time for waiting rooms. I need a quick, easy way to get medical care from home.”
Needs
Needs medical care from home that fits her busy lifestyle.
Frustrations
Frustrated that she can’t schedule an appointment when she needs it.
The Solution
MedConnect allows the user to get the care they need the way they want it.
The platform streamlines healthcare processes with features like chat, email, video chats, and scheduling in-person appointments, reducing wait times and improving user satisfaction.
Centralized Access
Everything in one place. Book appointments, get advise, and get treatments all through the mobile app.
Efficient Communication
Video chat allows providers and users to quickly get to the point, because the conversation is in real-time.
User-Focused Design
Everything thing was designed with the user in mind. Navigation was made simple and intuitive, getting the user to where they need to go.
Wireframing early Concepts
The wireframes focused on creating a smooth user journey and providing quick, easy access to care.
I focused on features like easy doctor access, simple navigation, tailored visit options, and a better chat experience to keep everything clear and user-friendly.
Immediate Access to Doctors
Available doctors are shown on the home page, letting users quickly find and connect with doctors when they need it most.
Simple and Clear Navigation
The navigation bar is simple and clear, making sure users can find what they need without frustration.
Tailored Visit Options
The “Visit Type” page helps users select the consultation that best suits their needs, making the process easier.
Enhanced Chat Experience
Users can track conversations, access care plans, and find helpful resources like articles and pharmacy links, all from chat.
Low-Fidelity Prototype
The low-fidelity prototype included features like visit types and chat, letting testers provide feedback on navigation and flow.
Here are the 3 most critical insights:
01.
Users found the list of available doctors on the home page confusing because most users have specific needs.
02.
Search bar for visit type and reason was confusing, with users preferring searches by symptoms, doctor type, or location.
03.
Pharmacy orders were sent without verifying information, making users wonder if the the prescriptions were correct.
Mockups
User study feedback helped me refine and improve the features I planned out in the wireframes.
All three of those critical insights were used in the following mockups.
Home Screen
- Hero Image and Tagline: The hero image and tagline helps set the tone and purpose of the app
- Latest Articles Section: Placing the articles under the hero image can provide value by giving the user relevant information.
- Navigation Bar: At the bottom of the page is a simple navigation bar, featuring a central to “Find a doctor” button for easy access to booking services.
- Profile Icon: Positioned at the top right corner, the profile icon shows the user’s information. Tapping it directs users to their profile settings for account management.
The hero image sets the app’s tone, with articles below for insights. A bottom nav bar centers on “Find a Doctor,” while the top-right profile icon links to settings.
Doctor Profile
The doctor profile provides users with detailed info about healthcare providers and the different appointment options available.
- Availability Status: Clearly shows whether the doctor is available for chat or video calls, helping users tell if they can get the care they need.
- Add to Favorites: Allows users to save preferred doctors with a simple heart icon, making it easier to revisit and book appointments with doctors they like.
- Appointment Options: Provides flexible choices for booking appointments: chat, video call, in-person, or email.
Search Screen
The search screen gives users a streamlined way to find the right healthcare providers based on their needs.
- Search by Symptoms: Users can input symptoms to find relevant healthcare providers.
- Filter by Doctor Type: Option to search specifically for the type of doctor needed.
- Location Filtering: Users can refine their search results based on their location.
- Doctor Profiles in Search Results: Each profile shows the doctor’s name in bold and their specialty in blue, making it easy for users to identify and find the right doctor.
Chat
Chat lets users communicate with doctors in real-time and easily switch to a video call if needed.
- Transition to Video Call: Users can easily switch from text chat to a video call if both parties agree and the situation requires it.
- Integrated Text Chat: Even during video calls, users can use text chat to keep track of the conversation and helps keep important info in one place.
- Information Sharing: Through text providers can share important links like pharmacy orders, the entire process easier.
Order Verification
This screen lets users review and confirm all details before finalizing their pharmacy orders.
- Medication Confirmation: Users can verify that the correct medication is being ordered, reducing errors and ensuring accuracy.
- Pricing Details: Shows the total cost, including any discounts or insurance adjustments, so users know exactly what they’re paying.
- Pickup Location & Window: Confirms the pharmacy location and the time frame available for pickup.
- Payment Information: Allows users to review and confirm their payment details.
Order Confirmation
The order confirmation screen tracks and displays the status of pharmacy orders.
- Order Status Progress Bar: Shows the current status of the order with a progress bar, showing the order’s progress and estimated pickup time.
- Order Number: Clearly displays the order number for future reference and tracking, making it simple for users to manage and follow up on their orders.
- Support Options: Provides links to contact support for any issues related to the order.
What I learned
As my first design project, there were a lot of learns.
Importance of verification
Users like it when they get to verify if something is correct. Having a step to verify information was crucial.
Making it easy for everyone
Putting important actions where users will likely need them, makes them more likely to stick to a service.
Third-party integration
Integrations like Google sign-in and Apple Pay make registration and payments easier and faster.
The Redesign
It's been several months since I last made edits to the design.
Looking back with a few design projects under my belt, I wanted to take another look and make some improvements. Below you'll see the original design on the left and the new design on the right.
1
I removed the grey background
I opted out for an off-white color background, using dividers instead rounded white box around each section.
2
Changed the typeface from SF Pro to Poppins
I chose Poppins for its friendly look and feel, while increasing line height for readability and adjusting the font for better visual hierarchy.
3
I changed the feel of the buttons
Switching to slightly rounded corners gave the buttons a more modern look while keeping the friendly feel.
Below are detailed design changes, with Before images on the left and After images on the right.
