Oh, Hello.

As you’ve probably already guessed, my name is Keven Lupien. I’m a UI and UX designer who enjoys solving problems with simple solutions. Making it all look good is the icing on the cake.

ICON

ICON

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.

Version 1 of ICON was a great starting point but there was definitely room for improvement.  

Version 1 of ICON was a great starting point but there was definitely room for improvement.
 

Initial Observations

  • 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.

 

Wireframes

Mobile-first wireframes were created for every aspect of the site before moving into prototyping and user testing.

Select screens from the initial concept for grouping the immunizations input by date and by immunization.

Select screens from the initial concept for grouping the immunizations input by date and by immunization.

A small portion of the numerous wireframes created throughout the design process.  

A small portion of the numerous wireframes created throughout the design process.
 

 

 
 

Usability 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.

Various prototypes created in Marvel for quickly testing the overall flow and more specific sections of the site.  

Various prototypes created in Marvel for quickly testing the overall flow and more specific sections of the site.
 

 

 
 

Visual Style

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.

Some initial design options included prominent PHU brand colours in the header and footer while others were very monochromatic.

Some initial design options included prominent PHU brand colours in the header and footer while others were very monochromatic.

 

 
 

Additional Functionality

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.

UI flow showing all the possible scenarios when a user sets or resets their PIN.  

UI flow showing all the possible scenarios when a user sets or resets their PIN.
 

 

 
 

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.

The finished v2 product was responsive, AODA compliant, and provided an improved user experience.  

The finished v2 product was responsive, AODA compliant, and provided an improved user experience.
 

 

 
 

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.

Daniel Wesley

Daniel Wesley