Component Clarity: Chips vs. Tags

Audit and Research

I conducted an internal audit of the usage of chips and tags within Spotify and an extenal audit of how similar components were used on other platforms like Google, Amazon, Facebook, and their design systems.

From there, I found the main use cases of chips and tags and how they overlapped.

Chips were being used for filtering (ex. media in Your Library) and selectable choices (ex. making selections in forms).

Tags were also being used for filtering and selectable choices across Spotify internally, especially in the Spotify for Artists platform. Tags were also used to represent static metadata in tables (ex. in tables for record labels).

Given this overlap and lack of usage guidelines, can we provide more clarity for the design system?

Systematic explorations for Chips vs. Tags

To solve the overlap between chips and tags, I explored systematic options that would clarify the usage between the two components. I presented three options in a proposal to the team.

Option 1: Filter Chips Only

In this option, chips are used for filtering, and tags are used for all other existing use cases (static data, selectable choices). The definition of chips would match the most prominent usage of chips on mobile, and there is a limited impact on existing tag component.

Option 2: Interactive vs. Static

Chips are used in interactive use cases (filtering, selectable choices) and tags are used in static use cases. This use case distinction provides clarity and is easy to remember. However, there is an increased impact on existing tag component as we are deprecating two use cases for tags.

Option 3: Chips Everywhere

Tags are deprecated, and the definition of Chips is expanded to include all existing use cases of Tags.  This use case is very clear and concise and eliminates confusion between chips vs. tags. However, there is the greatest impact on the existing tag component as we would be deprecating it entirely. Additionally, chips do not align visually with many current states that use tags (Chips are rounded with a stroke, and tags are more square without a stroke.)

Final Decision: Interactive vs. Static

I presented these options to designers on the Encore and client web team, and chose interactive vs. static for its use case clarity and lessened impact of the existing tag component. 

A Cross-Platform Solution

What about mobile?

At this point, I had solutionized for web by creating component clarity between chips and tags, a web design system component. But what about mobile? As I connected with designers across Encore, I encountered a similar issue on the mobile design system side.

Across mobile, there are many chip-like components that look like chips but don’t have consistent names or usage.

Cross-Platform Challenges

First, Filter Chips are very similar to Secondary Buttons but behave very differently. Secondary buttons are used for simple actions like following an artist while filter chips are used for filtering content. Secondary button labels also use verbs to indicate a call to action, whereas filter chip labels use nouns or category descriptors. 

Second, Navigation Chips look and feel like filters when they behave more like buttons. Navigation chips simply link you to a new page of content whereas filter chips interact with the content already on the screen. 

Visual Explorations

I worked with Bex Moores, a product designer on the Encore Consumer Mobile team to explore several different options, focusing on visual treatment, to create component clarity between secondary buttons, navigation chips, and normal chips within Encore. After iteration, I presented two final options for feedback.

Option 1: Subdued Fill For Chips

In this option, all chips will change to a subdued fill, making them distinct from secondary buttons. Navigation chips will have an icon to provide context to where it is directing the user.

Option 1 provides a clear hierarchy and distinction between secondary buttons (follow button) and chips. ThenNavigation chips icon adds affordance and sets the expectation that navigation chips will direct the user elsewhere. However, one major concern was that the icon may clutter the app and may not translate well into other languages and cultures.

Option 2: Transparent Fill For Chips

In the 2nd option, filter chips and choice chips would have the same visual treatment with a transparent fill. This is similar to the status quo, but the chips would be updated to new color theming. Navigation chips will remain unchanged with a subdued fill. 

Filter & choice chips have a clear visual distinction from Navigation chips by using a different fill. Secondary buttons and chips, both on and off elements, have transparent fills and stroke outlines. One tradeoff with this option is that there may not be enough hierarchy between secondary buttons and chips, especially because they appear on the same page often.

Feedback

I presented these options to Spotify designers, design managers, and engineers within the Encore team and got valuable feedback. Option 1 was preferred by some because it made chip components most coherent and predictable, whereas Option 2 was preferred for its alignment between secondary buttons and chips.

Final Decision: Subdued Fill

I went with Option 1, where the visual treatment of chips is distinct and separate from other components. It also prioritizes filtering as a main use case for chips.

Ultimately, this is the option that best allows designers to easily differentiate between chips and other components, clearing up the workflow for choosing components.

A Color Theming Update

Meeting Accessibility Standards

With some decisions made, I had to ensure that I was meeting my goal of improving accessibility. This meant updating chips to Spotify’s new semantic color theming, which had been tested to ensure accessibility. Additionally, chips have primary and secondary levels, and the new color theming needed to ensure hierarchy between the two levels.

Using the Bright Accent set from the new semantic color theming, primary level chips will use the Base color, and secondary-level chips will use the Decorative Subdued color.

This direction achieves a hierarchy between primary and secondary and improves accessibility.

Final Component

New Chips!

Finally, the new chips were ready. This was my proposal for what these new chips could look like on web and mobile.

The final component in Figma includes all states, sizes, and color themes that align with Encore. I also wrote detailed documentation on chips that did not exist prior that outlines what chips are and when to use them. 

Impact

During my short time at Spotify, I redesigned the Encore chip component for improved accessibility, achieved component usage clarity, and aligned across mobile and web. Most importantly, I improved the workflow for Spotify designers and design system users.

My contributions were also launched in 2022 to over 450 million users. If you use Spotify, you’ll see the updated chips in both the desktop and mobile app!

Finally, my internship was remote, so I presented my work virtually to the wider Spotify community. It was exciting to show what I had done and give thanks to my supportive team!