Intro

At NBCUniversal/E! News we used and maintained an internal Content Management System. The upside is the CMS can be made flexible to accommodate all of your team’s needs. The downside is without constant maintenance and team turnover it can turn into a Frankenstein software that does a variety of things but none of them well. Sage, our old CMS, was FrakE!nstE!in’s monster...

We began a rebuild of our CMS to support our redesigned, responsive website with the goal of providing a flexible product. NEON allows for infinite flexibility, with easy to build and customizable layouts that pull in all content types.

Note: NEON is an ongoing project with the long term goal to be used internally for all NBCUniversal brands. This case study will focus on one of the first major projects, which was creating and maintaining landing pages.

My Role

  • Lead Designer - Defined all user experience design, functional specs, user testing, maintain design system, supervising other jr designers

  • Partial Product Owner - Acting as main liaison to the tech team and stakeholders, making product calls

Challenge

For NEON to be successful we needed optimize editorial’s workflow with a product that would be easy to learn. The workflow in Sage for creating new pages was wasting editor’s time and adding extra clicks.

They have repeat steps in Create CCT, Create Widget and Create area multiple times on most pages.

They have repeat steps in Create CCT, Create Widget and Create area multiple times on most pages.

Shadowing editors helped me understand their daily workflow better and the pain points, illustrated in the below journey map.

Design Sprint

For major product challenges, E! we would bring cross functional teams together for week-long design sprints with expectations to deliver a working prototype for our solution.

In a sprint focused on widgets (tools used to put content on landing pages) , we hypothesized editors do not care about things like CCTs or adjusting the number of content items in a widget, what they want is the ability to move widgets to any place on the page.

To test this hypothesis I created a low fidelity prototype with grey boxes. In testing sessions editors liked the direction and we now had a starting point for the product.

View Original Prototype Here

Screenshots from the original prototype to test our theory on what editors want when it comes to flexibility.

Designing a Simpler Workflow

The sprint gave us a chance to validate an idea, the next step was turning that idea into a product. Revisiting the journey map it was clear that the bulk of the work was done in the middle steps.

Journey Map Style - Eliminated Steps.png

As the chart above shows we could simplify things by not having certain steps done separately. I created and proposed a new user flow of an optimized workflow that would reduce clicks by around half.

Share Templates Not Widgets

The first iteration of the page builder focused on making building widgets easy and shareable. By building the same flexibility of Sage we were only solving one problem for editors because they rarely reuse widgets on other pages.

We realized what editors need is a uniform design on most landing pages. We shifted focus from sharable widgets to sharable templates using our best UX practices that can be used on any landing pages.

After the first build, we had our editors play around with NEON to learn the product and build their own landing pages. We user tested their favorite landing page templates. Through this process we were able to come up with templates we would use for launch.

Keep Actions All In One Place

A goal was to allow for all actions to be taken with minimal page changes. Through iterations and prototyping we were able to put the actions taken into buckets and figure out what is essential. This determined how we laid the product on our grid.

  1. Essential widget actions

  2. Managing the layout

  3. Advanced features for special use cases (sponsorship)

Flexibility and Usability

We wanted to emphasize was dragability as it is intuitive and popular aspect of Sage. NEON provides editors the flexibility to drag the order of content or the widgets. We also allow the editors to change the appearance of any widget by selecting from the dropdown, allowing for easy internal A/B testing. In general I wanted to keep every step of this product as repetitive as possible so the only thing editors need to think about is what content they are curating.

Annotated Widget Management Page.png

Style guide

Our design team is lean. As this is an ongoing project we needed to document all UI components into a design system to speed up future creation of comps and wires as we continue to build NEON.

The color palette we chose uses a lot of blue and cool colors, to try and create a calm experience for our users. We selected open sans for our font family to match up with our actual website.

Outcomes

To recap what we delivered: we created a product that eliminated several steps making widget creation easy and repetitive that focuses on drag and drop functionality as much as possible. We created shared layouts that can be used in US and international editions.

Is it fast?

  • We reduced the number of clicks for creating a landing page up to 40

  • Time to live publishing is instant

Is it easy to learn?

  • NEON training has required 50% less time for training sessions than Sage

Is it flexible?

  • Almost too flexible, can create a nearly infinite number of landing pages

  • If I could do the project again, would put more eggs into the live preview basket vs unlimited flexibility