Introduction to Ontario.ca
The Government of Ontario website provides information to residents, businesses and visitors to Ontario. The site features information on Ontario government services and programs. One of the services provided on the website during the pandemic was the Covid-19 vaccination service.
Project overview
My team redesigned the Ontario vaccine website in order to make the booking process quicker and clearer for users with and without the Green OHIP card.
Methods
Primary Research
Secondary Research
Usability test
Sketching
Wireframe
Prototype
Year
June - August
2022
Timeline
10 weeks
Main Tools
Miro
Marvel App
Figma
Teams
My role
I worked as a UX designer on this project delivering an end-to-end experience. I conducted interviews, usability tests and also created part of the wireframes and prototype.
Problem
On the current Ontario website, users with or without a Green OHIP card have to go through the same steps and answer unnecessary questions to find out if they are eligible to book the next dose.
In addition, checking the available slots is time-consuming. So for those who are in need to get the vaccine ASAP, the process is frustrating.
Design process
The project is done through three design phases.
Since the Ontario booking website changed a few times during the pandemic, we did secondary research to find out what the steps are to book an appointment on the current website.
We discovered the challenges people faced and their unmet expectations while booking vaccine appointments by interviewing them. Based on our findings, we realized people's needs and the missing features from the website. Then, we created the wireframes, using pen and paper, and tested the paper prototype on Marvel App to validate the steps of the new user flow. Afterward, we refined the design, made the high-fidelity prototype on Figma, and made a short demo.
Users pain points
The main challenges users confronted when experienced booking vaccine appointments:
Too much information and links on the main page.
The steps for users with and without the green OHIP card are the same. However, people without the OHIP card have to call the provided numbers anyway.
Too many steps to get to the point of seeing the eligibility.
The pharmacy route is not helpful since they have their own website.
Not able to find the earliest available appointment.
Current user flow
Persona
Persona type 1 - User without OHIP
Aditi
Age: 23
Job: Student
Location: Toronto
Bio
She is an international student at Humber College who received 2 vaccine dosages in India and wants to get the 3rd one to make sure she doesn't get sick especially because her family is not here to take care of her.
Needs
To know how to book an appointment
What documents she needs to have
Is she eligible for the 3rd dose or not
Frustrations
Eligibility on the Ontario vaccine website isn’t clear
Unnecessary steps to find out she cannot do it online
Persona type 2 - User with OHIP
Bio
He is a marketing specialist who needs to travel sometimes for his business however his schedule is affected by Covid-19 travel limitations.
John
Age: 38
Job: Marketing
Location: Toronto
Needs
To quickly book an appointment to receive the booster shots in case he needs to go abroad.
To be able to cancel or modify his. appointment in case it's needed.
Frustrations
Too many irrelevant questions to answer on the website.
Not knowing if he is eligible for the next booster shot.
Finding the soonest available appointment is time-consuming.
Design solution
Based on the current website, people are divided into two groups: users with the green OHIP card and users without it. We redesigned the process in a way that:
Users without the green OHIP card find out how to process ahead by receiving informative feedback right away with just one click.
The green OHIP card owners do not have to read a lot to find out about their eligibility.
Users can filter available slots based on their priorities like location, date, or vaccine brand.
Users can easily modify or cancel their appointment or download their vaccine certificate.
New user flow
Wireframe
To experience Paper prototyping (Marvel), each of us sketched the wireframes using pen and paper based on the insights we got through our research , voted on the best design for each page and came up with the final wireframes.
Book an appointment
Modify/Cancel an appointment
Download vaccine certificate
Usability test feedback
Some of the feedback we received from a low-fidelity prototype usability test
Put this question on the first page to void sending users to the next page.
Give users postal code or “Address” options.
Remove pharmacies since they have their own websites
Improve the search
Place email/phone number after booking
Give users one option at a time, to avoid distraction
Users expect to see confirmation feedback first
Give users both email and text options
Remove booking for a family member to avoid confusion
UI style guide
Colors
Typography
Buttons
Text fields
Product Demo
Reflection & Learning
Nearest location or date. Two factors needed to be in the booking system to give options to users whose priorities are different.
Paper and pen is the simplest wireframing tool however, it’s more time-consuming.
Next Step
Provide a section for people without the Green OHIP card including international students to be able to book a vaccine appointment online.