design @ Mavenlink

Team

Designer, Product Manager, UX Writer, User Researcher

Note: This report originally prepared by designer Slava Starikov

My role

Head of Design

overview

Our engineering team is rebuilding significant components of the product in React JS, including tables. Tables display vital information along with a variety of complex view configurations. We took this opportunity to redesign filtering interactions.

 

users, NEEDs, and problems

Needs

  • Within a large data set, a project manager or individual contributor needs to view a smaller subset of information, based on multiple parameters

  • Our current table implementation loads unnecessary data and noise

Target Users

  • Primary: Individual Contributor

  • Secondary: Project Manager

Left: Abstraction of table with unfiltered view. Right: Abstraction of table with filtered view.

Left: Abstraction of table with unfiltered view. Right: Abstraction of table with filtered view.

Problems

1. It is tedious to have a filter module for each column

Current Table.png

2. Scrolling and manually looking for a field to filter on is time-consuming

  • There can be many columns in a table

  • The order of columns can be different for different views and tables

  • It can be very time consuming to scroll and manually search for a specific field

Current Column Filters.png

3. Applied filters for a given table are shown in separate drop-downs, which is inefficient because:

  • In order to see what filters are applied, you have to click into each filtered column

  • There is a bar that shows how many filters are applied, but does not show what they are

Current Column Filter Dropdown.png
Current Results.png

4. It is difficult to find a specific value to filter by because a given field can have many values and you have to be specific with syntax

Current Filter Search.png

5. If you want to filter for tasks related to two “assignees”, we return results that show either of the two assignees on the task, rather than showing where both assignees are on the task, defaulting to a Boolean “OR”

Scenarios and Tasks

Tasks

  • Open Filter module

  • Apply a filter to a specific field

  • Apply a filter on a specific value

  • View specific data based on applied parameters

Scenarios

Both personas need to be able to view tasks that are:

  • Assigned to specific people

  • Labeled high priority

  • Have a particular tag, i.e. “Marketing”

  • Due this week

  • Overdue

  • Not Completed

Explorations

1. Single input / query field for typing

CONS

  • Extra clicks and navigation for mouse users

  • Steeper learning curve to learn syntax

  • Small real estate for applied filters

PROS

  • Able to apply filters by only using the keyboard (for power users)

Input field shows possible filters as you type

Input field shows possible filters as you type

Example of filters after user enters values

Example of filters after user enters values

2. Live updating: the data is updated each time a filter is selected

CONS

“Lots of renders feel visually glitchy, especially if I did not intend for the information to update.”

- Project manager research participant

  • Extension of an undesirable pattern where cascading changes update values (unnecessary loading), before a user is ready to apply those changes

  • Limited space to fit both the filter module and the table

PROS

  • The user can see how the results change, as filters are selected

  • Less friction since the user does not have to click “to Apply” filters

Filter Accordian.png

3. Conditional logic drop-downs

CONS

  • Lots of clicking for mouse users

  • Popups on popups and horizontal shifting on dropdowns

PROS

  • Saves the user from using a mouse click explicitly update the table

  • The user can see how the results change, as filters are selected

Filter Logic dropdowns.png

4. Search for a value, with auto-completing results

CONS

  • High technical cost and out of scope

PROS

  • Less typing and navigation

Final Decision

1. Modal Design

“I am able to focus on the filtering process without losing context.”

- Project manager research participant

  • Universal pattern for tables easily applied across the product in a variety of use cases

  • Enough real estate for large data sets and for distinct scroll areas

Filter Modal.png

2. Active search / auto completer

  • Easy to type for a field or value as soon as the filter modal loads

  • Handles large data sets with scrolling

Filter Active Search.png

3. Exposing fields and values

  • Reduces navigation required to filter multiple columns

  • Tabbing between the two columns allows quick selection for keyboard users

Filter Columns.png

4. Visible Active Filters

“It gives a nice view and confirmation of what is expected.”

- Project manager research participant

  • All filters in one place

  • Vertical column for quick scanning

  • Handles large data sets with scrolling

Filter Applied.png

5. Ability to choose between “Any” or “All” logic when selecting values within a single value

  • Due to technical scope, we are able to allow users to choose the logic within a field, but not across values

  • Still working on determining final language with UI Copywriters

6. The number of expected results updates as filters are added or removed

  • Allows users to see if they have overly narrowed their data set while they are in the filter process

Filter any all.png
 

Prototype WALK THROUGH

Short video of the prototype in action.

Short video of the prototype in action.