Design System Starter Kit

Creating a Design System Starter Kit has allowed the Unfold Product team to work more efficiently, use best practices, and most importantly - focus on the fun stuff. Here’s a walkthrough of how we built the DS starter kit, and why it’s so valuable.

As an agency, we have this amazing opportunity to work with a number of different clients on a number of fun projects. As exciting as these projects are, our clients also have deadlines for product launches or investor presentations, which means that our time is limited; and it’s often split between pushing designs forward and cleaning them up. Designing without a system in place caused a slew of problems and disorganization.

While design systems are incredibly helpful for teams to stay organized, they’re most applicable to in-house teams with long term, large scale projects. The larger the project, the more important it becomes to create design consistency, hence the need for a design system. Agencies on the other hand, work with a number of clients, all with different needs from a design system. It’s not exactly a “one size fits all” situation.

We realized that we don’t need a design system, but something a little more flexible to account for the varying needs of our clients. We made a few important distinctions to help us determine our exact needs.

Now that we determined we needed a design system starter kit rather than a design system, the next step was to define our requirements. In other words, what would make this successful?

We started off by building base components* for two primary reasons:

1. The team could build atomic components by referencing their base components.

2. Building atomic components would allow the team to quickly and easily make changes without manually changing each component.

*A base component, or master component, is the singular source of truth for all other components. Components that are built off of the base component will inherit its traits, meaning any changes made to the base component will make changes to all components that reference the base component.

We also needed to account for a variety of shapes, sizes, and layouts for most of the components, so that the team wouldn’t be pigeon holed into using only one.

We created a process that would help maintain organization and facilitate a smoother transition into its usage. It’s also meant to help the DS starter kit organically grow along with our clients’ needs.

Remember, the design system starter kit is intended to be just a “jumping-off point” for our product team, allowing us to hit the ground running on design and work more efficiently. The sooner we’re able to get the tedious design elements out of the way (ahem, input fields), the sooner we’re able to conceptualize our designs more.

The DS starter kit is definitely a work in progress, as we continue to fine-tune the process and further build it out. Even still, creating this has helped our team deliver more consistent designs, robust design systems, and innovative products to our clients.