For this project, I was tasked with developing a scalable and cohesive design system for GoFundMe. As a donation platform with a global impact, the design needed to reflect values of empathy, inclusivity, and trust. The goal was to establish a system that not only aligns with GoFundMe’s brand but also simplifies development, enhances usability, and ensures consistency across the platform.

Gofundme positions itself as the world’s largest fundraising platform, aiming to connect people, causes, and charities with those who can offer support.

The first step was to identify the core values which emphasise empathy, impact and  inclusivity.

The next step at this stage was to investigate the competitors like Zeffy, Spotfound & Givebutter in order to identify existing patterns to inform my design decisions.

I conducted an interface inventory of the platform by simply grabbing screenshots of each component variation. My targets were foundational components of the interface in order to identify inconsistencies and ensure uniformity across the platform going forward.

- Alert
- Button
- Checkbox
- Inputs
- Cards

The token structure I incorporated starts withSystem name - I have used the initials “gfd” dedicated name of the company (Gofundme)

Foundation type - The most common foundations are color, type, space, and radius.


Category - I included foundation types that have categories as part of the token. e.g Type/typography will have categories like Heading or body while colours will have categories like base/primary, neutral and categories of accent colours.

Scaling increments - I used scaling increments to define the different values of a category. e.g 100 - 400 ,sm - lg      1 - 4

One of the Font family used on the site is “Helvetica” which is what I will build upon because of its brand alignment, compatibility, neutral appearance and legibility.

Considering the most used text styles across the platform, I have created a type system that accommodates various use cases.

Header | Body | Labels | ButtonScaling

Increments - sm, md, lg & xlLine Height - Multiples of 8Letter spacing - 1.5%

I used a spacing scale in multiples of 4px because it has more granularity and can easily fit nicely on different screens. It also aligns with the base-8 numbering system, which is compatible with many device screen, ensuring consistency in different screen sizes. It gives a more harmonious and visually appealing interface considering we have used multiples of 4 & 8 for type as well..

I made a series of 20px icon within a 24px square, following Google’s Material Design practice of leaving a 2px space around for clean visual separation, ensuring the icon is easy to recognise and looks good anywhere it’s used. Drawing inspiration from Google’s approach helps maintain consistency and familiarity in design.

I built a series of components considering there Properties, Anatomy, User interaction, Layout & Spacing.

This components included
- Buttons
- Alerts
- Checkbox
- Inputs
- Cards

I focused on the components used across the website and could be used to build patters like forms, navigations e.t.c. and prepared documentation for each for easy handoff to developers and utilisation for Designers.