Boba Design System

Foundations to guide product creation at Rebellion Defense

Design system

Overview

Rebellion Defense builds software as a service for the defense industry, helping analysts make decisions with the power of maching learning and artificial intelligence.

When I joined the company at ~200 employees, I noticed a need for reusable components and guidance to make our product creation process more efficient and consistent. I initiated the Boba design system and built a small, scrappy team to improve our internal processes.

The problem

How might we share styles and components across multiple product lines and get buy-in from a fast-moving organization?

Thumbnails from the design system color palette

Six of the design system color families

Preparing for scale

Rebellion had many duplicative UI elements across its product suite, and what reusable components we had were scattered amongst hard-to-find files.

Implemented code didn’t always match Figma mockups, either, so the shipped products weren’t cohesive.

Growing pains

“I cannot remember which components are in which file.”

“Seems like everything is really siloed right now and people are going to have to push really hard to break those patterns.”

“There’s all this stuff, I feel like I never find the correct place.”

Components in the design system

A sample of some buttons, block-style links, and typography styles

Laying the foundation

I conducted research with designers and developers to start iterating on the design system, which began with workshops in which we outlined our principles and prioritized elements.

Because there was also a need for improved internal processes, I reorganized our Figma files and wrote various guides for onboarding, contribution, and file setup.

I scaffolded a documentation site where we embedded Figma assets, Storybook code, and usage guidelines.

As the design system grew, I led internal marketing (aka evangelization), because even the most useful design system will fail if people don’t know about it or how to use it. Not everyone knows what a design system is, either, so those early stages are crucial to instill understanding and get buy-in.

Component documentation

Usage guidelines for typography and content

Ongoing research

I continue to interview designers on a weekly basis, while my engineering lead does the same with our front end team. We use insights from our research sessions to identify pain points and prioritize work for the next sprint.

I also added small but impactful touches to our documentation site—like a persistent survey link in the footer—to get feedback that will help us keep improving.

Impact

People now report checking the design system for a component before creating one on their own—a huge win for us, speeding up our process in just seven months.

Check out Boba for yourself at our always-evolving documentation site.

Some of the buttons in the design system
Product refresh for Uber ATG