Hugues Belaib
UX designer
Made with

La Presse's Story Builder

A comprehensive suite of publishing tools for editors and journalists

Introduction

The overall project revolved around :

  • Designing and developing the new in-house Content Management System (CMS), editors and journalists use to publish 150+ articles on our various platforms (web, mobile & tablet application).

  • Unifying two major workflows (tablet and Mobile/web) into one.

  • The target audience was mainly editors and journalists.

  • Our short-term objective was to support the launch of the mobile application through the implementation of the new CMS, and our mid-term objective to deprecate the old CMS.

  • I was Product designer within a team of 8, one business analyst, one QA and 6 back-end developers.


Company: La Presse

Role: Product Designer

Timeline: Oct. 2017-current

Definition of Done : As this is a continuous improvement process, for this phase, the major objective we will cover in this presentation was to unify the whole news production under one CMS.

My contribution in this project :

- Gather users feedback to determine potential opportunities

- Participate in the analysis of features that should be developed

- Elaborate viable design solutions

- Produce wireframes and high-fidelity mockups of those solutions

- Perform QA design duties to ensure quality of the implemented solutions

- User test every deliveries we made.

- Build a cookie-cutter UI Kit with design components used in our backend tools and services. 

- Constantly evangelize everyone at the company about our role as Product Designer.

The best solution starts by pinpointing the real problem.

1. Starting from the ground up.

As the Minimum Viable Product (MVP) of the new CMS had already been launched when I joined the team, my role was to figure out the right features to add in order to streamline publishing operations for two platforms, namely La Presse Mobile and Lapresse.ca.

Having absolutely no contact whatsoever with users of this product prior to joining the team, I got introduced to them by their team lead, and quickly decided to dive head first into their world by spending several weeks in shadowing (observation) to get as much context as possible, learn their craft and get a good feel of what their day to day was about.

After this, I and my fellow Business analyst reviewed all the notes I took while observing editors working day in and day out. We built a deck and shared the results with our developers, and all stakeholders to get everyone on board and to incite them to empathize with our users.

We then converted this feedback into potential features, then refined them over the following weeks during several meetings with every stakeholder to get the best compromise for the business, the users, and the technology.

Observation session with editors

Observation session with editors

Sample of notes taken during observation

Sample of notes taken during observation

Key findings of this research phase

- Editors want of course something easy to use, but more importantly something that works, each and every-time. Trust in the system was still questionable.

- Most of them were accustomed to the old CMS and expecting to have the same features in the same way.

- Speed and number of actions required to perform a task was a top priority. Publishing breaking news requires every second you can save.

2. Team synergy

Arriving in a new team isn't always as smooth and as easy as it looks. Filling the shoes of two designers (one UI and one UX) is a big responsability. My secret weapon is humour and communication to weave new relationships with developers and stakeholders alike.

As much as solving problems for users is one hell of a challenge, communicating with developers and creating a synergy between developers, QA, and analyst cannot be taken for granted.

Through stand-ups, I decided to maximize visibility of user needs and overall feedback to developers in order to influence them to empathize about users, and quickly gain trust amongst them.

Over the following months, we made sure that every developer participated in one way or another to the design process by organizing ad-hoc workshop session, but also by constantly communicating with them on a daily basis. This ensured that we eliminated any blind spots we might have.

I cannot stress enough on how important teamwork is, as cliché as it sounds. Best solutions always come from stellar communication and collaboration with everyone, not only users.

Sample from our UI kit built specifically to standardize components for a cohesive experience thorough every backend tool.

Sample from our UI kit built specifically to standardize components for a cohesive experience thorough every backend tool.

La Presse's Story Builder
Story editor, allowing editors to edit and publish news.

Story editor, allowing editors to edit and publish news.

3. Exponential growth

Over the last 3 years, we failed several times with our solutions, sometimes we didn't meet expectations entirely, sometimes another feature was deprecated by a new one, falling short of fulfilling ones' need. However, working in Kanban and deploying 3 to 5 stories daily, really helped us patching issues and/or adding to an existing feature to fix those failures. 

Release after release, we closed the gap between the old CMS capabilities and the new one.

After a year of continuous delivery, we finally succeeded to fully replace the old CMS so that editors were able to use only one system to publish around 150+ news on Mobile and Web platforms.

Our constant drive to bring them value and solve their issues paid off, their feedback was excellent. 

4. Last but not least

Happy with this tremendous success, there was still a lot of improvement and features to develop.

For instance, we decided to tackle another major pain point which was the way journalist submitted their copy to editors. In order to streamline the end-to-end process from journalist to the reader, we had to find a way to replace the good old email to send their copy for publishing.

We opted to use the tools we developed for editors and adapt them to create a form for journalist, so instead of writing their copy in Outlook, they would type it directly in the same CMS editors use to publish news, greatly reducing the margin for errors, streamlining the publishing process, and providing a cohesive user experience amongst different roles.

This time, considering all the factors in play, we decided that going straight into ideation and development was the best solution. This feature was kind of a huge deal in terms of change management, as for a variety of reasons, journalists were not all inclined to change their way of doing things.

Thus, we coordinated with their management to have a minimum viable feature from end to end, then onboard journalists through one-on-one training sessions conducted by a couple of their managers.

So far, the adoption is ongoing as of winter 2019-2020. Feedback is very good, despite a few core users not willing to take the boat yet.

Acceptation tests with all stakeholders.

Acceptation tests with all stakeholders.

Takeaways

In this project, I particularly learned that :

  • Rally people around the same vision of the user experience. At first I probably didn't conducted enough workshops or attended enough meetings to get enough context. Fixing that helped me tremendously to make better decisions and own the user experience.

  • Always do more to refine every iteration, whether it involves doing surveys post-deployment, gathering slack feedback, attending users' training sessions on new back-end tools you designed, touchpoint with stakeholders. The more you know your users and their reactions, feelings, context of use, the better will be your solutions, fixes, or improvements. 

  • Know your users, do whatever it takes to get to know their mental model, their feelings, their motivations and their pain.