Modernizing a critical merchandising workflow
Planogramming Tool Rebuild
TL;DR
The Planogram Editor's outdated technology made new features difficult to build and performance struggled on larger planograms. The challenge was to modernize the editor and create a foundation for future development without forcing users to relearn familiar workflows.
I led the UX/UI redesign, balancing user needs, business priorities, and technical constraints. The rebuilt editor reached 100% adoption across client organizations, helped retain a multi-million dollar client, and introduced capabilities that reportedly saved hundreds of clicks.
Overview
The Planogram Editor is a core planning capability that enables clients to leverage One Door’s underlying Digital Store model. It allows visual merchandisers to turn retail strategies into store-specific layouts they can create, manage, and update.
I led the evolution of the planogramming tool from a legacy experience into a modern, flexible product workspace. The work spanned across a few months with features and updates shipped in multiple phases.
Certain details cannot be disclosed for confidentiality reasons. The case study will instead highlight the reasoning and approaches used throughout the project. For more information, please connect with me here.
The Challenge
Building a stronger foundation, adding new capabilities, and modernizing a core workflow.
The Planogram Editor had reached the limits of what it could comfortably support. Performance had become a problem with larger planograms, and its underlying technical limitations made customer-requested capabilities difficult (often impossible) to develop. It needed a new foundation that could improve the planogramming experience and support future development.
The rebuild came with another challenge. Customers were used to working a certain way, and previous product changes had shown that significant interface/workflow changes were often met with resistance. A modern interface wouldn't mean much if users struggled to adopt it.
Thus, we needed to improve the editor without forcing users to relearn familiar workflows. That meant deciding what to change, what to keep, and how to balance user needs with business priorities and technical constraints.
The approach
Gathering Intel
How do we identify the right problems to solve?
Before redesigning the editor, I needed to understand what wasn't working and which problems mattered most to users. I reviewed support and feature requests, spoke with the Customer Success and Managed Services teams, interviewed users about their workflows, and shadowed two planogrammers onsite.
These different perspectives helped me uncover both day-to-day frustrations and broader product needs. Feature requests highlighted missing capabilities, while observing users revealed where interactions and unclear workflows got in the way.
Adoption as a Design Principle
How do we modernize an established experience without making customers relearn it?
Customers had established ways of working in the Planogram Editor. A redesign that disrupted familiar workflows risked making everyday tasks harder, even if the new interface looked better.
I chose to preserve the overall layout, information hierarchy, and core workflows while improving interactions, access to tools, and workspace flexibility. This gave me room to introduce capabilities the old editor couldn't support without making users feel like they had to learn the product all over again. The goal was to make meaningful improvements familiar enough to adopt, yet improved enough to matter.
The Heart of the Interaction
How do we make a canvas feel smooth and predictable?
The canvas is where most planogramming happens. Users need to select and move items, make precise edits, and navigate panels without friction. The legacy editor’s rigid layout and interaction patterns made this cumbersome.
I increased the canvas area from a fixed 50% to a default of 100%, giving users more room to view and edit planograms so they could focus on the work itself rather than navigating a constrained workspace.
User interviews revealed that planogrammers had used different tools before One Door, from specialized planogramming software to general design tools like Photoshop, Illustrator, and PowerPoint. I established familiar interaction patterns for both mouse and touchpad users, including scrolling and panning. Touchpad users could now pinch to zoom, while mouse users could zoom using the new zoom component, giving them total control on zoom increments. This made everyday editing tasks feel more familiar and intuitive.
Making Placement Predictable
How do we reduce ambiguity when positioning products on the planogram?
Precise placement is essential in planogramming, but research revealed that positioning items accurately often required repeated adjustments. I addressed this with two improvements:
- Paste in Place: A new feature that allowed users to copy products and hardware from one planogram and paste them at the exact same coordinates in another, making duplication more predictable.
- Display Item Coordinates: Show the X, Y, and Z coordinates of items on the canvas, helping users align items precisely and granularly control their placement.
Bringing Actions Closer to Intent
How do we make tools available where users need them?
Moving between the canvas and toolbars for every action slowed down repetitive editing tasks, especially on larger monitors. I introduced contextual right-click menus to bring relevant actions closer to the selected item, keyboard shortcuts to perform common tasks, and a compact toolbar that grouped similar tools without taking up too much workspace. Together, these changes reduced unnecessary navigation and clicks, helping users make repeated edits more efficiently while keeping their focus on the planogram.
Making Data Density Manageable
How do we give users flexibility when their information needs differ?
Planogramming involves more than just arranging products. Users also need access to product attributes and status information, but the information they need varies depending on the task or planogramming stage.
A fixed workspace forces users to work around information they don’t need and makes it harder to focus on what matters at the moment. To address this, I designed configurable workspace elements that let users gain control over the information they saw in different contexts.
- Flexible Side Panels: Resizable panels gave users more control over the available workspace area.
- Column Selector: Let users choose and reorder table columns to display, so the table could better cater to their information needs.
- Configurable Status Bar: Let users choose and reorder the attributes displayed when hovering over items on the planogram. This gave them quick access to relevant product details, without having to open another panel.
These changes shifted the workspace away from a one-size-fits-all arrangement to an adaptable interface.
Simplifying Complex Workflows
How do we reduce repetitive work while making complex tools easier to understand?
Some of the editor’s most demanding workflows involved managing Smart Containers. Smart Containers supported complex planogramming tasks, but their interface needed to be easier to use and understand. I simplified panel labels and added help icons where users needed more guidance, making the available options clearer. The rebuild also introduced support for adding multiple Smart Containers with a single click. This allowed users to handle complex tasks without repeating actions manually.
There was no reliable way to measure the feature’s overall impact because customers used Smart Containers in different ways and across varied use cases. However, Managed Services estimated that supporting adding multiple containers saved hundreds of clicks, offering a concrete example of the repetitive work the feature helped reduce.
Making Search More Forgiving
How do we help users recover when their search doesn’t match exactly?
The old editor's search relied on exact spelling, making it difficult to find products when their names varied slightly or included symbols like dashes and brackets. During shadowing sessions, I saw firsthand how a failed search lead a planogrammer to believe they had made a mistake somewhere in their planogram rather than in the search term.
I introduced fuzzy search to help users find relevant products without needing an exact match. Through testing, I identified an optimal default for search tolerance, while still allowing users to adjust it to suit their needs. This made search more forgiving, reduced the need to repeatedly refine search terms, and helped users find the content they needed with greater confidence.
Fuzzy search also expanded what users could search by, allowing them to find products using attributes beyond their names. This gave users more ways to locate the right content, even when they didn’t know its exact name.
Onboarding Materials
How do we make it easy for users to adopt the new interface and experience?
The new Planogram Editor updated familiar workflows and introduced new features, so helping customers get up to speed was an important part of adoption. I worked with the Product Manager to simplify help documentation, create One Door’s first product video tutorials, and build Appcues walkthroughs that guided users through the updated interface and highlighted new features.
These resources gave customers practical ways to learn the editor, whether they needed an introduction or help with a specific feature. They also gave Managed Services ready-to-share material to answer customer questions. The team called the documentation the best they had seen for any new feature at One Door, reinforcing its value as a practical resource for supporting customers through the transition.
Results
A modern tool, real impact
100%
adoption across all client organizations
The legacy editor was retired.
Stronger client confidence
Helped retain a multi-million dollar client and supported new RFP opportunities.
Hundreds of clicks saved
New tools like multiple containers and contextual menus made repetitive tasks faster.
A foundation for growth
Modern technology and reusable patterns enabled new capabilities and future development.
From a business perspective, the project’s biggest wins were retiring the legacy editor and strengthening an important client relationship, contributing to a successful renewal.
The rebuild also strengthened sales demos for prospective clients and gave the company a more capable technical foundation for future product development. Post-launch user evaluations found the new editor smoother, faster, and easier to use.
Because planogramming workflows varied by user and task, metrics such as time savings and task completion weren't meaningful measures on their own. Instead, success was evaluated through a broader set of indicators, including adoption, solicited and unsolicited user feedback, and reported workflow improvements.
The project pushed me to think beyond individual screens and workflows. It challenged me to balance user needs with technical constraints and work closely with Product and Engineering to shape the experience and direction of a critical part of the product.
Reflections
Validate the technical approach earlier
One key lesson from the rebuild was the value of an early technical proof of concept. A few canvas interactions proved more complex to implement than Engineering had anticipated, leading to delays and rework as the team worked through the details.
In hindsight, I would validate the riskiest technical assumptions earlier with a focused proof of concept. This would help surface constraints and trade-offs sooner, reducing rework and helping Design and Engineering make better-informed decisions together.
Keep workstreams flexible when dependencies shift
We introduced swimlanes and workstreams to help Engineering coordinate parallel efforts. However, shifting dependencies, reallocation of engineering resources, and delivery timelines made the structure harder to maintain as the project evolved.
In hindsight, I’d use a more flexible approach, giving engineers greater ownership of defined product areas while reducing handoffs and dependencies. Newer AI-assisted development workflows also make this approach more viable. The key lesson was to create enough structure to coordinate work without making the process harder to adapt.