Visual Editor — Rethinkthe Search Experience

ClientAlgoliaServicesResearch, UX Strategy, UIYear2020

Unlocking the business valueof Search and Discovery

The Visual Editor is a drag-and-drop interface made for media and e-commerce to control search and shorten paths to content, and develop seasonal strategies (promotional campaigns, editorial calendars, significant releases, etc.) without coding skills. Merchandisers and business teams are decision-makers regarding budgets and tools. These were frustrated with many tickets and requests about the search not working or the results being irrelevant. They have average comfort with technology, so they needed an easy-to-use interface and customized the search experience without asking a developer.

Team

Dashboard

Role

Senior Product Designer

Duration

4 months

Competitive Differentiators

We started with a benchmark of open-source and e-commerce solutions to define a competitive differentiator: usability. Then, we collected insights about decision-makers who wanted to define marketing strategies and control the experience through research and interviews. To maintain consistency across Algolia’s ecosystem, the Visual Editor uses a shared design system, Satellite, to create a unified user experience. We included components, styles, and icons to maintain strong design consistency with Algolia’s products and consolidate our cross-industry positioning.

Various project views

We defined different use cases from our business customer’s needs:

– Tailor the experience to shorten the path to content
– Develop seasonal strategies
– Detect top trends and underperforming queries to better guide users 
– User intent matching

Through a drag-and-drop interface, merchandisers can define product search strategies: pin, hide, boost, and filter with a context (device used or section visited) during a timeframe, with an immediate preview. The Visual Editor offers additional trigger capabilities compared to the existing manual editor. A user query, context, or conditionless can trigger rules.

Design System

Outcomes

The visual editor was released in 2020 and is now one of Algolia’s core features, which competes against specialized e-commerce solutions such as Elastic, Solr, Attract, Bloomreach, Unbxd, Klevu, Fact-Finder or DooFinder.

Visual Editor Tutorial