Building a design system from scratch

Building alongside Design

Each product's frontend was largely a one-off. Design wanted a consistent look and behavior, and the move to React gave us an opportunity to introduce shared components as teams built new applications.

I participated in Design's product reviews and brainstorming. My design partner and I sat next to each other and kept Sketch and code aligned manually. We'd work through concepts on a whiteboard, then I'd prototype on my machine to explore the behavior.

We started with a shared SCSS stylesheet, a handful of components, and matching Sketch assets. A product prototype helped us see how the design language felt in an application and decide which components to build first.

Working through the interactions

I also built the company's first shared frontend component: a top navigation bar with selectors for a geographic location, such as a crop field or subfield, and a season. It was the only UI shared across products at the time, so consistent behavior and usability were especially important.

The autocomplete needed to support crop-type icons as well as text. We worked through arrow-key behavior, highlighting as users typed, and the distinction between focus and selection. WCAG AA was our accessibility target. A beta/playground setup let us try components in real products behind feature flags.

Helping teams use it

The library had its own repository and was published through npm in Artifactory. We built a documentation website using the components themselves. Our team helped with integration and used the frontend community of practice to discuss changes and establish governance.

All products on the new architecture had access to the system, and teams could adopt components as we released them.