Immunization Connect Ontario
An Online Tool for Viewing and Report Immunizations
ICON was created to give Ontarians the ability to view their immunization records (also known as yellow cards) and to submit immunizations online. This move to digital allows families to keep better track of their records and ensure school children are up to date with their immunizations.
Improving on Version 1
Ontario’s Ministry of Health and Long-Term Care (MOHLTC) partnered with Mohawk College’s mHealth & eHealth Development and Innovation Centre (MEDIC) to develop the first version of ICON. After launching the v1 product I joined the Mohawk team to help improve the user experience and revamp the overall user interface.
- The UI looked dated, especially since it was a new product.
- Each public health unit (PHU) had their own unique URL to access their customized version of the site which included their logo, name, and contact info. The header colour was also customized for each PHU which sometimes clashed with the various default colours.
- There was a lot of text that user’s weren’t reading.
- A lot of form info was hidden under tool tips.
- The structure of some input screens seemed counterintuitive which could result in incorrect user input if they didn’t carefully read through each step.
- There were 2 unique ways of inputting immunizations based on how a user answered gating questions. This felt strange and resulted in users having to re-adapt to the alternative input if they were submitting for more than one person (e.g. a parent with multiple children) with different answers to the gating questions.
- Because there are so many similar immunizations it can be very confusing for the user to know which one to select.
- Based on observations and usability testing we decided that the immunizations input would be one of the major aspect we’d focus on for improvement.
- Many smaller details were also noted and taken into consideration for v2.
Focusing on Immunizations Input
Although we were set on updating the entire product, based on our observations and v1 usability testing we decided that the immunizations input would be a major focus for improvement.
After researching the various types of physical immunization records (e.g. yellow cards which changed over the years, EMR printouts with numerous formats) I realized there was no consistency for users to rely on… except for one thing – how the immunizations were grouped. They were either grouped by date (each date followed by the immunizations given on that date) or grouped by immunization (each immunization followed by the dates it was given). With this concept driving the redesigned immunizations input we were able to come up with a streamlined user experience.
Mobile-first wireframes were created for every aspect of the site before moving into prototyping and user testing.
Once the new format for inputting immunizations was fleshed out I created simple prototypes using Marvel to test internally and made some minor adjustments based on feedback. After that the developers built a much more dynamic prototype which we used to set up usability testing with outside users. The first round of testing revealed that we were on the right track and provided insight on what we could still improve upon. We made the necessary changes and the developers built out the full end-to-end site for the next round of testing. This allowed us to find additional pain points and make improvements where needed.
As mentioned above, some of the PHU branding clashed with the rest of the the site’s overall colour palette in v1. For v2 I stripped away the extra colours and a lot of the visual elements that didn’t add value and presented much cleaner, minimalistic designs. I also used Ontario.ca as a design reference since many Ontarians are familiar with the site and already feel comfortable using it. The final design was similar to Ontario.ca without being a carbon copy and incorporated some PHU branding along with bold headings, bright buttons and a flat design style.
Jumping ahead a little – once we completed v2 we were tasked with adding the ability for the user to set their own PIN and reset it using their email. Previously they were required to call into their PHU in order to do either. This new functionality required us to think through all the scenarios a user might navigate through. To make sure I didn’t miss any screens I put together a UI flow which turned out to be extremely helpful to the entire team for visualizing what was required.
Putting It All Together
After all the usability testing, team collaboration, and revisions we had achieved our goal of improving on v1 and making it a more streamlined, friendlier user experience while ensuring AODA compliance for users with disabilities.
A Lot Learned
During this project I had the opportunity to work with and learn from two great teams of people at Mohawk College and MOHLTC. I tried out a lot of new tools/services including Figma, Lucidchart, Invision, Bootstrap Studio, and Fort Awesome. I also learned about AODA and accessibility which I can now apply to future projects. Lastly, I now know more about immunizations than I thought I’d ever know.