multiple screens of a medical app

How Might We effectively manage the medical needs of our family?

How Might We effectively manage the medical needs of our family?

How Might We effectively manage the medical needs of our family?

Health

Health

Nest

Nest

Bootcamp Project

Bootcamp Project

People want to stay organized with their medical appointments and medications, yet managing the entire family's medical well-being can be challenging due to their busy schedules.

Role: UI/UX Designer

Duration: 8 weeks

Year: 2023

Looking for opportunities

During this research stage, I downloaded and evaluated three apps to understand how users interact with them.

I aimed to find their strengths to incorporate into my app and to turn weaknesses into opportunities. Additionally, I read the reviews on the Google Play Store and App Store to identify the challenges users are facing.

During this research stage, I downloaded and evaluated three apps to understand how users interact with them.


I aimed to find their strengths to incorporate into my app and to turn weaknesses into opportunities.


Additionally, I read the reviews on the Google Play Store and App Store to identify the challenges users are facing.

STRONG POINTS

Medisafe

Regina Maria

MedLife

  • Track the remaining pills to know when to refill

  • Informations about possible drug interactions

  • See evolution of analysis

  • Doctor's profile - reviews/prices

  • Add an account for the child

  • Online consultation

WEEK POINTS

Medisafe

Regina Maria

MedLife

  • It’s not very intuitive

  • Can’t make appointments

  • Can’t add medication

  • No search bar

  • Difficult registration process

  • Not all cities have clinics

Medisafe Logo

Medisafe

Medisafe

Regina Maria Logo

Regina Maria

Regina Maria

MedLife Logo

MedLife

MedLife

STRONG POINTS

STRONG POINTS

  • Track the remaining pills to know when to refill

  • Informations about possible drug interactions

  • See evolution of analysis

  • Doctor's profile - reviews/prices

  • Add an account for the child

  • Online consultation

WEEK POINTS

WEEK POINTS

  • It’s not very intuitive

  • Can’t make appointments

  • Can’t add medication

  • No search bar

  • Difficult registration process

  • Not all cities have clinics

Let's get close to our users

In order to gain a better understanding of the user's needs and pain points, I conducted an online survey using Google Forms. Additionally, I had video calls or in-person interviews with six individuals ranging from the ages of 21 to 51.

Some key insights are presented bellow:

Persona persona named Oana Pop, a 36-year-old full-time working mom, with information about her lifestyle, wants and needs, pain points, and general behavior and emotions
Persona persona named Oana Pop, a 36-year-old full-time working mom, with information about her lifestyle, wants and needs, pain points, and general behavior and emotions

After I collected all this information, I crafted a persona representing my real target audience.


Whenever I needed to make design decisions, I kept Oana Pop in mind as a guiding reference.

ACTIVITIES AND OUTPUTS

ACTIVITIES AND OUTPUTS

6 interviews

34 people answered to the form

Empathy map

Customer Journey

Persona

It's time to bring clarity and structure

User flow provides a comprehensive overview of my app, revealing user actions and exposing potential gaps to design a user-friendly interface.

This is an example of user flow for making an appointment:

Flowchart illustrating the process of making an appointment: Start on the homepage, choose to make an appointment for yourself or someone else, select online or in-clinic, fill in information about medical specialty, city, and date, decide if you know the doctor, select the doctor if you do or see results if you don't, confirm the appointment, add it to your calendar, and set a reminder.
Flowchart illustrating the process of making an appointment: Start on the homepage, choose to make an appointment for yourself or someone else, select online or in-clinic, fill in information about medical specialty, city, and date, decide if you know the doctor, select the doctor if you do or see results if you don't, confirm the appointment, add it to your calendar, and set a reminder.

How did I make design decisions?

To start, I addressed user problems and sketched wireframes on paper to solve them.

The use of hand-drawn sketches under time constraints allowed for quick iteration of ideas while avoiding unnecessary details.

Afterward, I created a design system to keep visual consistency and replicate designs quickly. I also verify the contrast ratio to maintain readability.

To start, I addressed user problems and sketched wireframes on paper to solve them.


The use of hand-drawn sketches under time constraints allowed for quick iteration of ideas while avoiding unnecessary details.


Afterward, I created a design system to keep visual consistency and replicate designs quickly. I also verify the contrast ratio to maintain readability.

