PRECIOUS UKACHUKWU
UI/UX designer

MediCare

A story of how we designed a mobile application that helps patients speak to doctors, upload their prescriptions and get drugs delivered to them.

Image alt tag

Product Overview

MediCare is a medical app that is designed to connect healthcare providers (Medical Doctors, Laboratory Scientists and Pharmacists) and healthcare receivers (Patients).

It functions as a mobile clinic where patients can get all the necessary care from health care providers such as appointment scheduling, telemedicine, access to their medical records, laboratory tests, daily health tips and also be able to request for medications which would be delivered to them at their comfort zone without having to pay a physical visit to the hospital.

Patient also have the option of uploading prescription from another doctor not on the medicare app and would still be able to purchase their drugs and have it delivered to them.

The Challenge

  • Longer waiting time at the out patient department (OPD) before getting to see a doctor.

  • Lack of access to their medical record.

  • Not being able to speak with specialist doctors at will.

  • Difficulty in getting some prescribed medications and patients would have to shuffle between different retail pharmacies before getting their medications.

My Role:

  • UX Researcher

  • UI Designer

Responsibilities:

  • User research

  • User Personas

  • User flow

  • Style guide creation

  • Wireframing

  • Prototyping

  • Usability testing

The Design Process

Empathize

User Research

Starting off, I asked myself a few initial questions.

  • Who is our primary user?

  • What kind of goals do they have?

  • Why would someone want to use this application?

  • Just how large of a scope do I want this project to be?

I conducted user interviews in order to get a better understanding of the problem. I interacted with quite a number of people and was able to understand my target users and create better design to solve their basic needs. After interviewing the participants to establish archetypes later on, it became evident that the goals they wanted to accomplish all fell within 2 categories. I created 2 personas that would represent each user group.

Medicare

Our Competitors

Competitive Analysis

In order to construct a concise and solid foundation for Medicare, I carried out secondary research and had to venture out and see what the prominent medical applications were already doing and what user goals they were not reaching.  I evaluated several features deemed vital from the user interviews and identified which ones Medicare could capitalize on to have a leg up over other applications. 

I found that only three of the four main competitors offered telemedicine services and appointment scheduling for users. Even then, Tremendoc telemedicine feature is incredibly limited and the subscription fee the patients had to pay on a monthly basis to access this care was on the high side.

Helium health and Hello doc both offered telemedicine services and daily health tips but also fails to allow patients upload their own prescription and don't provide delivery of drug services to their users.

Names of competitors include:

  • Tremendoc

  • Helium Health

  • Hello Doc

  • Health Connect

Define
Medicare

User Persona - Louis

Personas

Based on the interviews, we set up two personas. We referred to them throughout the entire product development process.

Medicare

User Persona - Gabby

Medicare

User Flow

User Flow

We constructed a user flow of what a basic start to finish journey looks like while carrying out specific tasks. This helps us in understanding ways users can interact with the product, as well as allowing us to see navigation through user goals. we designed a structural solution focused on the problem statement. Our idea is to visualize the complete journey that the user would follow throughout the solution. This allowed us to see where they could get stuck or feel lost and then we would offer the easiest way out of an error.

Ideate

After listening to the users, I created possible ways to solve all this problems while keeping the app simple, equitable, enjoyable and usable.

I came up with a lot of ideas which include:

  • Designing a mobile clinic that is available 24/7 where patients can either have a chat or video consult with any specialized doctor based on their complaints (symptoms), doctor writes their prescription and they can purchase their drugs on the app, which would be delivered to them within 24 - 48hours.

  • Patients having access to their medical records, laboratory tests and also can keep track of their prescriptions.

  • An appointment scheduling system that helps to organize and regulate one’s consultation sessions.

  • A feature that allows patients who already have a prescription from a doctor that is not on the mobile clinic, upload their prescriptions and purchase their drug effortlessly without having to speak to another doctor on the application.

  • A drug reminder notification that alerts the patients when its time to take their next dose.

  • Multiple payment options, so as to make payment of healthcare services easy and seamless.

  • A daily health tip feature, that keeps the patient abreast with activities to remain and maintain a healthy lifestyle from around the globe.

Medicare

Paper Sketch

Sketches

After the ideation phase, I started sketching the design solution. The process of sketching enables me to visualize different ideas and try out content placement. I took the first step of my process which is to sketch out my idea on a paper before creating low fidelity wireframes. This is the way I iterate through many design options quickly.

Medicare

Low fidelity wireframe

Low Fidelity Wireframes

After sketching out some pen and paper wireframes and thinking through the preliminary flow, we reviewed what was necessary, unnecessary and what areas needed improvement. We poured a lot of our time into this step to make sure we had the finishing touches on the underlying UX before moving onto the visuals

Tool used for wireframes: Figma

Medicare

Style Guide

Style Guide

Combining incredibly vivid colors to create Medicare's signature gradient came from wanting to express to users just how passionate we are about their health. The splash screen feels warm and welcoming enough to draw the user further in.

Prototype
Medicare

Home Screen of the High-fidelity Wireframe

UI Design

Once I tested out all usability mistakes, I started designing the final screens in Figma. I iterated this process over and over again, to ensure that the design was not just aesthetically pleasing but truly solves the user needs.

More Screens of the High Fidelity Wireframes
Test

Usability Testing

The usability testing was done in two stages.

For both stages, the method used were moderated usability studies

Research goals:

  • To determine if users can complete core tasks within the prototype of the Medicare app.

  • To determine if the Medicare app is difficult to use.

A total of 5 participants each were recruited for both stages of testing. All participants were asked the same set of questions and observed as they carried out and completed tasks within the app which helped identify possible usability problems.

First with the low fidelity prototypes to get feedbacks from users. Changes were made to the wireframes and the user flow was modified to better solve the need of the users and improve the over all experience.

Secondly, with the high fidelity prototype, so the users could better test the functionality of the product. This testing was necessary in order to reveal possible usability problems.

Summary

I have been able to design an application that provide solution to users problem. User-centric approach in designing the application was used, by designing the entire process with the end users in mind, so as to better improve their experience.

Learnings and Takeaways

Prioritize Your Designs - I learned how critical it is to identify user goals early on and use them to guide my design priorities. I was tempted to throw in fancy, trendy features and content without really considering the "why" behind them. Making the user goals my north star kept me on track and allowed me to achieve a thoughtful solution to the initial problem.

Next Steps

I believe there is always room for improvement and it applies here too, the next step will be to conduct more user testing on the prototype we currently have to improve the user flow.