Digital Record of Immunization

Roles

Sole Designer - Research, Wireframing, Prototyping

Product

Mobile App

Time

Jun 2024 - Jul 2024

Overview

One of the projects I worked on over the course of the UX Design Certificate I did with York University, was designing a digital experience for users to track their vaccinations.

Currently the method of tracking vaccinations in the province of Ontario is through yellow vaccination booklets and despite this digital age we live in, it's surprisingly convoluted to find your vaccination history if and when you need it and it seems like there's no one place that has this information for you to view. The easiest way I've found, going off the information the Public Health Ontario Immunization page is to contact your local public health unit directly. So, as a project in this program, I've decided to design a system that allows residents to accurately track their immunization records digitally.

Ideally, I would imagine this kind of service to be offered by Public Health Ontario with tie-ins from the regional public health agencies. The app would pull in uploaded immunization information and present it to the user when making an account and allow them to update/view/add immunization records as needed.

I took this project through the entire design process from low fidelity wireframes to designing wireframes, conducting user research, and designing high fidelity mockups.

Secondary Research

I looked at various forms of tracking vaccinations across physical and digital means

Yellow Card

  • The standard method of tracking vaccinations in the province of Ontario

  • Allows parents to track which major vaccinations their child needs at a various stages in their life

  • Easy to lose

  • Record keeping is ultimately up to the parent and may be prone to errors

CANImmunize

  • Can track vaccinations for your family

  • No longer needed to carry around yellow book

  • Reminders when it’s time to get vaccinated

  • Get facts about vaccinations in province of territory

  • Receive alerts about disease outbreaks in the area

  • Multiplatform (iOS, Android)

Design

Based on similar features from other systems, I decided to design and implement the following in my designs

  • Adding/Managing Vaccination Records for multiple individuals

  • Adding a notification system that reminds the user when the next vaccination will be (if applicable)

  • Downloading/Sharing a full list of vaccination for sharing with various healthcare providers

  • A feature that allows users to find the nearest clinic

  • A medical dictionary, where users can find more information on various vaccinations, diseases, and medical terminology

One feature that I thought was useful to include, and found wasn't included in other similar implementations, is a medical dictionary, where users can find more information on various vaccinations, diseases, and medical terminology. One thing I aim to convey through this is project is transparency in information. For the average person, the fields of science and medicine can seem complicated and daunting, and by implementing a way for users to gain information straight from the app I hope to bring down that barrier.

Early Concepts

When thinking about the various user-flows for my early concepts sketches, I wanted something more or less in line with what the Public Health Ontario website currently offers. With that in mind, I decided on the following flows:

  1. A flow that allows the user to view, edit a vaccination record, alongside a home page that lists out all the vaccination types the individual has received

    1. A “sub-flow” that allows a user to add a vaccination record on their own that would be added to the list of vaccinations on the home page

  2. A resources page that allows users to find tools like a infectious disease glossary to learn more, contact information, various health topics, etc

  3. A booking page that allows users to find immunization appointments in their area - offered by their public health unit and Public Health Ontario

  4. An account page that allows users to view their account details, change their information, change their preferred language, etc

Early concept sketches showing the core user flow

Mid-Fidelity Wireframes

These sketches were then moved to a mid-fidelity mock up, and as this service is something I imagine to be offered by Public Health Ontario, I used most of the Government of Ontario’s design language in my mock-ups

A handful of mid-fidelity concepts screens showcasing the terms and conditions, home page, disease and conditions glossary, and a search for clinics run by the public health unit for “student immunization”

Usability Testing

Following completion of the mid-fidelity mockups, the screens were brought together in Figma and developed into a working prototype for usability testing. The cohort was comprised of approximately 5 people that I knew personally, and they were asked several questions about their experience in the app.

I uncovered a wide variety of valuable data from the results of the usability testing and rated them based on priority for me to resolve (from P1 - highest priority to P3 - lowest priority). Some high to mid priority items that I would need to address are:

  • More clear error prompts (P1)

  • More visibility what fields are required (bold or *) both in the profile/sign-up screen and in the record addition screens (P1)

  • Make it clear that these are read-only fields versus in record addition screens, there are interactable fields (P1)

  • Edit to upload documents field - change this to document name or view documents when viewing record details - in record addition, have buttons that say "upload" instead with a list of documents that generate below (P2)

  • Live update the tab bar as the user goes through the various main user flows (home, book, resources, settings, etc) (P2)

Some mid to low priority items, these are items like new features that would be nice to have in the experience but not necessarily critical for it to function. 

  • Implement a notification centre, either on the home screen or in the navigation tab (P2)

  • Introduce more features like recommendations for travel vaccinations (P3)

  • Introduce more fields in the sign-up screen (gender, family doctor) (P3)

High Fidelity Mockups

My goal when moving to high fidelity mockups was both to bring all the elements in the wireframes to a consistent design language, and to convey information without making it overbearing for the end user, additionally it was also important that I incorporate feedback I received from the usability testing.

A style guide was created to consolidate all assets and design direction

In general, I realized the biggest flaw in my designs thus far was with the feasibility of it - I pictured this app working by fetching electronic vaccination records that was uploaded to the provincial health system but along the way I realized it would also be helpful for an individual to also be able to add their own records so they didn’t need to wait for the record to show up on the server side.

These two systems I pictured ended up creating a gap that wasn’t coexisting well together in my initial mockups. So, I rethought the backend processes and came up with a solution that seems to work fairly well to me and seems technically feasible.

Updated user flow of the rethought back-end process

Usability Testing Updates

Based on the results from the usability test, the biggest changes that needed to happen were with the home screen and various vaccination information screens

  • I updated the information architecture to have records grouped by disease / vaccination type as opposed to individual records

    • A filter system was added so that users would be able to filter the list of records (i.e to only show vaccinations that are due / overdue)

  • Added clearer error prompts that would appear in a "toast” message near the bottom of the page when the user performs an administrative action (i.e deleting a record)

  • Added a “sync” button to allow the user to manually sync their information with a server as per the updated back-end process above

  • A notification system was added

  • Fields were updated in the vaccination record details to clearly show when a field is read-only versus editable

Re-worked home and vaccination details screen designs to show more system level feedback to the user and improved information density

Final Product

A interactable prototype can be found here

Conclusion

Overall, I learned a lot over the course of this project and received a lot of great feedback for me to further iterate on these designs. In the future, I’d like to consider more of how this would work exactly on the back-end and introduce new functionality to reduce the barrier of entry. However, for this to be a real product, there’s a lot more things to take into consideration than what I presented here, for example, health information can be very sensitive and needs to be stored securely, I would also expect this to have a desktop application (either a program or a browser-based web portal).

That being said, I think this is something that could be very useful, especially given this digital age we live in and is something I would hope to see in the near future.