Salesforce Logo

Lightning Filtering

Filtering allows users to quickly refine a list of information to find the most relevant data for them.

Role

Principal UX Designer

Contributions

UX Design, UI Design, Moderated Usability Testing, Product Roadmap

Team

1 Product Manager, 12 Engineers, 1 Designer, 0 User Researchers, 1 Doc Writer

Overview

Filtering in Lightning gives users a framework that offers an efficient and consistent UX throughout the app while supporting the different use cases of our users.

Listview Filters

The action model on list views groups everything together and places buttons in the top right of the list header. When a user clicks on the filter button, a panel opens and allows them to refine the information by the metadata configured for that list.

#

Search Filters

Search filters are located on the left side of the UI, placing them in a familiar location - think Amazon, Facebook, or LinkedIn - and making them easy to discover after narrowing a set down by entity type.

#

Component Filters

If the list that's being filtered is only one component of many on a page, filters are displayed in a panel close to the relevant data.

#

Learnings

Process & Collaboration

Product Requirements

I worked with our PM and engineering teams to create a product spec that would define the features for that release, guide the research and design, and serve as a source of truth for what the team was able to accomplish.

#

Problem Statement

The first version of filtering was closer to building a list than refinement. When creating a new Account list, for example, all of the Account records in that user's org that they have permission to see would be part of the base list. From there, the user adds criteria to remove any records that aren't needed. The primary issue is that adding a single filter would be about a six-step process. First, the user selects to add a new filter, then chooses the field, then the operator, then the value, presses "done" and then applies. If the user wanted to refine the list in the future further, they'd repeat the steps and then have to repeat those steps to get back to their original list. This was a slow and non-standard interaction, and we wanted to create a more familiar and efficient experience for our users.

#

Personas & Use Cases

#

Sales Cloud Deal Closer

Activities

Logging calls, email, and notes. Entering new Leads & Opportunities, updating existing Accounts, Opportunities & Contacts.

Salesforce Strengths

Staying organized, ease of use

Working Style

With customers ~60%, Remote ~40%

As a Deal Closer, I need to refine a list of opportunities at the end of the quarter so that I can find open deals that need to be closed.

Learn more about Sales Cloud personas on Trailhead.

#

Service Cloud Case Solver

Activities

Troubleshooting customer issues, updating existing customer records, logging activities

Education Level

~65% college degree or some college, 22% graduate degree or some graduate school

Work Experience

42% 10+ years, 21% 6-10 years, 21% 3-5 years, 16% 0-2 years

As a Case Solver, I need to find Knowledge Articles that apply to my customer's product that they're having issues with so that I can help solve their problem and close their case.

Learn more about Service Cloud personas on Trailhead.

Explorations

We wanted to test different positioning of the filters to understand what would work best for all of our users. We tried above the table, to be close to where their eyes were already focused and to the table headers. We tested on the right and left sides of the UI to support where filters were already in the app, and to try new locations for feature-specific experiences.

#

Research

I worked with our research team to conduct moderated usability testing to learn what experience would best support our users. We tested with Sales and Service Cloud users in both Lightning and Classic. Both myself and a researcher moderated the various sessions. We evaluated different types of inputs, the location of the filters, and methods of filter execution.

#