Blueprint Design System

GoFundMe is an online fundraising platform that enables people to receive donations in times of need. The Blueprint design system was created to provide a streamlined design and development process, UI standards and documentation for future GoFundMe products.

The goal for the Blueprint design system was to improve cohesiveness on the GoFundMe platform and increase efficiency of the design and front-end development process. As the lead systems designer, I worked alongside the entire design team and front-end engineering team over the course of one year to launch the multiple iterations of Blueprint.

Prior to introducing the Blueprint design system, there wasn’t a clear process for introducing new design components or auditing existing components. This led to coexisting versions of the same UI components which caused inconsistent user experiences and engineering debt. It was a challenge to create a design system while many new projects were in flight and existing products had conflicting components. Eventually, I figured out a process to discover, decide, document, and design a basic UI library.

I developed a specific design system road map that engaged every designer and front end developer in building a foundational component library. We utilized the atomic design approach to audit existing variations of atoms, molecules, and organisms. Every week, each designer was assigned to a different component and proposed a solution that would fit the most product use cases. Simultaneously, all team members would audit their projects and update old components. Finally, front-end engineers would provide technical feedback and a proposal for implementation.

The GoFundMe campaign tile was an example of a organism we examined in this process. Historically, there were three different versions of the campaign tile: discovery, management, and marketing tiles. After much discussion, we justified the need for these three different versions on the platform. However, through process we were able to bring these three versions in closer in visual alignment.

Check out the impact of the Blueprint design system on the GoFundMe homepage .