BRIDGEGOOD Design System
This was a collaborative effort with an 8-person team to bring consistency to BRIDGEGOOD's designs. I researched, documented and built a chip library and action menu components so other designers could use them to streamline their work.
UI Design, Research
Responsibilites
UI Designer
My Role
8 people
Team Size
3 weeks
Duration
In order to have our designs at BRIDGEGOOD be consistent and streamlined, our internal Design System team build a robust design system that improved our overall process.
Overview
BRIDGEGOOD is a nonprofit design education organization in Oakland, CA that helps young creatives break into the tech and design industry through apprenticeship style programs.
Eight amazing team members completing the exhaustive endeavor of establishing a robust and thorough design system. Our design system library enabled us to streamline the design process allowing us to be time efficient. With our nine member team we divided and conquered to tackle this large sized project.
My Role
My Role: Chips, Chip Research and Action Menu's.
I eased the workload from my coworkers during a time when we needed to meet a tight deadline for our design sprint teams.
Chips & Action Menu's
Chips
Chip Research
Chip research was such a fundamental part of understanding how these elements can be utilized. I created these instructions to convey the recommended ways chips function and also included chip specifications.
Chip Library
To provide an extensive Chip library for our designers I created the chip components containing the following types: Regular, With Icons, With Checks, With X's, With Icon's & Checks, and lastly With Icons and X's. All of these types then included the various styles of chips: Filled, Outlined, Shaded, Shadowed, Shaded & Shadowed and Filled Shadowed. This totaled to 26 total options for our designers.
Chip Examples
To accompany the Chip instructions I created an example addressing each of the chip methods discussed which included input, choice, filter and action chips including a spacing display to suggest the amount of spacing used between chips.
Action Menus
Action Menu's
To ensure a comprehensive library of Hamburger Menus I developed 2 sets:
1 Round Cap set
1 Butt Cap.
Both of these sets included 3 types of colors to match the design system protocols:
White
Blue
Black
Samples of team's work
As a team we completed an extensive Design System library
Some of their examples include:
Icons
Color
Typography
Illustration
My Reflections
Thanks to Free Association for weekly feedback and check in's to ensure we produced a high end well developed robust design system for out teams.
Pictured: Myself with Kris Piliero from Free Association
I learned how important it is to focus on the building blocks of a project since it allows the design process to be streamlined. Throughout the process we checked in with Free Association and BRIDGEGOOD'S executive director, Shaun Tai, for feedback on our work. our finished deliverables received excellent praise for how robust our work was.
