MediApp

Overview

1. Project Overview

2. Understanding the User

3. Starting the Design
4. Refining the Design
5. Responsive Design
6. Going Forward

Project Overview

Problem: Booking medical treatment and contacting doctors can be difficult, especially for those who have limitation such as hard of hearing or mobility.

Goal: Design a mobile app and responsive website to improve scheduling medical care and renewing prescriptions. This information can be shared with family or caregivers easily through the app & website.

Product: MediApp is designed to make booking medical treatment easier. The primary target users are older adults and seniors who may have physical limitations to get such care. The app lets users book appointments, renew prescriptions, and contact their doctors easier and virtually.

My Role: UX Designer designing a mobile app and responsive website from conception to delivery, including the following responsibilities: conducting user 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 Timeline: September to October 2022 (6 weeks), project completed in Figma.

Understanding the User

User Research

I conducted interviews and created user journey maps to better understand the needs of the user group I’m designing for. A primary user group identified were seniors who often lived on their own and had no live in assistance.

This group often struggled contacting the doctor due to long wait times on the phone or were hard of hearing. Renewing prescriptions also was a recurring pain point and required calling and picking up the prescription.

Personas

Margaret is an active newly retired senior who needs to easily schedule doctors appointments not over the phone because she can’t hear well and has a busy social schedule.

Sandor is an older senior living on his own who needs his prescription easily refilled and delivered because he is not as mobile anymore and sometimes forgets to refill his medicine.

Starting the Design

Wireframes & Low-fidelity Prototype

Before Usability Study #1

After Usability Study #1

Homescreen

The intial designs of the home screen focused on easy access to bookings and upcoming reminders. After the usability study I revised the placement of certain elements and focused on upcoming reminders at the top of the page.

Appointment Booking

Early design had the booking calendar as a whole month. During the first usability study, the appointment booking process was found to be confusing and the font size too small. I revised the design to focus on larger font and easily readable times available per each day.

Before Usability Study #1

After Usability Study #1

User Testing Round #1 & Findings

I conducted two rounds of a moderated usability study. These were done remotely in Europe and North America with 6 participants. Each session lasted 15-20 minutes. Findings from the first study helped guide the designs from wireframes to mockups.

1. Calendar for scheduling an appointment is difficult to use.

2. Font size & icons could be larger

3. Layout homescreen could be better organized.

Refining the Design

Mockups & High-fidelity Prototype

Before Usability Study #2

Homescreen

Icons and a specific color palette that is oriented per task helps users with way finding through the app.

After Usability Study #2

Appointment Booking

Clearer information for calendar days, such as alternating color for days and less abbreviation was implemented after the second usability study findings. An additional

confirm appointment button before booking the appointment was then added.

Before Usability Study #2

After Usability Study #2

Prototype: Appointment Booking

The user can select appointment times according to availability per day.

Prototype: Prescription Refill

Refilling a prescription can be easily accessed through the homescreen. Refills become available only when the prescribed dosage is running low.

Final Layouts

Accessibility Considerations

I focused on the following design items to make the app more inclusive:

1. Large format text and icons for better visibility.

2. Reviewed color and contrast for text with WCAG.

3. Calling with voice to text format for additional support for hard of hearing users.

Responsive Design

Sitemap

I started working on designing the sitemap for the responsive website, I used the sitemap as an organizational guide to structure each screen’s design cohesively across devices.

Design

Home Screen Mockups

The designs for the screen size variation included mobile, tablet, and desktop. I focused on creating a cohesive design throughout while highlighting specific user needs.

Appointment Booking Mockups

Going Forward

Takeaways

Impact:

Users shared that the mobile app would allow booking medical services to be much easier and prescription renewal less frustrating. The convenience of sharing the information with family members of a care group was also greatly appreciated.

What I learned:

What I thought was first very intuitive to book appointments actually ended up being quite difficult and hard to read. I then decided to really focus on clarity and larger format text to help with visibility.