Challenge

The most powerful feature within the Topbox app, called Discovery, allowed users to find any customer interaction record within vast data sets. While Discovery was widely used, there was certainly room for improvement. Some users weren’t satisfied with their ability to create complex AND/OR search queries. Making many selections was too slow and tedious. And importantly, the business needed to continue to advance Discovery to cut cost and effort spent on 3rd-party solutions.

My role

I designed the entirety of the user experience, including user flows and prototypes, design system components, user interface, and interactions. I also lead user feedback sessions and QA’d the experience at each step of development.

To comply with Topbox's non-disclosure agreement, I have omitted any confidential information, including application performance and client data, from this case study. All opinion is my own.

Approach

In order to improve upon users’ inability to build complex queries within Discovery, a simple multi-select interaction pattern was needed. At present, the system automatically determined like data filters to be ORs (country: Italy OR France) and different ones to be ANDs (event: Concert AND city: Chicago). But to find specific data cohorts, we wanted to allow for query statements that either broadened the data set by making multiple selections within the same data filter (ORs), or creating intersections by adding the same data filter multiple times (ANDs). And of course, users would want to do so in as few extraneous clicks as possible. To achieve this, two experiences were designed, and through user feedback sessions we hoped to find a direction that benefited our users and engineering team alike.

Design A

The first design sought to reuse as much of the existing experience as possible, keeping the design patterns and user flow very familiar. The thought being, this approach would best help current users adopt the new enhancements and help us execute fast to achieve the business’ goals. The same data filter and search UIs remained, with multi-select enhancements added to the search bar and open menus.

Design B

The second design was more of a reimagining of the current experience, and search patterns in general. A new modal interface replaced the typical search bar, in which a user could make, edit and remove multiple selections before committing any changes to the search query. This design attempted to focus a users attention in a single interaction area, and create a more repeatable approach to adding new data filters and editing previously added ones.

User feedback

Multiple feedback sessions were conducted to understand the successes and shortcomings of each design, which included both stakeholders and internal users. We learned quite clearly that Design B was preferred by our target audience for its more intuitive selection process, but also by our engineering group who would carry out the designs.

Result

With the determination that Design B, known affectionately as the Helper Modal, offered the better search experience, and crucially, allowed for a shorter development timeline, we proceeded with creating helpers to support nearly any kind of search. Topics, dates, timeframes, free form text and many other data types all use the same modal interface.

Since it’s launch, the Helper Modal has been engaged with by a vast majority of all Topbox users, leap-frogging the next most used feature in just two weeks. It’s extensible design has allowed for it to be used in multiple places within the app without the need for redesign, while styling and feature enhancements continue to be added.

Sprint / Selector Pattern Testing