NPO CMS

Context & challenge

In the NPO CMS, curators can prepare and publish the streaming content for the website NPO Start for the coming days. Curators had to do a lot of busy work to publish content for the right platform and didn’t have a clear insight in what was scheduled for the coming days. so the question was: “Can you improve the workflow for curators in our cms?”

Design process

User research

I investigated the workflow in the old cms; what were the main user flows to add and schedule new content, how could you as a user get an overview of scheduled content. I drafted an interview script and interviewed CMS curators to see their "jobs to be done" in real life and what problems they encountered in achieving their targets. I summarised the issues and prioritised them for the design and development sprints.

Old version of the CMS

Research insights

During the user interviews I learned that curators have no overview of what exactly will be online, because everything is shown in one large table view in the interface. Curators therefore lack control and feedback on what the website will look like in the coming days because there is no visual order and no sense of how the content will look. And they sometimes make mistakes because of that.

There are several platforms where content is published. This includes free/free with login, paid, content specifically for children (and different age groups). Navigating between these platforms when you have to schedule for different platforms is cumbersome in the current system. Also, the labels used for types of content in the cms do not correspond to the terms on the website for the public which can lead to errors.

Visual editing in the new design - curators have a much better insight in what the homepage will look like

Design

I have designed a new workflow and views in the cms for curators that show the cms as a simplified view of the real website with direct manipulation of the content that is published and is planned for publishing. I created a navigation column to let the curator easily navigate between platforms.

I created time oriented navigation to jump between days to see an accurate impression of how the production website will look. I also came up with a solution to show the scheduling of main showcase items on the website.

New design of the edit details page

Prototype & iteration

When the most imported user flows were designed, I created a prototype to let curators experience the new flow and collected feedback from them. I changed the designs of the main workflow and extrapolated to the rest of the screens.

Iteration: design of variations on the basic flows

Agile

As a team, we added features in 9 design and development sprints, from only showing a basic features with spotlight images and a simple list of content rows without images to a full featured visual cms. I wrote user stories and scenarios and made them available on the Gitlab ticket board for developers, linking to the corresponding screens on Figma and back.

Component library and simple design system to improve developer handoff

Result

Thanks to the new CMS design, curator were happy to finally be able to publish and schedule content on various platforms easily. The new CMS reduces the number of planning errors and shortens the work for the curators, allowing them to spend their time more effectively.

Role

UX/UI designer (research, design, prototype, iteration and developer handoff)

Team

Dean Janssen, Michiel Stam, Pim Hopmans and Josien Braas

Client

NPO