Jeremy Siwik

CMS

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

CMS ConceptCMS Hero

brief

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

My Contribution

  • Designed four new UX streams to guide development
  • Provided high fidelity designs for tickets and contributed PRs
  • Used user feedback to steer feature prioritization in the roadmap

Outcome

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

Role:
Design Lead

Functions:
UI/UX, Product Management, Development

Duration:
14 months

Challenge

As the company pivoted 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.

Three main areas for improvement:

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

UX inefficiencies slowed down navigating between objects in the editor and a lack of configurable "styles" slowed down designing.

As well a lack of positioning options meant some designs were impossible to render.

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

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. Time-constrained, they prioritized efficiency and had a high bar for quickly producing designs adherent to style guides.

Most had experience creating visual assets, but less often responsive webpages.

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
  4. Create a new UX dedicated to editors

Surveying other design tools and 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.

This design led development and my tasks shifted to:

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.

outcome

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

Clicks required for initial input: a repetitive hundreds → dozens

Reduced potential for errant and/or unresponsive designs and increased brand consistency via componentization.

New interface dedicated to writers and editors streamlining their workflows.