Edition Builder

Background

The Times and The Sunday Times had a sub-standard dated CMS tool that Editors (people who put the daily editions together) used to build the digital newspaper.

The CMS was difficult to maintain or improve due to limited resources and the system being complex. In addition, the process to produce an edition and usability of the CMS were not optimal for its users, causing avoidable time and effort to do daily tasks.

Objectives

Understand user pain points with existing CMS tool; what causes frustration for the editors?

Identify areas of opportunity, understand what would help editors improve and speed up their process

Design a solution that improves time to build an edition (time on task), whilst providing an intuitive usable tool that brings delight to editors helping them in their edition building tasks

Research

Initial research by another UX contractor had started before my involvement. They had begun with some stakeholder interviews and rough ideation. After they left, I analysed the existing research to gain perspective of the problems at hand.

After a kick-off with the product owner to understand the project objectives, I began my research. First, I conducted a contextual enquiry, namely stakeholder interviews (with Editors and the Product Owner) and observed them using the existing CMS. As a result, I gained a deeper understanding of the Editor's behaviours as they conducted their edition building activities and learned how they would want to perform their tasks to speed up their processes.

Screen grab of the old CMS

Ideation

Very early in the contextual inquiry, it was clear that the immediate need for Editors and the business was to design a more efficient tool that streamlined their process. So I began looking at the core areas of frustration. I focussed my sketches on improving the tasks of finding/displaying available articles and populating/building editions with them.

Editors communicated a desire to drag and drop articles into place and freely move content around, allowing them to build and visualise the most optimal edition easily.

Sketches addressing populating an edition

Sketches looking at edition scheduling

Early prototype

Continuous communication with a core set of Editors gave us valuable insight into their needs. So we needed to test with them regularly to validate concepts and ultimately arrive at a solution that solved their problems.

I wanted to understand if their needs of populating an edition were satisfied and observe if the initial prototype matched their mental models.

Basic task flow for building an edition

Wireframes of edition building and preview screens

Early prototype testing

Insights

Search and filtering article features were not intuitive or helpful to testers both from a technical and usability perspective. The solution was somewhat restricted technically (I won't attempt to explain why). Still, the back end technology for scanning and finding articles wasn't performing as an Editor would need to do their job satisfactorily. Essentially it wasn't smart or fast enough and thus impeded the Editor from doing their job promptly.

Editors also stated parts of the interface needed optimising to improve usability, such as the article results drawer. A large portion of participants stated they wanted more article tiles displayed above the fold for quicker visibility and to minimise scrolling. The image below shows the before and after solutions.

Article results were minimised allowing more tiles to display above the fold

The early prototype only provided a preview feature at the parent edition level, not the child section level. Editors stated they needed the option to preview their sections to evaluate the impact of how they'd formatted them, allowing them to determine whether they had curated the most impactful arrangement of news stories. So I added a preview button at the section level.

Previewing a section feature

Progressing the UI

Whilst addressing problems identified in the research phase, I continued researching and conceptualising the user interface. Though the main objective was to create an intuitive, streamlined CMS, I wanted to deliver a more on-trend best-in-class solution that was as equally pleasing to look at as it was to use.

I progressed from wireframes to high fidelity designs gradually and continually validated concepts with Editors throughout the process.

Initial prototype (not created by myself)

The initial prototype above gave some helpful insight, specifically on usability and layout issues.

Editors felt it made more sense and would be easier to scan if the larger edition preview was on the left and article results (that they would build the edition with) was on the right.

CTA affordance for adding sections and slices didn't feel optimal and were difficult for editors to see and click. Buttons and links needed to be more prominent, helping Editors move through their process quickly.

Early wireframe addressing layout and more prominent CTAs

Iterated wireframe following prototype testing

High fidelity initial design concept

The final design progressed to a cleaner on trend UI direction

"I'd say I'm building an edition five times faster than I used to, it's a lot more simple to use"

- Editor

Final designs

After many workshops and reviews with the Product Owner and Engineers and usability tests with Editors, I arrived at a design that satisfied all stakeholders. The solution had progressed from a dated and complex tool to what Editors described as "impressive" and "far faster" to use.

The following are some of the key screens in the CMS.

The Times and the sunday times EDITION BUILDER