Jeremy Siwik

CMS

Evolving a no-code design platform for usability, smoother workflows, and external adoption

CMS ConceptCMS Hero

abstract

Transforming an internal tool into a product ready for external adoption.

My Contribution

  • Created a design concept to guide development
  • Provided high fidelity designs for tickets and contributed PRs
  • Managed dev roadmap using user feedback to steer feature prioritization

Outcome

Took a manual, time-intensive process taking ~20 hours down to ~2, along with added features for improved consistency, reliability, and collaboration.

Role: Design Lead

Functions: UI/UX, Product Management, Development

Challenge

As the company pivoted from a consumer-facing publication to a B2B model, we needed to evolve an internal tool into a platform usable by external organizations.

The tool's strength was its quality of output; its weakness was inefficiency.

Goal

Refine the tool's core workflow for creating interactive articles.

If initially we had a manual, time-intensive editor, we were trying to create a printing press.

Pitch

The selling point to publications was an improved article experience for readers with demonstrated longer engagement times - at the expense of a greater time investment for designing and publishing.

The redesign aimed to tilt this balance in favor of publishers.

Starting With a UX Diagnostic, Three Focuses Surfaced:

Initial Input

Though articles were constructed of a series of similar text objects, visuals, and pages, each item had to be individually input and configured from scratch.

Opportunity for automation here.

Positioning and Styling

Due to a lack of positioning options some designs were impossible to render, and a lack of of configurable “styles” presets slowed down designing.

As well, UX inefficiencies slowed down navigating between objects in the editor.

Iterating

Without native support iterating was time-intensive, and often led to users using other tools like Figma first.

Not needing a fully-flexible design tool, we had to create a custom concept for iterating.
Empty CMS Interface

Stories empty upon creation, meaning each page, text box, image, shape, etc. all had to be individually added and configured from scratch.


This alone took practiced users 30-45 minutes just to input content, prior to any real design of the pages or items themselves.

User Interviews to Supplement our Understanding

Adding to the above UX review, interviews surfaced a critical additional persona the tool wasn’t designed for: editors.

Designers

The primary cohort of users were those designing the articles, ranging from social media producers to digitally-native journalists. Most had experience creating visual assets, but less-likely responsive webpages.

Time-constrained, they prioritized efficiency and had a high bar for quickly producing designs adherent to style guides.

Editors

Editors needed a dedicated writing experience to more quickly revise articles, without needing to navigate or interfere with designs and layouts.

They asked for a new interface for easily updating text and swapping assets.

Defining Priorities for the Redesign:

  1. Automate the initial input UX
  2. Design a scheme to help users intuit how objects would behave responsively across changing screen sizes
  3. Establish a component system for both speed and consistency across outputs
  4. Create a new UX dedicated to editors

Surveying other design tools while interviewing designers, producers, and editors across newsrooms, we began mapping an updated UX...

Clustered ideas to loosely organized site maps to detailed hierarchical feature lists and user flows.

Artifact 1 - Early workshop insights

...and produced the following north star for development:

CMS Layers Interface

An updated stage for seamless designing.


Users can view and edit multiple pages simultaneously, and critically adjust screen sizes to test how designs would respond on live pages from within the editor.

Continuing to engage with test-users, we entered a development phase and my responsibilities became:

Managing a Roadmap

Reflexively steering development with feedback from users to prioritize tickets.

Providing Acute Designs

Breaking down features into individual tickets with production-ready designs for smooth engineering handoff.

Contributing PRs

Contributing to frontend polish, building small features, and enabling engineers to tackle bigger updates.

Along the way, we ran prototypes with publications including Stanford Medicine Magazine, The Conversation, BCG, and NPR. After implementing AI to aid in the upfront allocation of content across pages, we put together polished articles in as little as two hours, with initial layouts in minutes.

impact

Total article creation time: ~20 hours → ~2 hours

Clicks required for preliminary input: a repetitive hundreds → dozens

Reduced potential for errant and/or unresponsive designs while increasing brand consistency across articles and outputs with respect to styles and layouts, via componentization.

New interface dedicated to writers and editors streamlining their workflows.