Newsroom on all devices
BRIEFING

The Newsroom application is a Government of Ontario tool for news distribution, archiving, and keeping members of the public up-to-date on everything happening in government.

The project was originally built in 2009 by another government team using the moveable type CMS system. Because of the age of the system and the fragile state of the platform the Newsroom system had to be rebuilt.

We rebuilt the system in two phases:

Phase 1- a “lift and shift” where we redesigned the front end of the system

Phase 2 – where we built our own contributor portal and cms system.

My Role

I was the lead UX/UI designer and senior frontend developer for both phases of the build process.

Before building on each phase I lead the UX/UI team through various user discovery exercises including user surveys, user interviews testing the current system and low and high fidelity prototypes, and information gathering including card sorting exercises.

In development we built newsroom as a SPA app with Laraval and Vuejs. I was responsible for designing and coding the entire look and feel of the application, ensuring the system was built to AA accessibility guidelines, and making sure the user flow met all user’s expectations.

Tools Used
  • Adobe XD
  • Photoshop
  • Figma
  • Trello
  • Jira
  • Confluence
  • HTML5
  • CSS3
  • SASS
  • Bootstrap
  • Laravel
  • Vuejs
  • PHP
  • JavaScript
  • Jquery
User Research Approaches

User research and design steps used for this project:

  • Survey sent out to all public subscribers to understand how the user experience of the old system felt to them
  • Jurisdictional scans of online government and news media sites
  • Site scans of the (then) current system
  • Multiple rounds of user research sessions examining contributors using the (then) current system
  • Working group to discuss rebuild and rebrand
  • Features documentation and discussion with developers
  • Prototyping with low-fidelity mockups followed by user testing
  • Prototyping with high-fidelity mockups followed by user testing
  • After system was launched a new survey was sent out to all users of the new system
  • Affinity mapping with survey results
  • User interviews to understand how the new system was being viewed
  • Creation of training documentation
DISCOVERY
Research Goals
  • Understand how user flow can be improved and make the site more visually appealing
  • Understand how time sensitive and vital information can be featured in a meaningful way
  • Understand accessibility needs of the users
  • Understand how the new Ontario Visual Identity standards can be encapsulated in the new format
  • Understand how can the site have a user-first feel and be compatible for all devices
  • Understand user personas and how users search and retrieve news
Workshopping

To better understand our users, we set up a series of workshops to gather information and delve deeper into their browsing, reading, and gathering of information.

Workshop 1 – Set Common Vision and Goal
Context map – uncover the external factors, trends and forces surrounding our organization in relation to newsroom

Workshop 2 – Understand Our Users
Proto personas – create 3-4 user profiles – internal and external – such as journalist, political staffer, keen citizen, communications advisor
Empathy map – develop a study of each persona to understand experiences and motivations

Workshop 3 – Understand Our Users’ Context
4Cs – identify the components, characteristics, challenges and characters surrounding newsroom and related products/process
Journey mapping – visualize the sequence of interactions across our users’ experience, including complexity, successes, pain points and emotions

INTERVIEWS

Users of all abilities were interviewed over the course of our research and gathering stage. User interviews were broken down into three separate phases.

Phase 1 – Low-Fidelity Mockup Testing

After workshopping, a series of low-fidelity prototypes were created to test things learned during our workshops. Users were interviewed about prototype flow, features, and design.

Home Page

Newsroom home page low fidelity

Mobile Home Page

Release Page

Phase 2 – High-Fidelity Header Testing

Working with the design system team, a series of headers were created to determine the right look and feel for Newsroom while also maintaining the digital design standards that the design team was trying to create. Working together, we were able to set a standard for Ontario headers. All the headers were tested for their general appeal and ease of use.

Phase 3 – High-Fidelity Prototype Testing

Combining everything learned from the first two rounds of user testing, a set of high-fidelity and interactive prototypes were created to test functionality, new elements, design, style, and flow and to confirm the product would be useful and beneficial to users.

Home Page

Newsroom home high fidelity

Release Page and Timeline Feature

Testing Notifications

RESULTS
Old Newsroom Vs. New Newsroom
Old Ontario Newsroom New Ontario Newsroom
Old Filters Vs. New Filters
Old Navigation Vs. New Navigation
Low Fidelity vs. High Fidelity Mockups
Contribution create low fi Contribution create
Newsroom home page low fidelity Newsroom home high fidelity
Newsroom release page low fidelity Newsroom release page high fidelity

The re-designed newsroom system launched in September of 2020 to raving reviews. Media outlets, subscribers, and government employees have all responded positively on all post-launch research claiming the site is easier to use and more appealing.