Redesigning the filter experience for Asurion's Command Center

Overview

Command Center is an internal tool that Asurion Network Success Experts and Technical Support Experts utilize to keep track of all their tasks and jobs. They use it to filter through jobs that need some type of action to be taken. Some examples of jobs are delivering and repairing electronics.

Problem

Command Center’s filter system was originally built with limited options and lacked the guidance of a dedicated product designer. As the product expanded, technical support experts and managers found themselves confronted with an overwhelming number of filter options when organizing and navigating their job queues.

The amount of filters has made it confusing and time-consuming to set up filtered queues, which affects the users’ ability to complete tasks in a timely manner. 

Solution

By restructuring and revamping the Command Center’s filter, we aim to offer Network Success Experts and Technical Support Experts a significantly enhanced platform. This will facilitate seamless navigation and effortless retrieval of information, optimizing their daily efficiency and workflow.

Opportunity

For this project, the objectives were to redesign the existing filter system, making it more intuitive and efficient, and enhance user productivity. Our aim was to enable users to easily configure filters — targeting a 20% increase in tasks completed per day. By streamlining the filter setup process, we anticipated a reduction in users’ average time spent on this task, maximizing efficiency and effectiveness. 

Project scope

Redesigning the work queue filter experience for Asurion’s Command Center

Tools used

Figma, Notion, Jira, Storybook

My role

UX/UI Designer

Duration

October – December 2023

PROCESS

1 Define

  • Kickoff with Product and Development
  • Understand the problem
  • Business goals
  • User goals

2 Discovery

  • Competitor analysis
  • User interviews
  • User flows
  • Concept design

3 Design

  • Low-fidelity wireframes
  • Gather feedback
  • Hi-fidelity wireframes
  • Design reviews

4 Handoff

  • Prototypes for development communication
  • Utilize design systems and Storybook
  • Quality assurance

Define AND DISCOVERY

First, what problems are the users are facing?

Since I was new to this product and feature, I needed to understand what Command Center was. I scheduled a kickoff call with the Product Manager and Tech Lead. I learned about the work queue and what types of users were currently using it. I needed to gather more information so I set up user interviews with two types of internal users: Network Success Experts (NSEs) and Technical Support Experts (TSEs). The NSEs work with internal employees, supporting customer facing technicians and their managers. The TSEs work directly with customers and repair businesses.

I wanted to learn how they used Command Center and how they used the filters. I learned that the NSEs weren’t currently using the Command Center, but were preparing to start using it to manage their daily tasks. The TSEs used Command Center daily so it was interesting hearing the different perspectives. 

I had a lot of questions about how they used or planned to use Command Center filters. 

Findings from user interviews:

  • NSEs aren’t using Command Center yet, but are planning to soon. They use Slack to keep track of daily tasks and need an organized way to track jobs.
  • NSEs and TSEs both work jobs by timezones, which is not currently built in Command Center’s filter.
  • They don’t have a way to see the numbers of completed tasks at the end of the day, and would like to. (I learned from the Product Manager that their managers can export it.)
  • Their main goal is to complete more tasks quickly.
  • The TSEs don’t need to see what filters are selected at all times. They just want to complete their jobs in the right order.

In addition, I had a test account where I could test out the current filter which led to many screenshots, questions, and organizing.

Filter screenshots from Figma

After taking screenshots and trying to understand how the filter worked, I had questions for my Product Manager and Tech Lead.

  • Are all these filters currently being used?
  • Is there any way to check if there are unused filters to lower the number of options?
  • Which filters are used the most? 
  • Do the filters change for different queues?
  • What are the main differences between the two sections: ‘Search by’ bar and the horizontal filter?
  • How can we connect user goals and business goals?

I observed some areas for improvement: 

  • Currently the filter options have grown so much that the last option is cut off on the screen. The screen should be responsive.
    • How might we utilize the space better to show the filter?
  • The display of selected filters can grow so high that the current display fills up 2/3’s of the screen.
    • How might we display the selected filters differently so that users can still view them if needed with using less real estate?

design

Brainstorming to create the new filter design

After I had an understanding of the existing filter, I created a table with each filter name and put tags on what it included (see table right). Initially I attempted to narrow down the filters by simply removing options, but after discussions with my team and learning there were many different needs from all users, I wasn’t able to reduce the total number. However, I was able to identify a pattern of filter structures and group those into filter categories. These categories allowed me to broadly redesign filters that met a host of different queries and reduce the design burden. The filter structures included:

  • Date ranges and date selections
  • Multi-select
  • Multi-select with search functionality
  • Single select

Designing the filter

Since filters are a common design pattern, I looked for design inspiration on multiple websites and shared different ideas with my team. I created low fidelity wireframes to discuss as well. Since there were filters that had long lists to search through and even filter options that opened a second list, we decided to go with a filter panel that slides on top of the screen. 

Throughout this process, I also had a feedback group chat with 2 of the TSEs, and a separate chat with the NSEs since their tasks were slightly different. I was able to ask general questions and send examples to gather feedback. 

A filter option for team discussion

Simplifying and clarifying the filter

After we had a basic design concept, we went through several iterations following multiple rounds of discussions and feedback. Since we were on a tight deadline with the end of the year approaching, I organized the Figma file with links to Storybook, examples of the different component states, notes on how it should function, and a prototype for the engineers. We were able to discuss the design and answer any questions. 

Some examples of the final filters for the MVP product: 

Updates we made:

  • Created a side panel filter that slides in and out when the user clicks on the filter.
  • Added total results to the See results button.
  • Added total filters selected on the Filter button on the home page.
  • Added a simpler way to view selected filters by opening another panel.
  • Updated the UI to AsurionUI utilizing existing and built components from the Storybook library.

Reflection

What went well? What could be improved?

While the collaboration with my Product Manager and Tech Lead was smooth and productive, I recognize the opportunity to deepen user engagement. Meeting with more users and their manager would have provided valuable insights, especially regarding the diverse ways in which filters were utilized. Although gathering interest to setting up user interviews was challenging, exploring alternative methods, such as creative survey distribution, could have enhanced participation. Additionally, given additional time, conducting user testing would have offered further validation and refinement opportunities. We did receive overall positive feedback and the newly designed filter provides a more intuitive user experience.