WIREFRAMES

Hand-drawn sketches  for multiple screens
Hand-drawn sketches  for multiple screens
Hand-drawn sketches  for multiple screens

EXPLORE THE USER'S PROBLEM

“Sometimes I take my pills an hour or two late because I forget to take them on time.”

ADD MEDICATION

ADD MEDICATION

In a few steps, the app requests information about the medication, including dosage instructions.


Users also have the option to define the treatment duration, upload a photo of the medication, and receive refill or pill reminders.

In a few steps, the app requests information about the medication, including dosage instructions.

Users also have the option to define the treatment duration, upload a photo of the medication, and receive refill or pill reminders.

Three screenshots showing the steps of setting up a new medication in the mobile app
Three screenshots showing the steps of setting up a new medication in the mobile app

“I am required to take two different types of pills, spaced two hours apart from each other, but occasionally I struggle to recall the time of my first pill intake.”

When users add a new medication, they can choose to link it to another medication already in the system.

Screenshot Add medication page
Screenshot Add medication page
Screenshot Add medication page

MAKE AN APPOINTMENT

MAKE AN APPOINTMENT

"My appointments" page offers a convenient overview of upcoming appointments, the waiting list, and past appointments.

By following a few simple steps and entering the necessary information, users can schedule an appointment that best fits their needs while taking into consideration the doctor's availability.

Many individuals find it challenging to visit a doctor due to their busy schedules.

WAITING LIST

WAITING LIST

Users can be notified if an earlier or later appointment becomes available.

  • Users can join the waiting list if none of the available hours are suitable.

OR

  • Users can schedule an appointment at an available time and choose to receive notifications for earlier or later openings.

Users wants to communicate more efficient with doctors and stay in touch after appointments

HOMEPAGE

At a glance, users can easily access upcoming appointments and medications, and it provides a simple way to cancel or reschedule appointments.

Typography

Atkinson Hyperlegible (iIl)

Atkinson Hyperlegible (iIl)

Atkinson Hyperlegible (iIl)

Used for buttons & body text

Used for buttons & body text

I choose this typeface because was designed by the Braille Institute to improve legibility and readability for individuals with low vision or visual impairments which I found it well-suited for a medical app.

I choose this typeface because was designed by the Braille Institute to improve legibility and readability for individuals with low vision or visual impairments which I found it well-suited for a medical app.

Roboto Serif

Used for headers & sub-headers

Used for headers & sub-headers

Conclusions

What did I learn?

What did I learn?

Judging by the final result, I can confidently say that I learned a lot from scratch. Initially, I wasn't even aware that Figma existed!

  • Designing isn't a linear process; it can get messy. So, it's important to focus on users' needs and be flexible.

  • At the end of the course, I had the opportunity to present my project. I developed the ability to prototype and justify my decisions.

  • I discovered plugins like Contrast to check the level of accessibility and Unsplash for high-quality images.

  • Consistent design improves usability, and all icons should have equal visual weight.

Judging by the final result, I can confidently say that I learned a lot from scratch. Initially, I wasn't even aware that Figma existed!

  • Designing isn't a linear process; it can get messy. So, it's important to focus on users' needs and be flexible.

  • At the end of the course, I had the opportunity to present my project. I developed the ability to prototype and justify my decisions.

  • I discovered plugins like Contrast to check the level of accessibility and Unsplash for high-quality images.

  • Consistent design improves usability, and all icons should have equal visual weight.

Judging by the final result, I can confidently say that I learned a lot from scratch. Initially, I wasn't even aware that Figma existed!

  • Designing isn't a linear process; it can get messy. So, it's important to focus on users' needs and be flexible.

  • At the end of the course, I had the opportunity to present my project. I developed the ability to prototype and justify my decisions.

  • I discovered plugins like Contrast to check the level of accessibility and Unsplash for high-quality images.

  • Consistent design improves usability, and all icons should have equal visual weight.

What I'd do differently next time?

What I'd do differently next time?

I was short on time due to my full-time job. I would have iterated more and asked for feedback, which would have helped me find the gaps more quickly.

I realized that focusing on the overall picture first before delving into the details would have been more effective, rather than striving for perfection right from the beginning. I learned not to be afraid to showcase unfinished work.

Thank you for checking out my work!