• about

• process

• case studies

• contact

Problem

High database load

Our product contained a number of pages that simply listed all of a given type of object. This wasn't particularly performant, and as we tried to fix the performance issues, we realized that we weren't sure why users went to these pages or what they did there. We wanted to find that out so that we could effectively balance user experience and performance on these pages.

Old UI

Process

Understand what users need

I worked with the Research team to interview users about how they used a number of these pages.

Typical usage patterns

• Most users come to list pages with a specific list member in mind. Infrequently, users need to see the whole list.
• Most users do not search, but rather scroll through the list. This is fine for short lists, but for very long lists, this behavior is inefficient and frustrating.
• For a given object type, only a few identifying fields are used to search/find the needed item.

Analysis

I saw that there was a disparity between the primary user goal—find a single item—and the primary user action—scroll through a long list rather than searching. Looking at our lists, I saw that we did a number of things that discourage users from searching. These included:

• Loading the entire list (or a large subset) by default
• Placing uncommon actions prominently in the upper left, with a brightly colored CTA, while search was deemphasized and on the right
• Having visually heavy filters on the left of the table

With this understanding of our users, I was able to work with Eng to identify options for improving performance.

Solution

Support what users need

The solution was to load fewer items in our lists and encourage users to search rather than scroll. To do this, I created a design where:

• Search is in the upper left.
• List level actions and filters are deemphasized and placed in the upper right.
• Although the list loads with items showing, there is a message showing how many items are shown and whether this is the full list.
• Consistent identifying fields are used for each object type.
• Additional usecase-specific information and actions are available for each list item.

The new UI

Searching (rather than scrolling) is better for users and more performant