top of page
Mockup Hero banner_edited_edited.jpg

OVAC : Ontario's Vaccination App

A case study to design a streamlined COVID-19 vaccine appointment booking application for the Citizens of Ontario.
 

00

PROJECT OVERVIEW

About
Project


 

The project started with a key problem of reimagining Ontario's vaccination booking system. We started out by doing a task analysis which later helped us in coming up with a user flow. Based on the user flow we were then able to brainstorm ideas and create a low-fidelity clickable paper prototype.

Later, we worked out the UI elements, created a visual guide and worked on an interactive clickable high-fidelity prototype we then also incorporated the voice assistance feature in our app which we added by using voice flow. The final task was to create an experience design by producing a video that explains to the user the usefulness of the app as well as the entire vaccination process.

Problem

 

My Role

 

Booking a COVID vaccination appointment in Ontario has been a challenge for many citizens since the existing solutions are not that easy to navigate.

I did this case study as a part of my UX Design Graduation Project. I worked on a  system that is not only user-friendly but also convenient by making the vaccination process more streamlined for both the Ontario citizens and Health ministry.

The Team

5.jpg

Neha Yadav

Roles

User Experience Designer,

Illustrator and Visual Designer

IMG-20200202-WA0002-02.jpg

Aastha Purwar

Roles

User Experience Designer,

Video Production

Gowdy_edited.jpg

Godwin Joseph

Roles

User Experience Designer,

Lead Prototyper

01

Design Phase

Empathise

Define

Ideate

Prototype

heart (1).png
document.png
969e90d6ca084075fcb7afc0c01b4e81.jpg
prototyping.png

Secondary Research
 

HMV statement
 

Paper Prototype
 

High-Fid Prototype
Voice Assistant 
End-to-end experience design

 

02

Empathize and Define

The Cause

 

The current vaccine booking is known to have a

Fragmented booking systems

  • 100+ different booking systems based on city, health network,
    neighborhood, level of government (provincial, regional, municipal).

  • Fragmented systems have led to citizens sometimes booking in several
    clinics to try to secure an earlier appointment.


Poor usability
The usability of many of the booking systems is challenging for many citizens to book an appointment.

Miscommunication by public health authorities

Communication from various public health officials has been confusing and at times, contradictory.

The Impact

 

Human-level
●Increased confusion & frustration (“How can I actually, get an appointment?”
● Increased anxiety (“When will COVID finally be over?”)
● Did my booking go through?


System-level
● Missed appointments and unused vaccines due to “no shows".
→ largely caused by citizens not canceling appointments that they           cannot make
→ Some citizens booking in various clinics and not canceling unneeded
appointments

● Slower than expected vaccine rollout
● Slower “reopening of society”

HMV statement

THE OPPORTUNITY

How might we create a single COVID vaccine booking system that allows Ontarians to easily book an appointment?

The Challenge

 

Over the course of 6 weeks, we designed 4 prototypes of the potential solutions for this design problem that included,
 

  1. Paper prototype

  2. High fidelity prototype

  3. Voice-based prototype

  4. Experience prototype


to explore the probable solutions to this design problem.

03

Ideate

Task
Analysis

 

There are various tasks the user needs to go through while booking an appointment using the existing digital solution. We tried to gather details about how users can achieve the tasks more efficiently without any unnecessary distractions while using the app. We did a detailed analysis on the task performed and came up with these user’s goals to flesh out our task flow and user flow.

Eligibility
confirmation

Identity 
confirmation

Health card
details

Vaccination
confirmation

Appointment 
selection

Appointment 
confirmation

Appointment 
reminder

Appointment 
cancellation

Frame 45.jpg

TASK FLOW

USER FLOW

Frame 44.jpg

Paper 
Prototype


 

Based on the user flow we then conducted a brainstorming session to sketch rough ideas of the wireframes and later created a clickable version of the sketches using the Marvel app to help iterate on the design further before creating the high-fidelity prototype.




 

04

Prototype

High-Fidelity
Prototype

 

The clickable prototype helped us in understanding what aspects are workable to move further into the process of creating a high-fidelity prototype. The high-fidelity prototype would provide the user with a more realistic and responsive overview of the final product and it will also give us scope for further iterations based on the usability testing.

Style Guide

TYPOGRAPHY

Font Name

Mulish 

Font Weight

Bold

Regular

Light

Font Size

Aa

36px

Aa

26px

Aa

20px

Aa

18px

Aa

16px

Aa

14px

Aa

13px

Examples

Schedule an appointment

Book appointment near you, Easy modification and cancellation at your convenience.

Shepherd Medical College

Book appointment near you, Easy modification and cancellation at your convenience.

BUTTON

secondary button.png
primary button.png
primary button (1).png
primary button.png
secondary button.png
fgfdgfhgf.png
Field.png
Card.jpg

ILLUSTRATION

77C0076F-E357-49E1-859E-858DB2F46A84.png
62550D39-989A-4760-AE1A-1DAE7058A8E2 1.png
2EBCD203-1113-4714-9748-04D4F66B9B6C.png

COLOR

#262626

#A3A3A5

#F3F3F3

#FFFFFF

Onboarding
Screens

The onboarding screens give the users an overview of what they can do using the app by using illustrated visuals to make it more user-friendly and easy to understand.

onboarding1.jpg
onboarding2.jpg
onboarding3-1.jpg

Check
Eligibility

The user registers and then checks their eligibility to receive the vaccination. We have created two pathways to check if a user is eligible, one lets the user manually enter the various details whereas the other one lets the user click an image of their health card and their information gets entered in real-time to find out if they are eligible for vaccination.

Register.jpg
Eligibility.jpg
onboarding3.jpg
Eligibility-1.jpg

Profile
Screens

User profile lets the user book, cancel and modify an appointment as per their need. It also provides accurate information about their vaccination time, date, location and access any important information before they go for vaccination. 

Home after booking.jpg
Home screen.jpg

Vaccine
Booking

Booking vaccine appointments has never been easier. User can choose a location nearby and book an appointment for their preferred date and time with the flexibility to modify or delete their appointment if need be.

Select month.jpg
Select date.jpg
onboarding3.jpg
modify appointment.jpg

Prototype 
walkthrough

Watch the video to get a complete walkthrough of the entire process of booking, modifying, and canceling a vaccination appointment below.

Experience 
Prototype

 

The experience of booking and getting a  vaccine does not simply occur on a smartphone app or the web, though. It is very much a service experience that spans digital screen-based and virtual interactions, as well as in-person experiences.

 

A video experience prototype highlighting the 4 Ps: People, Places, Props, and Processes was built to illustrate the end-to-end experience from the time that a user begins looking for an appointment to the time they are fully vaccinated. 

It began with mapping the storyboard/experience flow, assembling a narrative, collecting or shooting assets, and recording a voiceover to put together the following final video. 

Thank You!

bottom of page