Drag the slider to compare.
CMSRedesign
Redesigning a legacy CMS for Hearst Magazines' 50+ media brands.
Project Snapshot
👀
The Challenge
Editors at Hearst Magazines were using an old CMS that resembled a complex form with many fields that buried the main article content. Content displayed as embed codes instead of visually, which was a pain to view/edit.
🎉
The Result
The new CMS successfully launched across 200+ sites. It's visual interface increased content creation efficiency by 60% eliminating the need for separate preview tabs and user satisfaction was significantly raised to 85%.
I led a complete redesign using a design thinking approach, moving from user interviews to high-fidelity prototyping, to create a "What You See Is What You Get" (WYSIWYG) experience. I was the lead product designer and I worked with product & engineering teams, stakeholders, and at times with a researcher and 2 junior designers.
The Problem
Context: Prior to the redesign, the CMS treated article creation like a data entry task. Editors had to fill out long forms with obsolete fields and they could not see how their content would look without opening a separate browser tab to preview it. This and much more were discovered through research and user interviews.
👎
Identified Friction
Media (images/video) appeared as embed codes and not visually. This created an extra step of opening an additional browser tab to preview how the content would look.
😠
Business Impact
The lack of visual content and fragmented workflows (switching and refreshing tabs) slowed down daily operations for editorial teams across the company's 50+ brands.
The Solution
Design Strategy: The paradigm shifted from filling out a form, to visually editing the final product. The goal was to mirror the front-end reader experience as closely as possible within the editor.
🔥
WYSIWYG Editing
Embed codes were replaced with real-time rendering. Editors now work directly on the page canvas and see images/videos and brand styling exactly as they will appear to readers.
👍
Contextual Tooling
Formatting tools were moved from a fixed top bar to a contextual menu that appears only when text is highlighted. Global settings (SEO, tags) were consolidated into a collapsible side panel to maximize writing space.
The new CMS offers a visual, intuitive editing experience. You can easily see all article content and use the toolbar to edit, rearrange elements on the page, and explore other features.
The right side of the screen is the writing area. For a more expansive writing view, the side panel on the left can be closed.
Text formatting is accomplished by highlighting the desired text, which will then activate a toolbar containing various formatting options.
The new CMS is responsive and works on all devices.
Add images and other content by clicking the plus button in any empty area, or by typing a forward slash. This streamlined design keeps block options readily available, supports future block types, and is fully keyboard accessible.
Enhanced search results are now viewable in either a list or grid format. The search filters have been refined based on editor feedback. Instead of using tabs for uploading and searching, everything is here in one view.
Easily experiment with different header layouts and images, with instant previews.
Achievements & Outcomes
🚀
Scale
Successfully deployed to 200+ sites, supporting a massive volume of daily content creation at 50+ major media brands.
👀
Efficiency
Increased content creation efficiency by 60% eliminating the need for separate preview tabs, which reduced the time-on-task for layout adjustments.
😎
User Sentiment
Feedback confirmed that the new visual interface of the CMS significantly raised user satisfaction for content teams. User satisfaction was raised from 40% to 85% for this new CMS.
🎉
Team Wins
Gained the trust of the editors and stakeholders by building features they need and requested. Established a comprehensive design system which ensured UI consistency across current and future features.
Retrospective
What I Learned: Beyond the design itself, bridging the gap between design and engineering was critical. I reviewed the engineers' work in GitHub to ensure the final build matched the Figma prototypes and components. This close collaboration was essential as the product scaled. I also learned how important research and testing are so the right product is built for the right audience.