.png)
BRIDGEGOOD is an Oakland based non-profit that helps 13,000 emerging creatives annually to build the skills they need to thrive as leaders in the design and technology field.
As BRIDGEGOOD expands through California and beyond, they actively work to keep their brand accessible and inclusive.
The nonprofit asked my team to develop a design system for a new web application. The guidelines my team and I created were made to help designers and developers feel confident as they incorporate consistency into a new web application using components and patterns that embody the BRIDGEGOOD brand.
The Product Lead asked my team and I to examine the BRIDGEGOOD.com website to serve as inspiration for the design system. This helped us focus on key elements to build a strong foundation.
The BRIDGEGOOD.com website has been worked on for the past 6 years by groups of 20 different designers each year. My team and I discovered this led to inconsistency throughout the site.
For future applications designed by BRIDGEGOOD my team worked to reimagine a design system built on trust and reliability.
Below are the listed sections of the design system that I specifically worked on.
The complete project is available at the following link.
The cover of our design system was significant to set the tone and voice of the BRIDGEGOOD brand.
Early in the process of the apprenticeship my teammate, Aly Tsai, created a concept of hands with puzzle pieces to demonstrate the values of the nonprofit. I used this as inspiration for our cover. I felt it was important to continue using the different skin tones Aly had. When people from various backgrounds work together they build for the greater community which provides an inclusive experience for all. In addition to this I connected the puzzle pieces as a representation of designers combining their perspectives together effectively.
Based on the current BRIDGEGOOD colors we wanted to adhere to WACG (Web Content Accessibility Guidelines) standards.
We focused on using 2 primary colors to improve consistency. By incorporating the two main brand colors of BG Blue and BG Gold we help strengthen brand recognition. Our secondary colors were used for hover states and other digital artifacts.
I incorporated a grayscale for the text which allows for the designer to focus on accesibile aspects of design such as contrast and size first.
Black 900 used for icons and paragraph text is NOT pure black. I made this design decision because pure black text on a white background can cause eye strain after reading for long periods of time.
I chose to use four grays
This allowed for users to focus on the material while still developing a distinction between active/ disabled and hover/inactive all while being accessible.
BRIDGEGOOD advocates for accessibility and inclusion in design. I felt it was important to include a quick reference sheet for users to follow WCAG standards with our colors in a way that integrates accessibility.
The Pass ✅ means that the two colors from the table have a contrast ratio above 7.00 to 1.
According to WCAG guidelines this means the normal text, large text, graphical objects and user interface components involving these two colors pass web accessibility for both WCAG AA and WCAG AAA.
The Fail ❌ means that the colors matched on the table have a contrast ratio below 7:00 to 1.
Additionally this was created for scalability in mind to accommodate growing user base.
This section is important as it helps establish a hierarchical structure for the website, by grouping content.
Terminology
BRIDGEGOOD uses 3 different tab states to show engagement within the web application.
For accessibility, each tab will be titled in a clear and succinct manner for the user to understand the contents within the tab panel.
Above is an example of how the desktop panel would look with the various states. The first example using the bottom border design and the second example using the contained design.
The Mobile Panel showcases the use of the mobile tabs in their different states.
These examples will help designers know how to follow the guidelines clearly.
Our logos are simple, accessible and reflective of the tech field. The logo was optimized for viewing in different formats so it can be recognizable at a large scale or as a small icon for a desktop tab.
Lessons learned...