Working with design systems

I had the opportunity to go through a design systems residency at Sprout Social. During my month-long residency with the team, I tackled a couple projects, including the design, development and release of a brand new UX pattern and component for our design system, Seeds.

Outside of design systems, I sit in a feature team that creates and ships publishing features for social media managers. While designing a new feature for publishing, I had to support users creating a structure of folders with sub-folders. To let users navigate up and down their folder structure, we required a wayfinding and navigation element. The feature called exactly for breadcrumb navigation.

Knowing that breadcrumbs are a fairly common UX pattern in enterprise applications, I decided to present this pattern as a potential component to our design system. That way we wouldn’t have to re-invent the wheel every time a design needs breadcrumbs.

Design

I proposed different Breadcrumb component designs to the product design team based on research done on breadcrumb UX patterns. The team gave me feedback on the proposed design options, allowing me to land on a design that was conscious of header space, and fit well within our visual system.

Breadcrumb variations

Development

After landing on a design, I started planning the component. I decided to write a proposal in order to get input from other engineers.

I wrote a document document outlining the following:

While writing the proposal, I researched and learned different ways of implementing breadcrumbs in a system.

My proposal provided foundational material to get feedback from engineers across the company.

Breadcrumb development proposal

After receiving feedback engineering, I proceeded to build the component. By writing a proposal ahead of developing code, I was able to get all of my ideas down and get feedback, which made the process of building the actual component very smooth!

Communication

Throughout the process of developing Breadcrumb, I kept engineering and design in the loop and often seeked feedback from others, as seen on my development proposal. This lead me to developing this component completely in the open.

Upon releasing Breadcrumb to our component library, and the documentation to our live facing systems website, I plugged Breadcrumb to design systems, engineering and product channels, to announce our brand new tool in our toolkit.

Putting Breadcrumb in the open

Adoption

Breadcrumb’s first adoption was, as intended, for the new folders feature in Asset Library.

Breadcrumb in use inside Sprout Social's Asset Library

Sprout’s marketing software, Landscape, makes use of our component library, and it has also adopted the use of Breadcrumb.

Breadcrumb in use on Landscape

Improving Breadcrumb

After user adoption, I assessed if the component was truly living up to its usefulness.

Since the Asset Library folders feature introduced the possibility of really long structures of folders, I wanted to help developers and designers let the breadcrumb serve its main purpose without having to worry about the potential of long breadcrumbs.

I introduced an overflow property that allows developers to split a breadcrumb in half, while focusing on the current page and its closest parents. The prop also changes the breadcrumb design adding a button that gives quick access to the rest of the truncated items.

Introducing an overflow menu