Vax-Check – A COVID-19 Vaccination Booking Website Concept
Year
2021
Role
UX Designer
Timeline
6 weeks
Methods
Secondary Research, User Flow, Sketching, wireframes, prototype
Tools
Marvel app, Voiceflow, Figma, Miro
Project Overview
My team designed this Vax-Check Website for those users to find updated information about COVID-19 vaccination, book an appointment and track their appointments.
My Role
Collaborated with peers at Humber College as a UX designer in this whole project. I mainly created a UI guide style, sketches, prototype to keep visuals in consistency. Additionally, I had an opportunity to create a scrip for IVR feature and make a video for final demo.
Problem Statement
"International students are experiencing the confusion while searching for booking an appointment for COVID-19 vaccination because the booking function is not available on the government website."
Design Process
We broke down the process into three parts: Empathize, Ideation and Refinement. In the first stage, we wanted to understand the pain points on the current government website and users' experience on searching COVID vaccination information. Based on the insights we collected, we brainstormed our ideas and sketched out the initial paper prototype on Marvel app in order to validate each step and identify the problems within the process. In the ideation sprint, we also applied Voiceflow for the Interactive Voice Response as our conversational channel on the Vax-Check website. In the last sprint, the team not only visualized the concept to high-fidelity prototype but also created a to showcase all the Vax-Check features.
Find User Pain Points
According to our secondary research, we found that users had a hard time figuring out how to book a COVID-19 vaccination appointment because the terms on the government website weren't clear enough to understand the COVID-19 vaccination, especially for international students. Additionally, there are many communities on social media (e.g. @VaxToronto and @VaxPeel) sharing different booking systems and updated eligibility for users while COVID-19 Vaccination is implemented. This still led a majority of users in confusion because they didn't know if the information from outside of the government was trustworthy or not. Also, people would hesitate or give up booking an COVID-19 vaccination if it takes longer for waiting on a call or in-person.
From the current task flow, we found the pain points are following:
🚩 Many redirections for providing the same information
🚩 Too many external booking systems- Each pharmacy and public health unit has its individual booking system
🚩 Misleading information on eligibility on websites
🚩 Exclusionary questions/surveys for non-OHIP users
Persona: International Students in Toronto
We targeted "International students" as our main end-user type in this project, because this group of people was the most delicate compared to other groups. (e.g. Ontario seniors, individuals, children, etc.)
Through identifying the needs for international students, it would help us to cover most of the considerations we needed.
User Insight
"International students have desires to know their eligibility, and in order to book a COVID-19 appointment at either a pharmacy or health unit on the same platform."
Design Sprint
Based on our research, we brainstormed a lot of ideas to help users to complete a booking process easily. In this solution, we not only wanted users to see this website for sole one purpose, but also expected the Vax-Check website to check updated information and learn more about Vaccination brands/types.
Design Solution
"International students who don't have health cards has a struggle to identify their eligibility and book an appointment because of limited functions on the government website. Our solution should provide a way for these students to check their updated eligibility timeline toward completing a COVID-19 appointment process without jumping out from the website"
New User Flow
We created a user flow based on the research collected. This flow helped the team to break down the booking process step by step before moving forward to paper prototype.
Paper Prototype (Wireframing)
We sketched wireframes and each step including booking process, mobile components and error scenario according to the user flow we above. To validate the whole process was able to completed seamlessly, we created a paper prototype by Marvel app, which has similar idea to Balsamiq.
Our website wireframes overview as below:
A video demonstrating our paper prototype is below:
Interactive Voice Response (IVR)
As our main goal to facilitate users' COVID-19 vaccination booking process. We also created a IVR feature for those who don't prefer to read throughout and fill out the information on the Vax-Check website. To avoid errors from voice captures and repetitive conversations. Instead of asking questions as same as a traditional way, we created a script and task flow with suggestion provided to save users' time on the booking process. This also can reduce mistakes (e.g. vague pronunciation, checking personal information) from both ends.
The overview of IVR script and task flow:
This video is to demonstrate IVR feature:
Refined High-Fidelity Prototype
While refining our product, we created a basic UI style guide to keep the visuals in consistency. Additionally, we made a video to demonstrate how the Vax-Check website works.
What I learned
The biggest learning was that the user flow and strategy of the IVR feature could be apparently different due to its conditions and environment compared to the website.
✔️ Through this project, video showcasing is a powerful deliverable to visualizing the concept of our prototype.
✔️ Secondary research and Heuristic Evaluation are important as other quantitative and qualitative research, especially in. Each team member shared diverse references and their experiences to conclude user insights.
✔️ Usability Testing will be crucial for the team to refine the product better and discover any details we have missed.
For Next Steps:
✔️ To understand more detailed information in order to confirm/reorganize the information architecture of this website.
✔️ Develop practical plans and scripts for the usability testing based on the feedback from key stakeholders. Their doubts and questions may be answered in the usability testing sessions.
✔️ Prepare new feature including Vaccination Passport and multiple language switch.