Nordstrom's content management system (CMS) relied on a single, legacy component to render nearly all marketing content. It was 9+ years old, overloaded with features and 6,000+ lines of code, much of it for features that were no longer supported. There was no equivalent component for iOS or Android, so app teams were forced to translate and render from the HTML/CSS.
I led design for an editorial design system to replace this legacy component, and I defined the structured content model that provides the data the components render.
My primary responsibilities included:
We didn't have time to create unique components for each type of page served by the CMS, which included the homepage, campaign landing pages, service & support pages, and embedded content in search results.
To maximize flexibility, I designed a set of cards and container components that could be combined in different ways to meet the broad range of marketing and customer needs.
All components are responsive. Cards use standard aspect ratios and dynamically crop imagery, making a single asset render correctly on any platform or layout. This has reduced the number of unique assets/crops manually created by the Creative team down from 4+ assets per placement to 1.
I created a Figma library for the Creative Marketing team to use, which accurately reflects the composition and responsive behavior of all editorial components.
Editorial content needed a wider range of visual treatments than the standard brand theming provided by Nordstrom's core design tokens. Requirements from the Nordstrom and Nordstrom Rack brand teams, the CMS team, and Web/iOS/Android teams were tricky to balance and, at times, contradictory.
The CMS team was trying to migrate away from passing visual styling data along with content and rendering teams needed a stable contract. Brand & marketing teams wanted to theme a piece of content differently depending where it was placed, but the CMS team was optimizing for content to be placed dynamically with minimal manual control.
A challenge was that the same piece of content can be rendered in multiple locations, so rather than attach a theme to a piece of content itself, I tied theming to the container. A theme rotates through a curated set of colors, applied to each card in order. Each card is themed individually while the group stays cohesive. The CMS passes only the theme name, and the Web, iOS, and Android clients resolve it to the underlying tokens — keeping visual styling out of the content model.
The CMS shifted to a headless implementation, decoupling content from visual rendering. It would no longer directly tell the front-end how to display content. This meant every component now had to maintain an explicit mapping to the API's data schema.
I defined the mapping for every component, creating a shared reference for design, engineering, and content teams. It described which content fields populate each element of a component, and how that differed across content types (such as Promotion, Merchandising Story, Service, Department, etc.).
Leading up to the launch of the new CMS, the marketing team migrated 220+ pages onto the new components in 6 weeks. The average time to produce content for a marketing campaign was reduced by 50% (from 19 hours to 9).
Editorial and marketing content across the Nordstrom and Nordstrom Rack websites, iOS apps, and Android apps is now aligned to the same components. Themes and composability provide flexibility to serve distinct brand identities, creative expression, and customer experiences. All of this is efficiently managed from a central, headless CMS.
