A re-creation of the Ontario COVID-19 Vaccination Appointment Experience
6 weeks, 4 prototypes, 2 UX Design Heroes and 1 province to save!
Project Overview
Goal: Create a single COVID vaccine booking system that allows Ontarians to easily book an appointment
Impact: I created an application that lets Ontarians book their vaccination appointment in a clear streamlined manner. Users can Book, Reschedule, Cancel and Check-In all from their Smartphones.
Role: UX Designer — worked in collaboration with 1 other UX Designer
Timeline: 6 weeks
Methods: Secondary Research, Task Flow, Sketching, and Wireframing, Designed 4 prototypes:
- Paper prototype
- High fidelity prototype
- Voice-based prototype
- Experience prototype
The Problem
Booking a COVID vaccination appointment in Ontario has been a challenge for many citizens.
The Causes
Fragmented booking systems
- 100+ different booking systems based on city, health network,
neighbourhood, 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 cancelling appointments that they cannot make
Some citizens booking in various clinics and do not cancelling unneeded
appointments
- Slower than expected vaccine rollout
- Slower “reopening of society”
The Opportunity
How might we create a single COVID vaccine booking system that allows Ontarians to easily book an appointment?
Paper Prototype
My partner and I decided it would be best to do secondary research and see the current appointment system to gain insight into what to keep and what not to keep.
What We Did
After doing that we laid out the requirements that we will need from the user to design a vaccine booking system. The following are what we will be providing and also requiring from the user in our prototype:
- Note* — we found the two confirmations above redundant so we combined the two in our prototypes. (eligibility & Identity)
- In addition, we added appointment reschedule since that isn’t an option in the current system.
Task Flow
Now that we have the constraints and requirements set, we can begin to ideate and brainstorm. My partner and I created a quick task flow to get our brains moving!
Sketches
My partner and I decided to sketch out the entire process individually and then regroup back to share our ideas.
We took the time to critically assess each other's sketches and took out the screens that we want to use in our collaborative design.
Using the screens that we took out from above, we created a screen wire flow. After putting the screens together we continued to carefully analyze and look for areas to improve and add new iterations.
We created a booking system with 3 key sections:
- Book Your Appointment
- Check Appointment Details
- Cancel/ Modify Your Appointment
Below is a video demonstrating our paper prototype:
If you would like a summary review of all the screens featured in the video above, please feel free and view them in my google drive folder! (It’s pretty cool, I promise!)
High Fidelity Prototype
My partner and I have explored some early designs for the re-designed COVID vaccine appointment booking system and completed a paper prototype. Based on our paper prototype, we created an interactive high fidelity of the appointment booking experience, along with a video capturing a user using our prototype.
What We Did
From our finished paper prototype, we realized some redundancies needed to be addressed. There were two sections within our app where the user could cancel and reschedule their appointments. Instead, we gave the user only one option and decided to scrap “Modify your Vaccine Appointment” and replace it with a section for “Appointment Check-In”.
Now, that we decided what we would like to refine. We set out to create a mood board featuring, inspirations, fonts and colour palettes we’d like to use for our design.
Using our mood board we were able to compose an interactive high fidelity prototype.
Style Guide
I created the following diagrams to explain my UI design thinking:
My partner and I built the individual screens using Figma and created links between screens to simulate the interactivity. In addition, we added motion design and transitions where appropriate to enhance the usability of our design.
High Fidelity Prototype
Now that we iterated our clickable high-fidelity prototype and ensured that it captures the end-to-end COVID vaccination appointment booking experience, we captured a user using our prototype.
The following is a breakdown of our interactive high fidelity prototype:
Voice Prototype
My partner and I now had to consider how a voice or conversational interaction could enhance the experience.
What We Did
We identified parts of the booking experience that would be best for voice interaction we chose:
- The Home Screen (Onboarding) — To welcome new users into the app and explain how everything works.
- Terms & Conditions — Allows users not to miss or skip over information that pertains to them.
- Confirmation Screens — This is an important screen regarding their appointment details and more. Hearing these details out loud allows for better retention of information.
- Confirmation Pop-ups — As a form of extra error prevention using voice can make the user more alert of the decision they are about to make
We felt that since there are many pages where the user would need to visually see information, it would not make sense for the voice to speak those pages out loud. Pages such as the vaccine calendar, location and time availability do not include a voice for the purpose that once the user finishes listening to the contents, they would most likely forget the information.
These pages are better displayed visually for users to see the date and time availabilities. This also allows users to check with their own schedule and when they are available.
We also made sure that no important identifying information was spoken out loud since we want to protect the user’s privacy. We do not know where users will be using the app. Therefore, we don’t want sensitive information such as health card numbers or full names to be disclosed.
Task Flow
Here is the task flow we created for the voice interaction:
The Script
Here is the script we made based upon the task flow:
Prototyping Method:
We used voice simulation: similar to Wizard of Oz, but with using a text-to-speech audio (https://ttsreader.com/) to simulate the voice of the voice assistant
Choosing a Voice:
We tried countless voices, but we believe we got the right one. We wanted a voice that was able to catch the essence of our cartoon doctor. We chose a voice that is warming and friendly with a bit of assertiveness. I’d like to present to you … Dr. Leo.
Video Experience Prototype
The experience of booking and getting a vaccine does not simply occur on a smartphone app or the web. It is very much a service experience that spans digital screen-based (app/web) interactions and virtual (voice assistant or call centre) interactions, as well as in-person experiences.
An experience prototype is a tool used to tell a story about a design. It allows for the showing of an entire experience through a narrative. Video prototypes can be used to help better show a design in use in a way that clients, stakeholders or users can immediately understand as well as connect with emotionally.
What We Did
My partner and I designed a Video Experience Prototype 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.
To create this experience the Four Ps were considered:
With only 3 days to design this experience, my partner and I went to miro to have a brainstorming session.
I put together the process by identifying the key features of our prototype that must be acknowledged in our video. I also took into account how our app will be used when it’s time for the users to check into their appointment.
Storyboard
After I put together the setup, I handed it over to my partner who drew up a storyboard for our video.
The Script
Taking the storyboard handed back to me from my partner I wrote a script for the voice-over narration. Storytelling is an important skill to have and tried my best to create a video that can be easily followed and understood while keeping the viewer's attention.
With the script done, my partner and I went on the web and search for free stock video footage to use in our video. We also took our own video shots using people in our everyday lives.
I’m very comfortable editing and directing videos, this comes very naturally for me. I was lucky enough for my partner to give me full control, with my favourite microphone and editing software, Filmora10, I was able to produce our Video Experience Prototype…
Our Final Video Experience Prototype
Conclusion
Our goal was to identify a way to create a single COVID vaccine booking system that allows Ontarians to easily book an appointment. Based on our prototype I believe my partner and I accomplished creating a good experience for users.
Next Steps
Our next step following this point would be to test our design solutions with users to get immediate feedback so we can adjust and make iterations for improvement.
What I learned:
- Throughout this whole process, I learned the importance of storytelling. For every single prototype, we created a video that explained the current prototype.
- I learned that how to present differently depending on who my audience will be. For example, when I’m explaining a prototype to another designer I can use jargon. When I’m presenting to an audience of users and stakeholders, I need to be able to present content in a digestible manner.
- I also learned that I have an awesome partner who I wouldn’t trade for the world! We totally understand each other's strengths and weaknesses, which allowed us to alternate leadership and have full trust in each other's capabilities — S/O to Emily Wong!
If you enjoyed my story, feel free to connect with me on LinkedIn. I’m open to new opportunities in the design world. I can also talk about plants and TV shows all day so feel free to chat.
