Re-designing the Multi List Picker

Creating components in a new design system

Introduction

In fall 2019, I was a product design intern at Relativity, an enterprise software company, when it decided to overhaul of its design system. I contributed to designing new components, such as the Multi List Picker, based on the new visual style. A Multi List Picker includes two lists, and lets the user transfer items from one to the other. Usually the former is a list of unselected choices, the latter shows the selected choices.

This project focuses on

• Design systems
• Auditing the software for different use cases
• Interaction design
• Prototyping

Problem

This is what the original Multi List Picker component looked like:

I audited all the instances of Multi List Pickers in the Relativity software and identified these usability issues:

• The clickable target areas of the arrows icons in the middle of the Multi List Pickers are very small, considering that they are an important action on the page.
• The “transfer selected” button (single arrow) can be easily confused with the “transfer all” button (double arrows).
• There are many use cases of Multi List Pickers across the software, and they are inconsistent in their designs. I found more than three variations to the “official” Multi List Picker. Two examples are shown below.

Solution

The solution includes not one but two components: the Basic Multi List Picker and the Advanced Multi List Picker.

Basic version

Advanced version

Here is how the new design addresses the problems:

• It follows with the visual style of the new design system. The component make use of the new components other designers made, like checkboxes and tables.
• The two versions of the component address different use cases within the software. The Advanced version can be used when multiple columns of data need to be displayed for each item. When only the name of an item is relevant, the Basic version suffices.

• The new icon buttons address the problems of target size and differentiation. The “transfer all” button takes on the secondary button style in the design system, whereas the “transfer selected” button takes on the primary button style to indicate priority. Additionally, when no items are selected, the “transfer selected” buttons are in a disabled state.

Process

• My first step was understanding what the Multi List Picker is and how it is used. I did not have access to statistics about the usage of the component, so I went about my research in a more manual way. I looked through the software to find all use cases of this component, with the help of tutorials that led me to parts of the software I wasn’t previously aware of. (It takes employees and clients 1 month of studying to be certified for this software, which speaks to its complexity.) This helped me understand the contexts in which this component appears and its different use cases, which led me to create a basic version and an advanced version.
• I also considered examples of Multi List Pickers in design systems of other software. This helped me understand the design patterns that exist beyond my company’s software. One example is the Salesforce’s Dual Listbox (pictured below), which made me think about how Multi List Pickers can be simplified.

• With the research in mind, I explored different possibilities of what the Multi List Picker can look like through exploring the iconography and building interactive prototypes in Figma. I showed them to designers and developers who are familiar with the software to get their feedback and iterate on the design. Some examples of my explorations are shown below.

The new UI uses icons from the Streamline icon pack, and I examined five options in from the icon library.

Exploring how different icons would look in buttons, and combining the primary & secondary button style.

What if there were no icons at all?

Exploring different ways of selecting items — with or without checkboxes.

Reflection

Throughout the process of creating components for the UI redesign, I gained a deeper understanding of the principles of atomic design and how to create re-useable components. By researching the variations of this component, I identified problems I would like to address, including the need for a simple Multi List Picker and increasing the visual differences between buttons.

Throughout this design process, I learned about

• Using Figma to create interactive prototypes of components that can be integrated into other interfaces
• Creating components that consistently follow the visual language of a design system
• Documenting new components as part of a design system

Unfortunately I did not have the opportunity to conduct user tests while designing the component. I would have liked to see how users responded to the new design.