Teams Involved: Product, Development, Marketing, Content Strategy, Brand
Background/Summary
My first experience developing a design system for a CMS occurred while I was employed at Overstock, a large company with extensive development, marketing, and UX design teams. There was an existing CMS that presented numerous challenges and caused tension between departments. Product teams conducted a/b tests that resulted in new page templates initially appearing promising for implementation, only to encounter issues when scaled for broader use. From a marketing perspective, the approved designs initially looked great, making the subsequent failure on the site across various pages perplexing. On the other hand, the UX team attributed the problem to poor visual design—each team pointing fingers at the other.
Upon transitioning to a full-time role in UX, I was tasked with addressing this issue. With a unique perspective gained from exposure to both sides of the problem, I set out to reframe it. After many discovery sessions with various teams, it became clear that there was a lack of a CMS design system and product strategy. The CMS tool itself had never had a designer or product manager. It was a neglected product that needed a new approach.
After leaving Overstock, I went on to successfully do the same thing at Brilliant Earth.
Discovery: External Research
What is a CMS?
A CMS empowers individuals lacking design or development expertise to manage digital content efficiently. It enables seamless editing, uploading, and management of content while maintaining a professional and organized web presence.
CMS Options: Choosing between licensing or developing your own.
• Traditional CMS Platforms: These platforms offer easy-to-use systems with pre-structured design templates, such as Squarespace, WIX, and WordPress.
• Custom CMS (homegrown): Internal development of CMS involves significant effort and talent but offers flexibility and customization. Examples include Facebook and Instagram.
• Headless/Hybrid CMS Platforms: These prioritize internal user-friendliness but lack well-designed WYSIWYG templates. Notable companies include Content Stack, Workfront, and Builder IO.
Examples of CMS Companies
Problem Statement
How might we identify the correct CMS approach and UX design strategy to ensure that teams can collaborate in a scalable manner?
Continued Discovery & Strategy Alignment • Business
At Overstock, I worked very closely with my product manager to interview stakeholders and delve deeper into our problem, uncovering that our homegrown CMS was the source. We conducted further analysis of operational costs and met with CMS vendors to price out one that would better suit our needs, without requiring us to reinvent the wheel with a custom solution. After much consideration, we decided to opt for a headless CMS and presented our case to leadership, gaining buy-in. However, this was just one aspect of the issue, and a headless CMS alone would not ensure success without a design system.
At Brilliant Earth, the scenario differed slightly. They had already selected a new and headless CMS (coincidentally, without knowing it was the best option for them as well), but were unaware that they would also need a resource to develop a scalable design system. Initially, the project was assigned to content teams to "create their own pages," as this CMS offered some out-of-the-box features of a traditional CMS. However, these initial attempts resulted in in-cohesive designs and broken responsive patterns.
CMS Design System • Planning & Prototyping
I then began working closely with teams responsible for content strategy to understand their needs and how to design a system that would accommodate multiple scenarios. One of the greatest challenges with previous systems at both companies was that templates were constructed based on specific types of pages or content. To design a scalable CMS template, the use case needs to be generic and extremely flexible, with numerous optional elements identified to meet various needs. Components must be mix-and-match and agnostic to page types. Content areas should be able to accommodate multiple content scenarios. System design should transcend specific use cases and apply universally across various areas while maintaining page agnosticism. Additionally, create CMS requirements for Development and Internal UI.
Assessment of Page Content RequirementsIterate • UX & DEV Collaboration
At both companies, I then worked closely with development to create a working design system: typography styles, buttons, grids, etc. Our system then came together in various forms of blocks that were fully responsively coded.
UX Design Strategy
Design System DocumentationKey Outcomes
• Reduced operational costs: Streamlined content-to-site processes for faster asset creation and productivity, expediting time-to-market, and reducing revisions.
• Improved UI: Created consistent new patterns to align with with existing site UI and enhanced visual design for improved overall aesthetic.
• Improved brand perception: Created a more cohesive brand image, promoting positive brand perception.
Example of Final CMS Template