What were the problems?

The CMS was created with little or no editorial or UX input. As more features were added, more and more pain points were created for users. Adding a new template into the system was a problem because it wasn’t scaleable. There were many issues with images and galleries, but the primary issue for me was that the content was not separate from presentation.

  • What can we do to streamline the editors' workflow?
  • How can we make the CMS scalable?

Bauer Xcel Media

  • My role - Design, UX
  • Tools - Coda, Balsamiq
  • Platforms - Jira, Realtime Board

What was the approach?

Competitive Analysis / Benchmarking

There were two significant parts of the CMS redesign - posts and how images and galleries were managed

I am familiar with WordPress but wanted to get a deeper insight into other commercially available CMSs so I did a competitive analysis.

User Interviews

The next step was to interview the editors and writers who use the CMS all day every day. We needed to know how they used it, what the pain points were, what features might they like, were there features they never used, etc. Interviews were conducted with senior editors who were used to the foibles of the CMS, new writers with experience using other CMSs, social media editors who may use the CMS as an extension of their work.

Contextual Analysis

I observed the users as they created content - how they entered body copy, SEO-friendly urls, photo uploads, etc. They were asked to walk us through the process as if they were teaching us how to use it.

Planning

I created user journey maps to sequence the steps editors used in the current CMS. This qualitative data indicated several tasks requiring multiple steps that could be easily simplified.

Before diving into the wireframes, I needed to do an analysis of these learnings: What were the problems, what are solutions to those problems, what are the user benefits.

Teamed up with Product and Development to prioritize high impact / low effort features and the path going forward.

Wireframing and Hi-Fi Mocks

I created Hi-Fi mockups of the parts of the CMS that were being modified. Mockups were created to match up with the development process from simple changes and critical improvements through and up to new post types for news and recipe schema.

I created wireframes for the new image and gallery management. Wireframes included new user flows on article posts, galleries, and admin screens.

What were the learnings or compromises?

  • The accrual of many small features from stakeholders requests can, over time, turn into an unholy mess.
  • The users had cheat sheets of shortcuts and workarounds, and yet, most felt the CMS worked well.
  • Different users had different cheat sheets and workarounds, so some users didn't have the knowledge and may have missed recirc or SEO opportunities.
  • Great communication between Product and Development teams is essential.