Role User interface design and front-end engineering
Team Design systems and me

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 unlimited 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.

Some proposed breadcrumb designs

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

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

Adoption

Breadcrumb’s first adoption was 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