Contentstack Case Study Hero Image

Contentstack

Improving the user experience of an enterprise CMS

The Project

Role
Project Design Lead
Task
  1. Web Application
Timeline
2019 - 2020
Engagement
Contract

The Company

Overview

Contentstack develops cloud-based content management system intended to power omnichannel content.

Size

100+ Employees

Industry

CMS, SaaS

Type

B2B

Introduction

Contentstack is an enterprise, headless CMS, with clients including Airbnb, Shell, McDonalds, Chase, Cisco, and more. While the backend functionality for storing, sorting, searching, and serving information worked well, the user experience of the Contentstack web application was lacking in several areas. I was contacted by Rose Digital - a digital agency that was working with Contentstack, conducting user research interviews - in late 2019 to help improve the UX and UI of the web application.



Previous UX/UI

When examining the experience that existed when I joined the project, there was a lot of room for improvement. The interface had an inconsistent visual hierarchy, scattered user flows, confusing usage of color, and didn't utilize available screen space efficiently. All of these factors contributed to making the experience un-necessarily complex. Users had the same sentiments. One user who Rose Digital interviewed stated that, "It definitely looks like a tool you would use at work. It’s lacking some elegance".

Previous Contentstack UI - Content Types
Previous Contentstack UI - Content Types
Previous Contentstack UI - Add New Entry
Previous Contentstack UI - Add New Entry

Here’s an example of a poorly designed interface. You don’t get any details about the assets.

Tony Sleva

on previous Contentstack UI
Previous Contentstack UI - Content Editor
Previous Contentstack UI - Content Editor
Previous Contentstack UI - Calendar Picker
Previous Contentstack UI - Calendar Picker

Wireframes

I started the redesign with mid-fidelity wireframes. Low-fidelity wireframes certainly have their place in the product design process, but when a client either has already worked with product designers, and/or has a focused vision of what they wish the redesign to include, I've found that mid-fidelity wireframes are a suitable starting point.



Concept #1

The first series of wireframes featured the concept of dividing up sections of the application into "Create", "Organize", and "Publish". The concept was to simplify the CMS experience. This approach was particularly aimed at content managers, who had reported that using the exisiting UI was difficult as it required intervention by engineers. This concept meant that different roles could focus on different tabs within the application, creating a centralized "hub" of sorts.

While the simplicity was appreciated by some of the Contentstack team, this approach was ultimately not deemed sufficient enough to accommodate the various tasks that most users required of the application.

Contentstack UI
Concept #1 - Create Tab
Contentstack UI
Concept #1 - Organize Tab
Contentstack UI
Concept #1 - Publish Tab
Concept #2

The client wanted to see how a new customer experience might feel, so I mocked up a series of wireframes demonstrating an onboarding flow.

Contentstack UI
Contentstack UI
Contentstack UI
Contentstack UI
Contentstack UI
Contentstack UI
Contentstack UI
Contentstack UI
Concept #3

The third series of wireframes explored the concept of restructuring the navigation of the exisiting application to better accommodate user workflows. This idea built upon some of the positive attributes that the current application had - notably a structure that was clearly divided up into certain pages. When working on this concept, the redesigned navigation would allow for a better understanding by users where functionality was located, as well as provide for a UI element that could be expanded to show additional information, and hidden when power users needed more screen real estate to complete tasks.

Contentstack UI
Contentstack UI
Contentstack UI

UI

Once the general concepts had been established in the wireframes and approved by the client, it was time to refine the concepts into the final UI.

Contentstack UI
New Contentstack UI - Organization Stacks
Contentstack UI
New Contentstack UI - Stacks Dashboard (Expanded Side Navigation)
Contentstack UI
New Contentstack UI - Stacks Dashboard (Collapsed Side Navigation)
Contentstack UI
New Contentstack UI - Entries (Default View)
Contentstack UI
New Contentstack UI - Entries (Multiple Rows Selected)
Contentstack UI
New Contentstack UI - Entries (Quick Editor Slide-Over)
Contentstack UI
New Contentstack UI - Entry Editor (Full-Screen)
Contentstack UI
New Contentstack UI - Entry Editor (Full-Screen, Simple Mode)
Contentstack UI
New Contentstack UI - Assets
Contentstack UI
New Contentstack UI - Tasks
Contentstack UI
New Contentstack UI - Content Models
Contentstack UI
New Contentstack UI - Settings
Contentstack UI
Search Interaction States
Contentstack UI
Additional Search Interaction States

The new UI is a game changer for enterprise software, bringing simplicity and elegance to content management. The focus on productivity means a streamlined editing experience with more space for content, fewer clicks in the editorial process and faster discovery of content.

Matthew Baier

COO, Contentstack

Presentation

A mentor once told me, "presenting design work should feel like having a meal at a Michelin Star restaurant - the quality of the food is important, but so is the presentation of it. Think of the small portions on an oversized plate and the impact that has on the feeling of the dish presented." That idea has stuck with me over the years, and I strive to present the final product design work in a way that is impactful, highlighting the work while not showing too much in any one image.

Contentstack UI
Side Navbar UI Details
Contentstack UI
Full Screen Editor UI Details
Contentstack UI
Assets UI Details
Contentstack UI
Asset Card Interaction States
Contentstack UI
Tasks UI Details
Contentstack UI
Dashboard UI Details
Contentstack UI
Side Navbar Grid - Collapsed and Expanded
Contentstack UI
Icons - 12px Grid Size
Contentstack UI
Icons - 16px Grid Size

Like what I did for Contentstack?

Get in touch and let's
discuss working together.