Summary

This project was part of my 4th year studio. The goal was to design or redesign an app by following through an accelerated ux timeline. I worked in a group of four other design students for 4 months completing this project.

Role
Designer
Context
4 month minor project
Contrubutions
Research, UX design, UI design

Ontario's current tracking of vaccine info is outdated and confusing

The idea first came from our group discussions when thinking about what kind of problems we face. One group member mentioned that her friend had recently injured herself and went through a lot of trouble finding out if her tetanus vaccination was expired or not. We all realized that accessing record of our vaccination history is difficult and set out to design an app that would improve that.

01 - Research

User Criteria

Before finding potential users to interviews, we built up a user criteria to ensure a diverse group of participants. We aimed to interview people of various ages, with children of different ages, different experience with traveling and different competencies of technology usage.

Interviews

To recruit participants all of the group members reached out to people that fit into different sections of our user criteria. Overall we conducted 8 interviews, 3 of which being parents of young children and 5 being adults who need to track their vaccination history. These interviews were conducted over zoom with one member asking all of the questions and another silently taking notes in the background. 

Once the interviews were conducted we met up and condensed all the information into one document where we could compare the answers to other participants. Within this document the data was categorized into sections relating to the questions like travel, booking, tracking, accessing info, etc.

Main findings

Records

There is a large gap in knowledge between people’s understanding of vaccines and the knowledge needed to effectively manage and navigate vaccine processes and records. This lack of understanding leads to more confusion and frustration with vaccine services.

Booking

The process of booking a vaccine appointment is often made stressful and difficult worsened by a lack of consistency between doctors, pharmacies and the public. This leads to people dreading following up on appointments and in some cases missing their second or third doses.

Remembering

People have inherent difficulty keeping up with their vaccine records. Factors like losing, forgetting or not understanding the yellow booklet can cause problems down the line.

Traveling

There’s a large amount of personal responsibility around getting vaccinated in order to travel. There are very few restrictions requiring vaccination to travel, even to “high risk” countries.

02 - Define

Personas

Based on some of our user interviews, we combined the info into 3 different personas our app would be geared towards. These personas all had different competencies, needs and experiences that would impact their needs for the app. These 3 identities guided our decisions throughout the design process to ensure that no user would be forgotten or left behind.

User Journey

The next step was mapping out one of users journey planning and booking his trip to a location that has required vaccines. This allowed us to identify all the pain points in his journey and what areas need the most attention and improvement. We also explored what the touchpoints and thoughts our user may experience based on our interviews.

03 - Ideate

Information Architecture

Before designing the app we blocked out what screens we would want our app to have. In miro we built mock architecture of how a primitive flow of the app might work. The main sections we had decided on were records, profiles, home, appointments and general info.

Wireframes/User flows

With a pretty good idea of what we wanted our app to do, we got started building out user flows. These were wireframes that take you through the screens to accomplish one specific task. We also built a fully clickable prototype wireframe that allowed us to plan the app’s navigation and do testing.

User testing

Since at this point we’d been working on the app for months, we decided to get other people to test the app to see the problems we were missing. Over zoom we gave people access to the clickable prototype and had them walk us through their thoughts while performing a specific task.

04 - Design

Branding

Once we felt good about how our app works, we moved on to deciding on more graphic elements like fonts and colours. We wanted our app to be simple and readable to ultimately pick mostly blues and greys with a few accent colours.

UI Design

Our goal with the final UI design, was to make a product that feels friendly but still medical. To keep it medical looking, we used mainly blues and grays with limited scent colours. The app was meant to be as simple and clean as possible to ensure that it would appeal to all age groups, young to old.

05 - Deliver

Final App

Some more basic decisions around the app were designed first. Things like the background patterns, boxes and data forms were decided and kept consistent through the app. The page opens up to a sign in which takes you to the home section, this is a bento box design that allows you to navigate the app. Most pages will have a hamburger menu or arrow in the top left to switch between screens as well.

Missing vaccines

If you go to the records section you will find a bar that indicated your current progress with your vaccines. If you are fully vaccinated the bar will be blue, any yellow indicated vaccines expiring soon and any orange means a vaccine has expired. For extra control users can manually remove or restore the vaccines based on their preferences.

Accessing Records

When a specific vaccine is selected it will take the user to a page where they can save and send a pdf to anyone they might need to prove vaccination status to. There is also the option to manually add a vaccine so that users who's vaccines predate digital records can still use the app.

Planning trips

Canada suggests vaccines for specific countries, but knowing what you need is always difficult. We designed a section where you can select a country you want to travel to and the app will tell you what vaccines are recommended for you to travel there. Also there is a section to add your departure date and the app will tell you the latest day to get you're first shot to be fully vaccinated by your arrival.

Booking Appointments

The booking section fo the app takes you to a local mad where you can search for clinics near you. Once you find one you can choose a vaccine, date and time fully online to prevent the need to call. Once the appointment is booked it will sen a confirmation email and add the data to the app.

Rescheduling Appointments

The app will have a section for viewing or rescheduling current appointments. This section will give you the option to change the day, time or to just completely cancel all together.

06 - Review

Next Steps

This project was very fun and a gave a good taste of how a full length project might look. Obviously with more time we would have conducted more research and testing to ensure every user criteria was accounted for. If I were to revisit this project I would probably try and design the back end that nurses and doctors would use to upload the vaccine info to the system.

Next Project
Five Guys App Redesign