Design systems are used by companies and organizations to create a set design standard for all of their products so that the company’s information is cohesive and organized.
Every summer, BRIDGEGOOD’s UX design apprentices create a new design system on Adobe XD for the nonprofit organization that apprentices will also use in their own designs throughout the duration of the apprenticeship. In the 2021 apprenticeship, there were 19 apprentices total. We were split into 3 teams and each team created their own design system. After presenting our design systems to our stakeholders, we voted to combine all three design systems.
Two apprentices and I were in charge of this design system project (i.e., combining the best parts of all 3 design systems). We accomplished this by using BRIDGEGOOD’s existing brand guidelines and by identifying user pain points in the previous year’s design system.
Visual branding is crucial to an organization’s image, however, an organization’s tone and voice are just as important. BRIDGEGOOD presents itself as an inclusive, diverse, and welcoming organization; therefore its copy must reflect those same principles. As a result, I highlighted four key adjectives that they should follow when writing copy for BRIDGEGOOD. These four adjectives are inclusive, trustworthy, supportive, and empowering.
Colors are a key component of BRIDGEGOOD’s brand as they are known for their signature blue and yellow. Consequently, my team and I knew changing those colors would drastically affect our brand’s image and user loyalty, so we opted to keep those colors in our design system. However, for the other colors BRIDGEGOOD uses, we decided to implement two lighter colors, two high contrast colors, and two grays. For this design system, every color has an assigned role and since there are only ten colors, it is easy to modify and customize existing products.
BRIDGEGOOD uses Roboto across all of their products, so we were not able to change the font. However, this was not a problem because Roboto is legible and readable in its regular, medium, and bold weights. As a result, we were able to use different font-weight and sizes to establish hierarchy. For example, the largest size designers can use is 50 px (H1, bold) whereas the smallest size is 14 px (H6, regular). Our team was originally considering implementing a 12 px size but I specifically advocated for 14 px as the smallest size we should use because studies have shown that 14 px is the smallest size a font can still be legible in.
I was also in charge of creating the button components. In theme with our simplistic design system theme, I only created three button sizes: large (22 px), medium (18 px), and small (14 px). The colors and typography are all in line with the colors and typography mentioned above. Additionally, I created underlined states and search bars that will be consistently used throughout BRIDGEGOOD’s digital products.
BRIDGEGOOD’s icons function very similarly to their buttons. There are only three states (default, active, and inactive). We also show what these icons will look like on a Royal Blue background. The viewer will be able to see the icons clearly because the icons turn white on a darker background.
Grids help build the foundation of a design, so we paid careful attention to what types of grids we used. For desktop, we decided to use a four-column grid because, for most pages, there are lots of images and minimal text, so the text can be concentrated in a more narrow space without the space appearing cluttered and busy. The only exception to the four-column rule would be on our pages with square posts, where we would use a three-column grid instead. For mobile and tablet, we decided to use a two-column grid because the content is concentrated in a much smaller space.
While researching the existing BRIDGEGOOD website, we noticed that it was hard to differentiate between what buttons and icons were clickable, so we decided to dedicate a page to make a clear distinction between what is clickable and what is not clickable.
Lastly, we provided a note to only include context-relevant images on the website.
Check out my team's finalized design system on Adobe XD!
ADOBE XD LINKThanks for scrolling this far!If you want to reach out, check out the links below:
