LinkedIn connects the world’s professionals and gives them an authentic means to establish their own professional profile online, connect with trusted contacts and extend their professional network, and exchange information, ideas, and insights to make better, faster decisions.

Overview

DESIGN GOAL

Unify pills component across the LinkedIn ecosystem to create a consistent user experience

Process

First, I needed to audit the usage of labels, chips, and pills across LinkedIn’s products. I consulted the Art Deco Guild: a team of distributed designers spread across offices, projects, and objectives, who provide the Systems team with a horizontal view across Design. They gathered usage of these three components and together we identified deviations from Art Deco’s guidance. In this process, it was important to determine if these deviations were necessary to solve a unique use case, or simply a consequence of confusing components. 

The example below shows the audit of pill, chip, and label components across multiple products at LinkedIn. Note the inconsistencies in visual style, iconography placement, and interaction types.

Better Extensibility: Provide multiple size and color variants

Improved UX: Clarify the difference between "add", "edit", and "remove" actions on input pills

Guidance for mobile: Define a flow for input pills on mobile that fit existing platform paradigms

Internationalization: Ensure compatibility with all of LinkedIn's supported languages

The Link Pill: Create a component that has more visul affordance than a link, but is different from the button pattern

Approach

I explored simplifying the system by replacing the three components with a single, modular approach, with which designers could configure an affordance based on the desired interaction. While we did not end up calling it a "capsule", I'll use the term here to differentiate from the previously-used component names.

At its simplest form, the capsule contains content (static or interactive) in the middle. The cap on the right-hand side is reserved for interaction, while the left-hand cap can be used to reinforce or clarify that action with an icon.

With these guidelines in mind, the old component use cases can be solved in new ways:

• A label is non-interactive. With in the new pattern, the base shape would not include caps, indicating it was non-interactive.
• Both chips and pills are interactive, with chips only being dismissible and pills instead allowing for toggle, input, and dismissal interactions. With the new pattern, interactions would be placed consistently in the right-hand cap and icons, used heavily in existing chips, could live consistently in the left-hand cap.

Unlike with chips, labels, and pills, this new capsule could share the same size and color variants system-wide.

Content (Middle):
Static meta data
Interactive 

Visual Reinforcement (Left cap):
Iconography should be used thoughtfully
Needs to reinforce or clarify the action, not decorative

Interaction Type (Right cap):
Add
Dismiss
Toggle ( +  to  ✓ )
User-generate Input ( +  to  x )

Feedback

Engineering:
Since labels, chips, and pills are used heavily across LinkedIn, I sought feedback to understand the Engineering time and effort needed to migrate to the new components. They concluded that deprecating three components and migrating products to the new “capsule” system would be prohibitive and inevitably lead to broken products. They recommended, if at all possible, to make changes to existing components to achieve our desired end-state.

Design:
After establishing this approach, I gathered feedback from designers and design leadership on simplifying our components into one. The common sentiment was that the bullet-like shape was visually awkward, potentially leading to a scenario in which UI icons were added only to create a full "capsule" shape.

Solution

With all this in mind, the best way move forward was to:

• Avoid introducing a new component and naming convention (do not call it a "capsule")
• Update the existing pill pattern to contain more interactive variants (add, dismiss, toggle, input)
• Standardize the positioning of interactions and icons within the pill pattern
• Deprecate chips, as they could be solved with the updated pill pattern

Designers and Engineers would now choose between two components: non-interactive labels, or interactive pills. Now, the label component would be visually separate (no rounded corners), clarifying its use. The revised pill component now had more flexibility by offering two additional sizes, ten new color variants (default and inverse), and designated, consistent icon placement.

By simplifying the system in this way, we also minimized Engineering effort and avoided the confusion involved in deprecating and replacing components.

Most importantly, this new pattern improves the member experience. Visually differentiating interactive versus non-interactive components provides an intuitive understanding of how the interface works. By providing consistent placement of icons and interactions, users know where to look for affordances, no matter which product they're using.

Click below to take a look at the comprehensive spec.