BRIDGEGOOD Design System
Launched July 2022
Time: 3 Weeks (June - July 2022)
Role: Design Lead, UI/Visual Designer, UX Researcher & Content Writer
Tools: Adobe XD & Trello
BRIDGEGOOD is an Oakland-based non-profit design agency that provides early career creatives with the tools and skills they need to succeed as designers in the tech industry.
As the nonprofit continues to grow, BRIDGEGOOD works to keep its brand consistent across different platforms and screens.
The nonprofit asked me and my team to create a visually consistent design system that embodies the BRIDGEGOOD brand.
Crafting the new design system was split into two phases.
Problem Space
After auditing BRIDGEGOOD.com, we discovered inconsistencies that helped us identify the focal point of our reimagined design system.
Main Issues:
- 11 Button Variations with inconsistent hover states
- 22 Colors, mainly shades of gray
- 10 Font Sizes in four weights, switching between pixels and REM without a consistent way to scale or instill hierarchy
- Three Input Field Design Variations
- Three Different Icon Libraries — BRIDGEGOOD custom icons, Google Material and Font Awesome
- Accessibility Issues, not entirely ADA & WCAG compliant
Problem Statement
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.
Opportunity & Solution
There’s an opportunity to reimagine a completely new, visually consistent design system for BRIDGEGOOD that builds trust across platforms and screens.
How might we develop a new design system that embodies trust, consistency and accessibility?
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 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.
Below, I listed the sections of the design system that I specifically worked on. But the complete project is available at the following link.
View the Design SystemTone & Voice
We started with BRIDGEGOOD’s tone and voice because it would help establish a cohesive message across the design system.
Our first iteration of tone and voice described a combination of the Everyman and Creator brand personalities.
Everyman centers around the belief that everyone matters and each person is created equally. While Creator encourages originality and represents those that like to discover something new.
Everyman communicates respect, fairness and altruism and the Creator is creative, imaginative and non-conforming
These two identities embody BRIDGEGOOD’s mission to create a welcoming space for creatives and communicate the common goal to #DesignForSocialGood.
Tone & Voice v2
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.
Color
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 space.
Color v2
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.
Type
Roboto is the only typeface used throughout BRIDGEGOOD.com. However, it is shown in 10 sizes and four weights, using both REM and pixels.
This disarray makes it difficult to establish a clear and proper hierarchy. The site needed a consistent and understandable way to scale text.
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 accessible sizes and weights for responsive screens but realized we would need a more robust type scale for BRIDGEGOOD’s new design system.
Type v2
After more research and consulting with outside designers, we built a type ramp for three Roboto weights.
We abandoned light/300 to ensure accessibility, and created a 4 pixel/0.25 REM scale to easily scale up and down when styling text.
We encourage the use of REM for accessibility when users need to scale up to improve readability. We also included 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.
Buttons
In order to create a cohesive button library, we had to address the inconsistencies on BRIDGEGOOD.com.
The site uses four colors to style different buttons — BRIDGEGOOD blue and gold, white and dark gray.
Our goal was to simplify the color usage and style to instill clear directional cues that universally guide users.
We used BRIDGEGOOD’s signature blue to invoke feelings of trust which aligned with the focus of our reimagined design system.
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.
Buttons v2
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.
Logos
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.
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.
It was necessary to implement logo usage guidelines to instill the logo’s integrity on future BRIDGEGOOD platforms and outside of the nonprofit.
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.
Logos v2
To keep our guidelines specific, we added acceptable logo displays along with their minimum width to optimize readability.
Anyone can discover exactly how to display BRIDGEGOOD’s logos — ensuring ease of use and understanding.
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.
Icons
BRIDGEGOOD.com icons come from three libraries — BRIDGEGOOD, Google Material and Font Awesome.
Custom BRIDGEGOOD icons represent originality in the community, while Google Material and Font Awesome provide credibility through trustworthy icon libraries.
Our focus for updating icon usage was to detail a consistent way of communicating core ideas and actions.
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 for traditional icon use, we can provide a seamless visual experience when communicating key ideas to users without the confusion of switching between icon styles and meanings.
Form Controls
Form fields require a level of trust between user and UI to submit necessary information to platforms.
BRIDGEGOOD.com needed to solidify this trust with a 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.
Reflection
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.
View the Design System
