BRIDGEGOOD is a nonprofit design agency based in Oakland, California.

The organization provides accessible design resources for creatives including a portfolio builder, job board, apprenticeship program, creative community, VIP events and more.

As the nonprofit continues to grow, BRIDGEGOOD works to keep its brand consistent across different platforms and screens.

Create a visually consistent design system that embodies the BRIDGEGOOD brand.

Crafting the new design system was split into two phases.

In phase one, I worked with a team of four UX Design Apprentices (Laurie, Sandra, Davis and Elaine) to audit BRIDGEGOOD.com and improve its existing design system.

In phase two, I led a team of seven UX Design Apprentices (Jenny, Sanjana, Elvira, Hilary, Anna, Tori and Laurie) to finalize BRIDGEGOOD’s new design system with feedback from our Product Lead (Shaun).

After auditing BRIDGEGOOD.com, we discovered inconsistencies that helped us identify the focal point of our reimagined design system.

Our problem space was defined by the lack of consistency in the current design system negatively impacting the site's trustworthiness.

BRIDGEGOOD works to create lasting relationships with creatives that come to their site. However, to form the initial point of contact and ensure a lasting relationship, the site needs to communicate trust through consistent visual elements and overall tone.

There’s an opportunity to reimagine a completely new, visually consistent design system for BRIDGEGOOD that builds trust across platforms and screens.

By reimagining an entirely new UI library that builds a trustworthy and accessible foundation for the average person to use and understand.

During each phase, we provided clear context and documentation of design decisions throughout and visually designed the new system.

We presented each iteration to stakeholders and finalized the design library for future use. With the new design system, anyone can understand who BRIDGEGOOD is and use the UI elements to accurately #DesignForSocialGood.

We started with BRIDGEGOOD’s tone and voice because it would help establish a cohesive message across the design system. We needed to solidify the identity of our written content to describe UI elements and communicate their use.

Because BRIDGEGOOD encourages community building and growth, we wanted to ensure that our description of tone and voice reflected that.

Our first iteration of tone and voice described a combination of the Everyman and Creator brand personalities.

These two identities embody BRIDGEGOOD’s mission to create a welcoming space for creatives and communicate the common goal to #DesignForSocialGood.

Our second iteration, with feedback from our Product Lead, further dissected what it means to be inclusive and how someone can convey these brand identities through written content.

We renamed “Everyman” to “Everyone,” reflecting BRIDGEGOOD’s diverse audience and push to help women — specifically women of color — break into the tech industry.

We also added a chart detailing how to accurately communicate in a way that reflects our established tone and voice. We included do’s and don'ts, and also a description of what each characteristic means in reference to the BRIDGEGOOD brand. This way, people know how to sound and write like BRIDGEGOOD.

BRIDGEGOOD.com uses 22 colors across the site, mainly shades of gray. Such an extensive color palette creates an inconsistent and uncoordinated look.

We needed to condense the existing palette to ensure clarity and intent with BRIDGEGOOD’s color usage.

During our first iteration, we reduced BRIDGEGOOD’s shades of gray from 12 to two. To mimic the use of different grays, we encouraged opacity adjustments to keep the color palette consistent but add variety.

We also adjusted our success green default and hover states to a brighter shade. The alteration better complements BRIDGEGOOD’s online environment, which features lighter colors and bright illustrations to help create a welcoming and encouraging digital space.

To better explain BRIDGEGOOD’s intentions behind color usage, we divided the palette into two sections: Brand and UI.

This way, people using the design system know which colors specifically represent the BRIDGEGOOD brand and which colors aid in communicating messages to users across the platform’s interface.

Roboto is the only typeface used throughout BRIDGEGOOD.com. However, it is displayed in 10 sizes (two in pixels, eight in REM) and four weights — light/300, regular/400, medium/500 and semi-bold/600. This disarray in styling makes it difficult to establish a clear and proper hierarchy.

The site needed a consistent and understandable way to scale between font sizes using one unit — pixels or REM.

We initially created one type scale in pixels, pulling from BRIDGEGOOD’s current type usage and Material Design, Google’s open-source design system, for inspiration.

We researched common sizes and weights for desktop and mobile but ultimately realized we would need a more robust type scale for BRIDGEGOOD’s new design system.

After more research and consulting with outside designers, we built a type ramp for three Roboto weights — regular/400, medium/500 and bold/700. We abandoned light/300 to ensure accessibility, and created a 4 pixel/0.25 REM scale to easily size up and down when styling text.

