Designing an Optimized Product Grid Editor with Bloomreach.

Brief

Bloomreachs Product Grid Editor lets merchandisers fine-tune product results around campaigns and brand goals beyond just the algorithm. I helped simplify key actions like boosting, burying, and locking products, while also building a scalable design system to support future growth. Together, we made the tool more intuitive and flexible for merchandisers of all levels.

TEAM

Employer

Bloomreach

Timeline

Jul 2022 Feb 2023

MY ROLES

Discover

Define

Concept

Design

Develop

Optimize

Discover

Define

Concept

Design

Develop

Optimize

Discover

Define

Concept

Design

Develop

Optimize

The Challenge

Merchandisers face ongoing challenges balancing algorithm-driven optimization with their own business priorities, such as seasonal campaigns, product launches, or brand storytelling. The existing workflows in the Product Grid Editor were overly complex, making it difficult for users to efficiently create and manage rules for search queries and category pages. Key actions like boosting, burying, or locking products lacked clarity and often led to confusion, especially when multiple rules or external influences were in play. Additionally, without a unified design system, the interface suffered from inconsistencies, slowing down development and making it harder to deliver a cohesive experience across the platform. Simplifying these workflows while providing greater transparency and control was critical to improving both usability and scalability.

Approach

Simplifying the process of creating and previewing

Streamlined workflows and dynamic previews make it easier for users to create, test, and refine rules efficiently without technical expertise.

Ensuring rule clarity

Visual indicators and conflict resolution tools provide transparency, reducing errors and enabling seamless rule management.

Establishing a design system

A scalable design system ensures consistency, accelerates development, and supports intuitive user experiences across features and projects.

Visual Editor

The Editor is a core feature of the Product Grid Editor, designed to provide merchandisers with real-time feedback on the impact of their merchandising rules. It offers a dynamic and interactive preview of how edits—such as boosting, burying, or locking products—affect the product grid for a specific search query, category, or audience segment. This tool bridges the gap between rule creation and its outcomes, helping users understand the direct consequences of their decisions.

Visual Editor

The Editor is a core feature of the Product Grid Editor, designed to provide merchandisers with real-time feedback on the impact of their merchandising rules. It offers a dynamic and interactive preview of how edits—such as boosting, burying, or locking products—affect the product grid for a specific search query, category, or audience segment. This tool bridges the gap between rule creation and its outcomes, helping users understand the direct consequences of their decisions.

Visual Editor

The Editor is a core feature of the Product Grid Editor, designed to provide merchandisers with real-time feedback on the impact of their merchandising rules. It offers a dynamic and interactive preview of how edits—such as boosting, burying, or locking products—affect the product grid for a specific search query, category, or audience segment. This tool bridges the gap between rule creation and its outcomes, helping users understand the direct consequences of their decisions.

Design Strategy

The design centered around creating an intuitive interface with clear workflows, real-time visual feedback, and contextual guidance while laying the foundation for a scalable design system.

Design Strategy

The design centered around creating an intuitive interface with clear workflows, real-time visual feedback, and contextual guidance while laying the foundation for a scalable design system.

Design Strategy

The design centered around creating an intuitive interface with clear workflows, real-time visual feedback, and contextual guidance while laying the foundation for a scalable design system.

Query/Category Box: Redesigned input fields for easier query/category ID entry and added autosuggest.

(Top) Audience and Duration Drop-downs: Enhanced dropdowns with explanations for segmentation and rule timelines. (Bottom) Product & Attribute Merchandising Rules: Introduced a searchable panel for attributes with filtering and sorting options.

Query/Category Box: Redesigned input fields for easier query/category ID entry and added autosuggest.

(Top) Audience and Duration Drop-downs: Enhanced dropdowns with explanations for segmentation and rule timelines. (Bottom) Product & Attribute Merchandising Rules: Introduced a searchable panel for attributes with filtering and sorting options.

Query/Category Box: Redesigned input fields for easier query/category ID entry and added autosuggest.

(Top) Audience and Duration Drop-downs: Enhanced dropdowns with explanations for segmentation and rule timelines. (Bottom) Product & Attribute Merchandising Rules: Introduced a searchable panel for attributes with filtering and sorting options.

Bulk Operations

Enabled users to select multiple products in the grid and perform a bulk “Add to Recall” operation. The UI introduced a selection mechanism with checkboxes and a toolbar that activates once multiple items are selected. This provided clear messaging about the number of products affected and a confirmation prompt for bulk actions.

Bulk Operations

Enabled users to select multiple products in the grid and perform a bulk “Add to Recall” operation. The UI introduced a selection mechanism with checkboxes and a toolbar that activates once multiple items are selected. This provided clear messaging about the number of products affected and a confirmation prompt for bulk actions.

Bulk Operations

Enabled users to select multiple products in the grid and perform a bulk “Add to Recall” operation. The UI introduced a selection mechanism with checkboxes and a toolbar that activates once multiple items are selected. This provided clear messaging about the number of products affected and a confirmation prompt for bulk actions.

Drag and Drop

Designed an intuitive drag-and-drop feature for rearranging products within the grid allowing users to move products into the recall section by dragging them to a dedicated area. This included animations and placeholder indicators to guide users during the drag-and-drop operation.

Drag and Drop

Designed an intuitive drag-and-drop feature for rearranging products within the grid allowing users to move products into the recall section by dragging them to a dedicated area. This included animations and placeholder indicators to guide users during the drag-and-drop operation.

