Redesigning the filter experience for Asurion's Command Center

Overview

Command Center is an internal tool that Asurion administrators and technical support users 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 electronics and repairing electronics.

What's the problem?

Command Center’s filter system was originally built with less filter options and without a core product designer. Since the product has grown, technical support experts and managers currently have a lot of filter options when setting up and filtering through their job queues. 

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

Goal

For this project, the goal was to redesign the filter to make it more intuitive and efficient so the users can set up filters quickly and increase their tasks completed per day by 20%. Additionally, with the redesign, users should decrease their average time spent setting up the filter.

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

November – December 2023

PROCESS

1 Discovery

  • Kickoff with Product and Development
  • Understand the problem
  • Competitor analysis
  • User interviews

2 Define

  • Business goals
  • User goals
  • User flows

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

DISCOVERY and Define

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 the work queue and what types of users are currently using it. I needed to gather more information so I set up user interviews with two types of internal users: a Network Success Expert (NSE) and a Technical Support Expert (TSE)The Network Success Expert work with internal employees, supporting customer facing technicians and their managers. The Technical Support Experts work with customers and repair businesses.

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

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

A few findings from user interviews:

  • NSE’s are not using the 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.
  • NSE’s and TSE’s 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 TSE’s 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 organization.

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.
    • 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 idea of what all the filters were, I categorized all the different types of filters to see what I needed to keep in mind while designing. I tried to see if we could narrow down the options, but because there were many different types of users using this, I wasn’t able to simplify or lower the amount of filters categories or options. I figured out there were 4 types of filter categories:

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. 

We have a design system so I put together some ideas to discuss further with my team, in design reviews, and with my design manager for feedback.

Throughout this process, I also had a feedback group chat with 2 of the Technical Support Experts, and separately chatted with the Network Success Expert since their tasks were slightly different. I was able to ask general questions and send examples to gather feedback. 

Simplifying and clarifying the filter

Now that we had a basic design, we went through a few iterations after multiple discussions and feedback. Since we were on a tight timeline 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. Below are 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 happens next?

Next steps that I had were to QA the built product with the engineers so that we could check to see if any changes were needed. Working with the Product Manager and Tech Lead went well because we communicated clearly with each other and were always open to ideas and feedback. They answered my many questions promptly. 

Thinking back, there are a few things I would have done differently. I would have tried to meet with more users and their managers. I learned that often times the managers were using the filters to set up work queues, not just the Experts. However when we reached out to talk to users, they gave us a list of Expert contacts to reach out to. Additionally, I found it hard to get responses. If I had more time, I would use more creative ways to gather participants. In the past, I’ve sent surveys to gather interest and that helped me set up more interviews. Additionally, with more time it would have been beneficial to conduct user testing. Overall the feedback was positive and the newly designed filter is more simple and intuitive.