The Challenge
Breaking Open the “Black Box”
When I joined Reflektion in 2016, the platform was primarily built by and for developers, as the initial focus was on selling widgets to retailers for e-commerce websites. The platform powering the widgets was a “black box” system that was cryptic and inaccessible to merchandisers, who struggled to create or modify rules without technical assistance.
With the planned introduction of a new core functionality, I recognized additional usability and scalability challenges. As I proposed solutions to address key issues, I was encouraged to build a mental model to showcase my vision for the platform. Using this opportunity, I reimagined the navigation and foundational elements as a whole, aiming to create an experience that even the least tech-savvy merchandisers could easily navigate and use.
Understanding the Problem
Key Insights
Through hands-on platform use and stakeholder discussions, I uncovered inefficiencies in navigation and workflows. Developers and product managers highlighted recurring issues, such as the “black box” complexity of tools that hindered rule creation and the reliance of merchandisers on technical teams. These insights guided the identification of key challenges:
- Navigation Complexity: Merchandisers struggled to access essential tools due to an unintuitive layout.
- Opaque Rule Editor: The developer-focused design lacked clarity, making it challenging for non-technical users to modify rules.
- Interface Scalability: The existing layout could not support the addition of new, complex features without inefficiencies.
Opportunities Identified
- Streamlined Navigation: Reorganize the navigation and information architecture—from the top menu to within the rule editor—to reduce clicks.
- Visual Rule Editor: Create a visual-first editor that provides immediate feedback and simplifies rule creation.
- Improved Usability and Layout: Redesign the interface for a cleaner layout with expanded space for focused operations.
- Scalable Design: Ensure the platform layout is adaptable for future empowerment tools like the recipe builder and global widget.
Turning Ideas into Action with Mental Models
We adopted a mental model approach to guide our design process. Rather than starting with wireframes or diagrams, I worked with the team to build high-fidelity prototypes that served as conversation starters and storytelling tools.
- Mental Model Demos: Each feature began with a conceptual framework that translated vague ideas into tangible prototypes. These mental models encouraged alignment by sparking discussions about whether the design matched the envisioned product direction. The demos helped stakeholders visualize possibilities, uncover challenges, and refine priorities early in the process.
- Golden Thread Demos: Following the mental model phase, detailed prototypes were developed for critical workflows. These prototypes were presented twice weekly during collaborative sessions with developers, product managers, and other stakeholders. The “golden thread demos” validated real-world scenarios, ensuring that designs were practical and aligned with user needs.
- Rapid Iteration: Continuous feedback during these sessions refined priorities and addressed edge cases. This iterative process sharpened alignment between the mental model and product vision, enabling seamless transitions from concept to detailed specifications.
- Final Design Specification: Once the core prototypes matched stakeholder expectations, they were consolidated into actionable design specifications. These documents emphasized critical interactions while deferring less pressing features for future phases.
This approach not only transformed abstract concepts into a scalable and user-friendly platform but also established a foundation for future innovations.
Early-stage mental model of Pages, Variations and the Rule Editor
Key Features & Solutions
1. Rule Editor with Visual Feedback
To address the “cryptic rules” problem, I designed a new slot view for the editor. This provided visual feedback for the rules, allowing merchandisers to interact directly with slots. This visual-first approach was a significant leap from the previous developer-centric editor, transforming the rule-building experience from abstract to intuitive.
2. Page Editor with Contextual Visibility
While exploring options for the page editor, I realized our solution needed to differentiate itself from common page builders. Instead of aiming to perfect the look and feel—which plenty of market tools did—we focused on what made us unique: personalization. Our page editor prioritized showcasing the personalization outcomes and allowing merchandisers to see end results in context. This approach became especially valuable with the introduction of recommendation widgets, where avoiding duplicated content across multiple widgets was critical.
3. Recipe Builder for Enhanced Personalization
Before the new CEC, merchandisers had limited control over the algorithms behind recommendation widgets, often relying on a single, universal recipe. With our contextual rules, merchandisers gained some control over which recipe applied per context, but we wanted more: to let users see inside the “glass box.”
I designed the mental model and set the foundation of a recipe builder, allowing users to tailor recommendation recipes through an intuitive drag-and-drop interface without needing data expertise. This tool significantly reduced the reliance on customer support and empowered users to create their own personalized experiences.
4. Global Control for Unified Merchandising Strategy
While granular, context-specific rules were effective, merchandisers also needed global-level controls to ensure consistency across the site. I introduced the “global widget,” a virtual widget enabling global settings to cascade down to individual widgets. By leveraging familiar design patterns, the global widget maintained consistency while allowing specific tweaks when necessary. I carefully structured this feature to:
- Reveal global-level rules at lower levels for transparency.
- Provide clear documentation to ensure stakeholder understanding.
5. Revamped Styles and Unified Design Language
A fresh, unified look was critical to the console’s usability. I led the design of new UI components and established design guidelines to maintain consistency across the platform.
Validation & Success Metrics
The new design was validated through:
- Stakeholder Feedback: Golden thread demos confirmed alignment with the product vision and gained trust in the proposed solutions.
- Client Feedback: Released to four alpha clients in 2018, the platform received praise for its improved usability and efficiency.
- Platform Adoption: By 2021, the platform grew to over 50 active daily clients, demonstrating its value and broad industry adoption.
Continuous Growth
Starting with the release of the above core features in 2018, I continued to play a key role in designing and iterating on additional features, including:
- Contextualized content and SEO powered by machine learning.
- Email personalization tools for campaign management.
- Advanced domain-level configuration tools for technical admins.
- A product attribute viewer and editor for developer enablement.
- Multi-locale support for global audiences.
- Comprehensive analytics dashboards and catalog viewers.
- Event monitors and an API playground for developer exploration.
Result & Impact
By 2021, Reflektion’s Customer Engagement Console had evolved from a platform solely for managing merchandising rules into a versatile system equipped with powerful tools for data modelers, data analysts, in-house developers, and tech admins. Its adoption by over 50 active daily clients and acquisition by Sitecore underscored its success, validating the impact of the design efforts that shaped its transformation.
️