COVID Alert Mobile App

Adding a new feature to the COVID Alert mobile app and help make the vaccine appointment booking experience more transparent and accessible to the public.

role:
UX Researcher, UX/UI Designer
Timeline:
2 weeks
Project type:
Mobile app design
Preview of the new design features for the COVID Alert mobile app

Background

How can we create a new feature to the existing COVID Alert mobile app and make vaccine appointments more transparent and accessible to the public?

To further help stop the spread of COVID-19, health officials in Canada are encouraging individuals to get vaccinated. However, finding a vaccination site with available appointments can be challenging. Based on my own personal struggles with booking a COVID vaccine appointment, I decided to dive deeper into this problem.

How can we create a new feature to the existing COVID Alert mobile app and help make vaccine appointments more transparent and accessible to the public in Ontario?

research

Conducting interviews

I conducted user interviews with 5 people to learn more about their experience from booking a vaccine appointment. Turns out, people were not happy with their experience:

Pie chart showing 86%

86% believe ingredients are important. However, they also don't understand all the ingredients listed on the packaging.

Pie chart showing 80%

80% feel sort of confident that the food they give to their dog is healthy.

Pie chart showing 7%

7% believe there is sufficient transparency in the dog food industry.

Person with frustrated expression
"I didn't like any part of the vaccine booking experience. It was hard to find information on where and how to book an appointment. Even when I do find information, it seems to conflict with other sources."
Person with disappointed expression
"My appointment booking experience was not great. There was no centralized portal. Information provided from one website can be different from one another, so that can be frustrating."

Visualizing the data

After gathering and analyzing the data from user interviews, I was able to identify the following key trends:

100% mentioned ingredients are important but it's difficult to understand chemical ingredients

75% also look at product reviews and nutritional content when picking dog food

75% indicated there is a lack of educational resources for finding healthy dog food

75% have had poor experiences with a dog food product due to health concerns

Customers pick Bikechain over other bike shops because of positive google reviews, reasonable pricing and convenient location

Design opportunity: highlight factors above in the home page

Customers prefer to book bike repair appointments online due to convenience

Design opportunity: Add a clear CTA for bike repair appointments

Participants want to know pricing for bike repair services before booking an appointment

Design opportunity: The service offering page should easily be discoverable with pricing details captured

Pie chart

80% indicated vaccine appointments were not centralized which made it difficult to find available appointments

Pie chart

80% did not feel informed when booking an appointment. They would like to know the following information: type of vaccine, eligibility criteria, potential side effects

Pie chart showing 100%

100% had to rely on sources that are not affiliated with the provincial healthcare system to find available appointments (i.e. Twitter, word-of-mouth)

Connecting the Dots

Define

Defining the problem

Based on the key insights discovered, I learned that people were frustrated with the search of finding available vaccine appointments. Based on the key insights, I brainstormed How Might We statements to define and prioritize the problems:

ideate

I used a task flow to map out the user’s ideal experience. Based on the How Might We statements defined, I decided to zone in on the following key tasks:

Task flow

wireframes

I first sketched out the screens with pencil and paper and created wireframes that align with the persona's needs. The wireframes were reviewed with my mentor and other design students to gather feedback early on in the process.

Sketches of wireframe
Wireframe for the home screenWireframe for the product detail screenWireframe for the search results screen
Wireframe of home page

Home Page

  • Added a clear CTA for booking a bike repair service appointment
  • Included a “Why Bikechain” section to highlight Bikechain’s mission and values as a non-profit organization
  • Highlighted services available at Bikechain
  • Added a testimonial section to highlight Google reviews
Wireframe of service detail page

Service Offering Page

  • Added a clear CTA for booking a bike repair service appointment
  • Provided an overview of all the types of bike repair services available
  • Explained how pricing works for each services
Wireframe

Appointment Booking Form

  • Added progress bar at the top to guide visitors through the appointment booking process
  • Added a back button so users can go back anytime and update the appointment details as needed
  • Added a step for the user to review their appointment information prior to finalizing the booking

Branding

usability testing

I created a high-fidelity prototype in Figma for usability testing and recruited 3 users to complete testing via Zoom. The goal was to test the usability of the new features and its overall experience. Participants were asked to (1) learn more about the vaccine and (2) search for available vaccine locations.

The app concept was proven to be successful based on feedback gathered from usability testing:

final design

Based on feedback gathered from usability testing, I was able to iterate and make changes to the prototype to further improve the feature design. Explore the latest prototype in Figma or scroll below for highlights.

Onboarding screen

Onboarding

Get familiarize with the app’s features with an optional onboarding tutorial.
Quick search screen

Quick Search

Scan the product barcode or type in the product name to easily look up any dog food products.
Ingredients breakdown screen

Ingredients Breakdown

Uncover the truth behind the ingredients used in dog food and learn how each ingredient impacts your dog's health.
COVID Alert mobile app home screen

Quick access to vaccine resources

Need more vaccine resources? Tap on the vaccine option on the navigation bar to learn more about the vaccine side effects and how to prepare for the vaccine.
COVID Alert app vaccine resource screen

Find out where to get vaccinated

Provide your address in the search bar to find the closest vaccine locations.
COVID Alert app results filter screen

Narrow down the results

Option to use filters to narrow down the results based on personal preference. Option to filter by the location type and/or vaccine type.

reflection

Moving forward

There is still a lot to explore with the COVID Alert App. Here are some questions that I would like to explore and dive deeper as I continue to iterate on the app:

Other Projects

Preview of the website redesign for BikechainPreview of the website redesign for Bikechain
Bikechain Website Redesign
Preview of the Spot mobile appPreview of the Spot mobile app
Spot Mobile App