↳
Bloomreach - Grid Editor
↥ BROWSE CASE STUDIES
CLOSE
↳
Bloomreach - Grid Editor
↥ BROWSE CASE STUDIES
CLOSE
↳
Bloomreach - Grid Editor
↥ BROWSE CASE STUDIES
CLOSE
Designing an Optimized Product Grid Editor
Designing an Optimized Product Grid Editor
Improving the Product Grid Editor with intuitive merchandising workflows and establishing a scalable design system to balance algorithmic optimization in alignment with custom business goals.
Overview
Bloomreach’s Product Grid Editor is a critical tool within its Visual Merchandising suite, empowering merchandisers to customize product displays to achieve business objectives beyond algorithmic optimization. While the Bloomreach algorithm maximizes revenue, users often have unique goals, such as storytelling, seasonal campaigns, or strategic brand placement. This case study focuses on designing user-friendly interactions for foundational use cases like creating ranking rules through boosting, position locking, and burying products.
Additionally, this project provided an opportunity to establish a design system to streamline and standardize the approach for future features and projects.
Research/Strategy
User Journey Mapping
Wireframing
Prototyping
User Testing
Design/Production
Visual Language
Design Systems
UI Design
Role
Product Designer at BloomReach
Year
2022
LIVE SITE →
The Challenge
Merchandisers face challenges balancing algorithmic optimization with bespoke business goals. Existing workflows in the Product Grid Editor required refinement to better support intuitive and efficient rule creation for search queries and category management. Furthermore, the absence of a unified design system led to inconsistencies in the user interface, making it harder to scale designs across different tools and features.
The Challenge
Merchandisers face challenges balancing algorithmic optimization with bespoke business goals. Existing workflows in the Product Grid Editor required refinement to better support intuitive and efficient rule creation for search queries and category management. Furthermore, the absence of a unified design system led to inconsistencies in the user interface, making it harder to scale designs across different tools and features.
The Challenge
Merchandisers face challenges balancing algorithmic optimization with bespoke business goals. Existing workflows in the Product Grid Editor required refinement to better support intuitive and efficient rule creation for search queries and category management. Furthermore, the absence of a unified design system led to inconsistencies in the user interface, making it harder to scale designs across different tools and features.
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.
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.
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.
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.
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.
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.
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.
© 2025 FACULTY STUDIO
01/31/25 — Faculty studio site rebuild complete
© 2025 FACULTY STUDIO
01/31/25 — Faculty studio site rebuild complete
© 2025 FACULTY STUDIO
01/31/25 — Faculty studio site rebuild complete