We encourage the use of REM for accessibility when users need to scale up to improve readability. In addition, we provided both pixel and REM to demonstrate their relationship to the root font size of 16 pixels.

This way, designers can establish proper hierarchy throughout the site while remaining consistent and accessible.

In order to create a cohesive button library to guide users and their actions, we had to address the existing inconsistencies with color and size on BRIDGEGOOD.com.

The site uses four colors to style different buttons across the site — BRIDGEGOOD’s signature blue, BRIDGEGOOD gold, white and dark gray. This made it difficult to create a comprehensive guide easily detailing the hierarchy between button styles.

Our goal was to simplify the color usage and style of our primary, secondary and tertiary buttons to establish clear directional cues that universally guide users across platforms and screens.

Our color choice followed our push for accessibility, creating a substantial contrast against the majority of white backgrounds across the site.

We also created a set of destructive button styles to communicate irreversible actions to users, a necessary addition to a site with many customizable elements.

Following research around button responsiveness and feedback from our Product Lead, we adjusted our buttons to improve target size, usability on smaller screens and overall communication.

We expanded our button styles to include text, text with icons and icons alone for situations requiring little to no written content. As buttons are most important in the conversion process, we wanted to ensure ease of use and understanding.

Our finalized button library is a guide that instills hierarchy and intent when creating accessible buttons for any screen.

BRIDGEGOOD’s logo variations provide the tone, aesthetic and values of the brand. Alterations to the logo through improper displays like distortion interrupt the connection between the logo and the brand’s voice.

It was necessary to implement logo usage guidelines to instill the logo’s integrity on future BRIDGEGOOD platforms and outside of the nonprofit.

In our first iteration, we displayed all BRIDGEGOOD logo variations along with a list of do’s and don’ts in regard to color and sizing.

To improve our guide, we researched IBM and Google’s logo usage for inspiration. We realized it would be more beneficial to specifically show what to do rather than tell what not to do.

To keep our guidelines specific, we visually listed acceptable logo displays along with their minimum width to optimize readability.

BRIDGEGOOD logo variations include designs with and without backgrounds for light and dark environments. This way, our guide details the approved versions of the BRIDGEGOOD logos fit for any situation.

Anyone can discover exactly how to display BRIDGEGOOD’s logos — ensuring ease of use and understanding.

BRIDGEGOOD.com sources icons from three different places — BRIDGEGOOD creatives, Google Material and Font Awesome.

Custom BRIDGEGOOD icons represented originality in the community, while Google Material and Font Awesome provided credibility through common icon libraries.

When it came to custom BRIDGEGOOD icons, we needed to explain three core characteristics — spacing, interactivity and color.

Icon spacing is detailed through the padding, border radius and dimensions of each icon to create an overall uniform look, increasing credibility and trust during use

Interactivity is divided into actionable and informative icons — solid and round backgrounds indicate that they are clickable, while icons without backgrounds are used to communicate an idea to further guide users on the site

The colors used to create BRIDGEGOOD icons come directly from the approved color palette to keep the consistency between messaging and the brand

For improved consistency, we phased out the use of Font Awesome.

By using Google Material alone, we can provide a seamless visual experience when communicating key ideas to users without the confusion of switching between icon styles and meanings.

Form fields require a level of trust between user and UI to submit necessary information to platforms.

BRIDGEGOOD.com needed to solidify this trust through an overall uniform style and proper indicators. With an accessible approach, we aimed to design form fields that are fit for any situation and person.

Our goal while designing form fields was to ensure consistency in variety. We created assistive designs that help the user discern the proper information necessary to move forward in the form process.

We included styles with and without icons, entry specific fields and detailed states for increased usability. Our updated design informs users every step of the way with color, words and icons optimized for accessibility.

The final design feature fields of different lengths yet consist padding, color and font size. With the uniformity instilled in our form fields, users can feel confident knowing their information is secure with BRIDGEGOOD.

Entering this project, I had a personal goal for myself — keep consistency while elevating the diverse thoughts and opinions around me.

Figuring out how to balance diversity and consistency in one design system is key. As a team, we divided the work and came back together to create one cohesive product.

The volume of items needed made it easier for each team member to work in their own style. But, we welcomed feedback from one another and our stakeholders to confirm our creative direction which assisted in the uniformity. Once we confirmed the content itself, we could move on to the overall look of the presentation.

We ensured that differing opinions were voiced and acknowledged so that the design system truly mirrored our entire team. Now, we have a final product that represents our original goal: a trustworthy and accessible design system, understood by anyone.