Redesigning Command Center's Filter

Oct 2023 - Dec 2023

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 & Opportunity

We aimed to provide Network Success Experts and Technical Support Experts with an enhanced platform for seamless navigation and efficient information retrieval. We focused on making the filter more intuitive and streamlined, with the goal of increasing productivity and reducing the time spent on filter configuration, ultimately optimizing users' daily workflows.

Define & 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.

First, what problems are the users are facing?

Original Filter

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.

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?

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.

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

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

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.

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

Brainstorming Ideas

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.

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.

Simplifying and clarifying the filter

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.

High Fidelity Filter Wireframes

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.

OTHER CASE STUDIES

VIEW ALL PROJECTS