Redesigned CMS UI Easy = better?


The challenge

As a designer, staring at the current tool for CMS and version control, it hurt me. I cringed multiple times a day when using this tool to make edits to Spiceworks community pages. It was time to redesign and streamline this tool for other users (and myself!).


The solution

The CMS panel needed to look in line with the rest of the community's exisiting UI. It needed to stay at the bottom to maintain consistent position, so I re-organized buttons, added white space and put some thought into making the experience more useful.

Project Stats

  • Project Timeline
  • 1-2 days
  • Benefit of Redesign
  • Easier to digest
  • Less confusion
  • More win

Spiceworks Community CMS tool

Current version

Current Draft
1
2
3
4
5

This panel displays everything from versioning control, publish status and tools to edit the page. Overall, there's a lot of UI happening here but not awhole lot of UX. Let's break down some of the problematic spots:

  1. Now Viewing Dropdown — By default, when you get to a page it's automatically converted into a draft version, even if you didn't make any edits. That in and of itself is very confusing.
  2. Regions Button — This is technically a button to toggle the region states from hidden to visible. With it being inline with two other buttons, it's hard to tell if you've turn the regions or off.
  3. Layout Dropdown — There are three different pre-set layouts for a page, this dropdown allows you to select that. The location of this isn't problematic, it's that it would make more sense with "CSS/JS" as that is also a layout tool.
  4. Publish Status What's the difference between an "unpublished draft" versus a "draft" like in #1? That's awfully confusing.
  5. Buttons — Going back to the default draft state, so am I making my non-changes the live version? Also, the semantics in the blue button are a bit confusing. If the action I'm going to take is to hide the page, that must be mean that it's already public and published right?

Proposed Redesign

stacked

Public View — Small cues in the small green type with the green circle indicate that the page is live. The other indication of it's page status is located on the right hand side underneath the greyed out "publish" button.

Layout Controls ‐ All the layout controls are now conveniently located on the left hand side all in one row clearly separated from the revision history now on the right hand side.

Regions

Regions Toggle — When clicking on regions to activate the show hidden regions, the button fills in with grey and the text changes to "close". This creates a definiite state of whether or not the regions are activated or not.

stacked

Publish Status — Quickly at-a-glance, you're able to see that this page is hidden and in a draft by the indicators on the right and also in the upper left with the red text.