| 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.
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:
- The definition of the breadcrumb component
- Proposed component structure
- HTML translation
- Prop Table
- Accessibility considerations
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.
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.
Sprout’s marketing software, Landscape, makes use of our component library, and it has also adopted the use of Breadcrumb.