Drag and Drop

Designed an intuitive drag-and-drop feature for rearranging products within the grid allowing users to move products into the recall section by dragging them to a dedicated area. This included animations and placeholder indicators to guide users during the drag-and-drop operation.

A Design System to Standardize Components, Interactions, and Patterns

The creation of a design system was a pivotal aspect of this project, providing a foundation for consistency, scalability, and efficiency across the Product Grid Editor and future Bloomreach features. The design system unified visual elements like typography, spacing, and color schemes, ensuring a cohesive aesthetic across all interfaces. It also introduced a library of reusable UI components—such as dropdowns, buttons, and input fields—paired with interaction patterns tailored for user-centric workflows. Beyond visual and interaction standards, the system established clear documentation for developers and designers, fostering seamless collaboration and quicker onboarding. This approach not only accelerated development cycles but also ensured that future updates or new features would align with the established framework, reducing redundancy and maintaining usability. The scalable design system was instrumental in evolving the Product Grid Editor into a tool that could adapt to diverse user needs while ensuring intuitive and polished user experiences.

A Design System to Standardize Components, Interactions, and Patterns

The creation of a design system was a pivotal aspect of this project, providing a foundation for consistency, scalability, and efficiency across the Product Grid Editor and future Bloomreach features. The design system unified visual elements like typography, spacing, and color schemes, ensuring a cohesive aesthetic across all interfaces. It also introduced a library of reusable UI components—such as dropdowns, buttons, and input fields—paired with interaction patterns tailored for user-centric workflows. Beyond visual and interaction standards, the system established clear documentation for developers and designers, fostering seamless collaboration and quicker onboarding. This approach not only accelerated development cycles but also ensured that future updates or new features would align with the established framework, reducing redundancy and maintaining usability. The scalable design system was instrumental in evolving the Product Grid Editor into a tool that could adapt to diverse user needs while ensuring intuitive and polished user experiences.

A Design System to Standardize Components, Interactions, and Patterns

The creation of a design system was a pivotal aspect of this project, providing a foundation for consistency, scalability, and efficiency across the Product Grid Editor and future Bloomreach features. The design system unified visual elements like typography, spacing, and color schemes, ensuring a cohesive aesthetic across all interfaces. It also introduced a library of reusable UI components—such as dropdowns, buttons, and input fields—paired with interaction patterns tailored for user-centric workflows. Beyond visual and interaction standards, the system established clear documentation for developers and designers, fostering seamless collaboration and quicker onboarding. This approach not only accelerated development cycles but also ensured that future updates or new features would align with the established framework, reducing redundancy and maintaining usability. The scalable design system was instrumental in evolving the Product Grid Editor into a tool that could adapt to diverse user needs while ensuring intuitive and polished user experiences.

Talking to Customers

Gathering user feedback was a critical component of the Product Grid Editor redesign, ensuring the tool aligned with the needs of merchandisers. Insights were collected through weekly customer success meetings, where users highlighted pain points, feature requests, and challenges with the existing tool. Usability testing further validated prototypes, uncovering friction points like rule conflicts and unclear grid impacts. This iterative feedback loop allowed the team to refine workflows, simplify complex interactions, and improve clarity.

Talking to Customers

Gathering user feedback was a critical component of the Product Grid Editor redesign, ensuring the tool aligned with the needs of merchandisers. Insights were collected through weekly customer success meetings, where users highlighted pain points, feature requests, and challenges with the existing tool. Usability testing further validated prototypes, uncovering friction points like rule conflicts and unclear grid impacts. This iterative feedback loop allowed the team to refine workflows, simplify complex interactions, and improve clarity.

Talking to Customers

Gathering user feedback was a critical component of the Product Grid Editor redesign, ensuring the tool aligned with the needs of merchandisers. Insights were collected through weekly customer success meetings, where users highlighted pain points, feature requests, and challenges with the existing tool. Usability testing further validated prototypes, uncovering friction points like rule conflicts and unclear grid impacts. This iterative feedback loop allowed the team to refine workflows, simplify complex interactions, and improve clarity.

Research and Discovery

• Captured feedback from weekly customer success meetings to understand ongoing pain points and feature requests.


• Conducted usability testing with prototypes to validate and iterate on design concepts.


• Analyzed competitive tools where possible, although usability insights from competitors were limited.

Key Learnings

• What worked well: Iterative testing with end-users helped refine complex interactions into simple, intuitive workflows. The design system added significant value by improving consistency and scalability.


• Challenges: Balancing flexibility for power users with ease of use for less experienced merchandisers required careful prioritization. Building the design system required alignment across multiple teams.


• Competitor Insights: Although competitive analysis was limited, the focus remained on meeting user needs directly identified through feedback.


• Future Improvements: Continue expanding the design system with advanced components and patterns.

Up Next

Up Next

Have a look at some other work

Have a look at some other work

Have a look at some other work

A Strategy & Design Studio.

Clarity Through Simplicity, Intent & Curiosity.

Office Hours

Mon–Fri: 9:00–18:00

SFO Time:

08:30

A Strategy & Design Studio.

Clarity Through Simplicity, Intent & Curiosity.

Office Hours

Mon–Fri: 9:00–18:00

SFO Time:

08:30

A Strategy & Design Studio.

Clarity Through Simplicity, Intent & Curiosity.

Office Hours

Mon–Fri: 9:00–18:00

SFO Time:

08:30