William McDonald Logo

MedorDoc

Project Case Study

Sign in page
find clinic page
sign in page
home page

Overview

This was a collaborative school project created by 3 Designers and 3 developers. We chose to design and develop a mobile application for users and a desktop application for the clinics. The purpose of the application is for patients to book appointments at walk in clinics and to connect with available family doctors. The clinic can manage bookings as well as patient and doctor profile lists.

My Role

As UI and UX Designer as my primary role, I was responsible for:

  • Researching and surveying people to collect data to identify key issues in our current healthcare system
  • Creating primary and secondary user personas
  • Creating user flows
  • Creating low, medium and high fidelity prototypes with wire-framing 
  • Conducting usability testing on each fidelity and implementing found data

As Front-end Developer as my secondary role, I was responsible for:

  • Developing components with functions
  • Developing page layouts
  • Entering and maintaining data in Firebase

Project Dates

  • Start: September 2021
  • End: December 2021

Project Tools

  • Figma
  • Adobe Illustrator
  • Asana
  • VS Code
  • Guthub
  • XCode
  • NextJs
  • React/React Native
  • Firebase
  • Figma
  • Adobe Illustrator
  • Asana
  • VS Code
  • Guthub
  • XCode
  • NextJs
  • React/React Native
  • Firebase

Design Process

Design Process

Problems in the Canadian medical system

According to a survey from Statista, the top three health-care issues for Canadians are:

43%

Wait times

14%

Availability/Accessibility

13%

Shortage of doctors

Upon user research, this app was created based off of a common problem In the Lower Mainland of British Columbia. Patients struggling to get into walk-in clinics and finding a family doctor due to high or unknown wait times. Another common problem we discovered was patients being uncomfortable with English as their second language and having difficulty finding a family doctor who knows their native language.

The Solution

The solution is MedOrDoc. A mobile application patients can book appointments and view live wait times at clinics. They can also easily connect with family doctors that are accepting new patients and match their preferred language. The clinic side desktop app can manage their clinics live wait time, bookings and doctors profiles.

Mobile apps primary features

Appointment bookings

Booking

View wait times

Wait times

Connect with and discover family doctors with your language preferences

Doctor

User Research

Our initial step was to conduct user interviews to identify key issues and pain points. We interviewed four users between the ages of 18-50 years of age and varying gender.

A few of our questions:

  • How often do you go to a walk-in clinic?
  • How do you currently book an appointment for a walk-in clinic?
  • How long does the process typically take you from booking to completing your appointment?
  • What are your biggest pet peeves when visiting a walk-in clinic?
  • Do you have a family doctotr?
  • Are you aware that there are apps and websites to book with a walk-in clinic?

Discoveries:

Our main findings were that 75% of testers ages below 40 are unhappy with their current process of booking (by phone call without appointments). It was mentioned wait times are too long and booking without an app feels dated.

We also found that 50% of our testers aged below 40 do not have family doctors and would prefer to have one that speaks their native language.

Lastly, we found 25% of our testers aged above 40 had a family doctor and had no issues booking an appointment by phone call.

User Personas

After completing our user research, a primary and secondary persona was created based off our findings considering which users had which needs.

Primary User Persona

User Flow & Initial Sketches

To find the most effective navigation, I created a user flow chart. This enabled us to find the major user flows within our app and identify where navigation can be improved.

User Flow

Next, we brainstormed the initial user interface and created sketches.

User flow

Low Fidelity

User Side:

Low Fidelity

Clinic Side:

Low Fidelity
Low Fidelity

Usability Testing

Once the low fidelity prototype was complete, we conducted our first round of usability testing. Our 4 testers varied in gender, education and occupation. Their age range was within 18-50 years of age. Testing was completed in approximately 45 minutes for each tester. 

We conducted screening, in-test tasks and post-test questions. 

A few of our questions:

  • How old are you? What’s your highest level of education? Which device do you usually use for completing daily tasks online?
  • At first look, what do you expect you can do with this application? How do you feel about the overall design?
  • What steps would you take to book an appointment at a clinic? What steps would you take to edit your profile?
  • What steps would you take to accept a booking? What steps would you take to create or edit a doctors profile?

Discoveries:

Our primary finding came from a tester who is a clinic owner. We discovered clinic workers would much prefer to handle a desktop application opposed to a mobile one. At this point, we decided to create a desktop side for clinics and mobile for users. 

100% testers were able to complete our in-test tasks without guidance.

50% of testers suggested button titles to be rephrased.

50% testers were confused as to why you can filter wait times ranging from 20 minutes to 2 hours “why would I want to find a longer wait?”.

Prototype Frames

User Side:

High fidelity
High Fidelity

Clinic Side:

High Fidelity
High Fidelity
High Fidelity

Style Guide

color Palette

Color Palette

Buttons

Buttons

Icons & Imagery

Icons

Typography

Typography

William McDonald