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
Neha Yadav
Roles
User Experience Designer,
Illustrator and Visual Designer
Aastha Purwar
Roles
User Experience Designer,
Video Production
Godwin Joseph
Roles
User Experience Designer,
Lead Prototyper
01
Design Phase
Empathise
Define
Ideate
Prototype
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,
-
Paper prototype
-
High fidelity prototype
-
Voice-based prototype
-
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
TASK FLOW
USER FLOW
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
ILLUSTRATION
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.
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.
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.
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.
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.