John Egan

Building the Techstars Design System

The Problem

What started out as a single accelerator in Boulder, Techstars had scaled to over 150 countries worldwide, and amassed over a decade of inconsistent styles, leading to a disjointed user experience, and made our apps & websites difficult to maintain.

In 2020, we led a rebrand for Techstars and this was the perfect opportunity to rethink our design system, or lack thereof.

The Team

I led design & strategy for this project and worked with another designer and the engineering team to implement it. We built the system in figma in Agile two-week sprints and worked with the engineering team to implement it in Storybook and across our digital properties.

My Process

Discovery

We conducted an audit of our 30+ apps and websites to 1) see where we went wrong and 2) all of the scenarios, screen sizes, and platforms that the system would have to accommodate.

Surprise surprise, our audit discovered a frankenstein of same but different colors & typography, loosely defined unrepeatable components, and most of our stuff was an accessibility nightmare.

Goals

Understanding what a mess we had built over the years, I set out to create a super simplified system with the following goals in mind:

Accessibility

As a global brand, with programs in developing countries and rural communities, we need to design lightweight components, and get rid of these full-bleed green image treatments.

Consistency

We need to provide a cohesive visual experience and ensure users don't have to wonder if they're still on a Techstars-owned domain?

Extensibility

Techstars co-brands several of it's products with companies like Google, Amazon, and Microsoft. In addition, we have thousands of alumni companies that have gone through our programs, Techstars should become a vessel to let these brands shine without stealing the spotlight.

Scalability & Speed

Lastly, the company is scaling at an incredibly rapid pace, how do we build a system to grow with it? And how do we build a solid foundation so we don't have to reinvent the wheel every time we kick off a new project?

Building the system

We used the principles of Atomic Design to build our system in Figma. With their recent addition of variants, when it was all said and done we ended up with less than 30 total components that could flex across our products.

The Finished Product

While a design system is never really "finished", we established a solid foundation to build super slick and accessible digital experiences. This not only helps us more quicker, but also to spend more time on things like ideation and user testing.

Let's Work Together

I'm currently at Techstars, leading our user and brand experience. If you have a project in mind or you just want to chat, please email hey@johnegan.io to get the ball rolling.

Get In Touch