Modernizing Ontario Newsroom — a solution for all Ontario Subscriptions

Background

• Setting: The Ontario Cabinet Office, Tech and Delivery Team

• Target audience

  • Phase 1: Ontarians looking to personalize Ontario News subscriptions

  • Phase 2: Ontarians looking to personalize any type of Ontario government communications

Challenge

Ontario Newsroom is a legacy distribution tool created in 2009 as a way to distribute and archive Government of Ontario news items. Although it served its purpose in early 2000s, the data collected was no longer relevant and not aggregated properly to create personalized subscriptions to meet modern business requirements. Thus, the Newsroom Modernization initiative was dedicated to revamping the user sign-up experience in a way that addressed these challenges.

Solution

A Subscription Platform that

• Provides a consistent experience with Ontario government branding

• Walks users through 6 simple steps to signup for subscription

• Allows high level customization using single-select dropdowns

• Improves users’ trust in the system with increased data transparency

• Includes a backend administration panel that (1) visualizes aggregated subscriber data, and (2) allows the Tech & Delivery team to easily modify the signup form

Design Process

My Role

As the project UX lead, I directed all aspects of user experience design through all stages of product development. I also designed the backend administration panel and data collection system to aid the team in monitoring the Subscription Platform.

Competitive research
I researched email communications delivered by other jurisdictions, and how their subscriber management tools effectively segmented their subscribers based on demographics and sent them highly customized emails. 

Success stories such as gov.uk and usa.gov indicated that emails should be optimized for mobile and tablet interfaces accordingly. Using first party data (data collected directly from the target audience), they were able to identify their subscribers as homeowners, retirees and parents of school-aged children, and sent them personalized emails.

UX research on frontend signup
I assessed the current signup process to subscribe to Ontario News and created a user journey map with pain points.

Planning for user research participant recruitment
After preliminary research, I built three personas:

Hoping to consult users from the public with different experiences, backgrounds and perspectives, I drafted a User Research Plan and Participant Recruitment Package outlining the importance, benefits, and logistics of user research and testing.

Documents in Participant Recruitment Package

• Recruitment brief

• Consent form

• Compensation form

• Media release form

Link to user interview questions.

UX/UI design of backend admin panel
Through discussions with the team, I established two key components for the admin panel: analytics and system management.

User testing on signup form with OPS staff
I conceptualized two functionalities that required rapid testing. First, users should have the ability to subscribe to news across multiple parameters (ministries, news types and topics). Second, users should also be able to stack multiple sets of highly customized subscriptions. Two sets of low-fidelity mockups were prepared for users to test.

Since this project was done 100% virtually, paper prototypes were quickly digitized into interactive low-fi mockups.

In a bid to not reinvent the wheel, Prototype 1, based on multiple checkboxes, was designed to be similar to the legacy flow of customizing subscriptions. Inspired by gov.uk, Prototype 2, based on multi-select dropdowns, was brand new to the system.

Participants were instructed to perform a number of scenarios on both sets of prototypes ex. Subscribe to News Releases by the Ministry of Anti-Racism Directorate about Law and Safety. After testing each mockup, they were asked the following questions to test my assumptions:

1. Looking at the final set of subscriptions, does this match your expectations of what you are subscribing to? Is it intuitive? Any confusion?

2. Looking at this interface, how clear is it to you that you are able to ‘stack’ multiple subscriptions?

Manage Subscriptions and Unsubscribe
A similar flow was developed for users to manage their subscriptions and update preferences. Low-fi prototypes were produced and developed in collaboration with developers.

Joint efforts with developers

Based on the improved user journey, developers focused on the functionality while I took the lead in styling and making the platform responsive and AODA compliant.

UI changes made for accessibility

• From customized subscription modal to ‘click to expand’
  When testing with a screen reader, the screen reader would read all dropdown menu options of ‘Customized Subscriptions’ in a continuous loop, in other words, it would not stop reading until users exited the modal. To resolve this issue, the dropdowns were moved from being stored in a modal to a click-to-expand component.

• From multi-select to single-select
  The vue.js component used for multi-select was not AODA compliant; the screen reader would only read ‘blank’ for each option under the dropdown menus. To compensate for this loss, I discussed with the team and decided to change the component into a single-select dropdowns. This change resulted in users only being able to select one option under each parameter, but it was the most feasible decision at this point of product development.

Testing in staging environment with selected branch staff
On March 29-30, 2021, our team selected several volunteers within the branch of Cabinet Office - Marketing and Digital Strategy to test our signup form and email notification system. The majority of volunteers responded positively regarding the signup and considered it a big improvement from the legacy system.

Limitations and Takeaways

Unable to test with members of the public

Senior Management wanted to err on the side of caution in testing with the public. As a result, I was only able to test with OPS staff.

User testing with a small sample size

Given the tight deadlines during Christmas and the New Year, I was only able to test with a group of six. Testing with a user with accessibility needs would have been a valuable experience for the signup form—a public facing component that should be accessible to all.

What I might have done more of or differently…

• I should have started on the content design earlier at the stage of exploring UX/UI for the signup form.

• For the users’ convenience, I would propose making the step indicator clickable to provide users another way to go back and forth between steps.

• I would continue testing on the user flow of customizing subscriptions. More UX/UI would be required for users to better distinct the path to subscribe to all news vs. customizing subscriptions.