The Newsroom Contribution System is content management system (CMS) built from the ground up for the Government of Ontario’s Newsroom site (https://news.ontario.ca/en). The original Contribution site was built in 2009 on Moveable Type and needed a complete overhaul due to changing demands, old technology, major UX and accessibility issues, and style integrations with the new design system; so we built an entirely new system.
Built using the microservice architectural style (an approach to developing a single application as a suite of small services, each running in its own process and communicating via), this CMS integrates multiple custom built microservices (an account management system, the Newsroom frontend system, a components library, a style library, and a subscriptions system) into one robust and flexible system.
My Role
I lead the UX team for all user research and prototyping, lead the design and user flow of the system, coded the entire frontend of the application including ensuring the application’s accessibility, and helped build and facilitate training materials and sessions.
Being able to lead the research and design of the system gave me the freedom to really listen to the user’s needs and design a system that exceeded their expectations, increased work proficiency, and offered accessible functionality.
Tools Used
- Figma
- Jira
- Confluence
- Trello
- HTML5
- CSS3
- SASS
- Gitlab
- Bootstrap
- Laravel
- PHP
- VueJS
- JavaScript
- jQuery
User Research Approaches
- Survey sent out to all users of the system to get a feel for how the system worked for them
- Jurisdictional scans of online government and news media sites
- Jurisdictional scans of large CMS systems
- Site scans of the (then) current system
- Multiple rounds of user research sessions examining contributors using the (then) current system
- Affinity Mapping with user research results
- Mood mapping with user research results
- 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 common user issues and pain points
- Understand current user workflow, processes, and how the system could be streamlined to meet their needs
- Understand accessibility issues and how those can be remediated in the new system
- Find opportunities to help users become more self sufficient in the system and lighten the load of newsroom support staff
- Check-in with users to ensure that their views are heard and to open the door for communication on the project
Competitive Analysis
Scanned CMS and government sites across the world trying to understand:
- Relevant content
- Filters and search
- Accessibility concerns
- How users like to see their government news
- User flow
- Common features that also exist in Newsroom
- Features that do not currently exist in Newsroom
- Use of stylistic elements (colour, text, buttons, etc.)
- Navigation and layout
- Use of multi-lingual plugins
User Survey
Before starting initial interviews, I engaged Newsroom contribution users of the old platform. I briefed them on the Newsroom revitalization project, and encouraged them to participate in a short eight question survey trying to understand how they felt about the previous system, areas that could be improved, and gauged their interest in participating in one-on-one user interviews.
INTERVIEWS
Users of all abilities and knowledge of Newsroom were interviewed over the course of our research and gathering stage. User interviews were broken down into three separate phases.
Phase 1 – Introductory and Discovery
In this stage users were walked through the current newsroom contribution system to understand user habits, user flow, and discover how the system could improve. Results were detailed through affinity mapping, proposed new site map, and low-fidelity wireframes.
Site Mapping
As you can see, the old sitemap was much larger making it harder to navigate and quickly find needed information. There was a lot of repetition and unnecessary functions that caused user confusion. The new sitemap is cleaner, has a more streamlined user flow, and gives users all the information they need right up front.
Affinity Mapping
Phase 2 – Low-Fidelity Mockup Testing
After compiling data from the first round of testing, I created a series of low-fidelity mockups to address the needs of users and to improve their user experience. I then tested these mockups with users to test the assumptions learned, confirm user flow, and test new elements and functionality.
Phase 3 – High-Fidelity Mockup and Confirmation Testing
Combining everything learned from the first two rounds of user testing, I created a set of high-fidelity prototypes to test functionality, new elements, design, style, and flow and to confirm the product would be useful and beneficial to users.
RESULTS
The new CMS contribution platform has significantly increased user productivity and decreased time and effort in creating news items. Having the ability to create a French and English releases simultaneously and eliminating the need to tie releases together, has increased user satisfaction and eradicated unnecessary user steps. The previous system recorded that it took fifteen minutes to create a release while the new system records a two minute average timeframe to create a release drastically increasing productivity.
Creating a personal CMS system allows the product to be a slim, and flexible tool that caters exclusively to user needs while offering a chance for it to grow in the future.