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


Final design

Here you can find the link to the prototype


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.