Drag the slider to compare.
EcommercePublishingTools
Ecommerce solutions that drive millions in revenue for Hearst Magazines' 200+ sites.
Project Snapshot
👀
The Challenge
Editors previously had to create galleries in a separate tab and embed them into articles, complicating their workflows. Simple edits could take up to 90 seconds due to saving, reloading, and switching between tabs.
🎉
The Result
Integrated gallery creation directly into the article editor, reducing the time for edits to only a few seconds (80% faster) and providing real-time visual feedback, which accelerated content output across 50+ brands.
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 and stakeholders.
The Problem
Context: The current CMS makes gallery creation inefficient and unintuitive. The process requires building galleries in a separate tab before they can be inserted into articles, adding unnecessary steps and significantly slowing down content creation. Furthermore, the gallery management interface resembles a form, providing no visual preview of the final gallery layout. While different formatting options exist, their impact can only be assessed after inserting the gallery into an article and previewing the entire page. This workflow makes updates and edits time-consuming.
👎
Identified Friction
Making edits to a gallery involved toggling between three tabs (edit article, edit gallery, preview), which made even small adjustments take about 90 seconds.
😠
Business Impact
Hearst Magazines' 200+ sites rely on ecommerce galleries as a key revenue driver which generates millions of dollars. However, the existing CMS workflow was highly inefficient.
The Solution
Design Strategy: The core solution was to eliminate context switching by integrating a visual, real-time gallery editor directly within the article creation screen, streamlining the entire workflow. This allowed editors to build, reorder, and customize ecommerce galleries without ever leaving the article they were writing.
🔥
Efficiency
Consolidated a process that required three tabs (edit article, edit gallery, preview) into a single view. This reduced the time for edits from 90 seconds to a few seconds (80% faster).
👍
Usability
Decluttered the interface by removing and organizing features confirmed by editor feedback during testing. Introduced drag-and-drop functionality for managing 100+ slide galleries.
Slides can easily be added anywhere in the gallery.
Images can be edited and any changes are shown instantly.
This is what a product slide looks like before the details are filled in.
The new gallery editor is responsive and works on all devices.
This is an example of a grid gallery.
This is the same gallery but displayed as a listicle.
Slides can be rearranged by dragging and dropping. They can be moved in the side panel or directly in the editor.
Achievements & Outcomes
🚀
Scale
Successfully deployed to 200+ sites, supporting a massive volume of ecommerce content creation at 50+ major media brands.
👀
Efficiency
Increased ecommerce content editing efficiency by 80% eliminating the need for switching between three tabs. What took 90 seconds, only now takes a few seconds in a single combined view.
😎
User Sentiment
Feedback confirmed that the new simplified workflow and the decluttered interface significantly raised user satisfaction for ecommerce teams. User satisfaction was raised from 30% to 90%.
🎉
Team Wins
Gained the trust of the editors and stakeholders by building features they need and requested.
Retrospective
What I Learned: The project's success was highly dependent on early and continuous user research and a clear development plan. Collaboration with product and engineering via detailed planning sessions and instructional videos was crucial for a large-scale feature rollout. Videos were recorded explaining the features and interaction details that could be referenced from the Figma file.