Creating a Sustainable Design System for Code for Chicago
Building a design system from scratch that is sustainable for future volunteers and can be leveraged by other brigades in the Code for America network.
Task
UI/UX Design
Tools
Figma, Trello
Project Overview
Code for Chicago (CfC) is a brigade of Code for America, a non-partisan, non-political 501 organization founded in 2009 to address the widening gap between the public and private sectors in their effective use of technology and design.
I joined the team as a UI/UX Designer in October 2022 and worked alongside other designers and developers on this project to completely re-design the CfC website and design system (Handshake). Our goal was to not only make the website look more visually appealing, but also improve the user experience for potential volunteers or anyone interested in learning more about CfC.
Helper Text
Helper text is copy that is meant to be supportive and help the user provide further guidance without taking attention away from the primary copy. My task was to create a component in Figma that aligned with the design requirements:
Utilize the established colors in Handshake.
Ensure accessible colors & text, by WCAG AA standards.
Continue using the pre-established Handshake design decisions defined by the initial form field.
Create helper text that providers user instructions on how to complete a task.
Make sure that the helper text doesn't take attention away from the primary copy.
Goals
Footer
The list pattern is a visual way of listing ideas and concepts as opposed to using bullet points. My task was to re-create a responsive list pattern in Figma that aligned with the design requirements:
Use the existing card pattern in Handshake as a baseline.
Include an icon followed by a header and some copy.
Follow the type hierarchy established in Handshake.
Prioritize donation, followed by the logo, a way to access the individual pages, and then social media links.
The user should be able to access other parts of the website.
The user should know the name of our organization.
Goals
List Pattern
The footer is located at the bottom of each page and contains a CTA button for donations, navigation links, social links, and the Code for America tag. My task was to create a component in Figma that included:
"Code for America Labs, Inc. is a non-partisan, non-political 501(c)(3) charitable organization" tag
The logo
Donate button
Social media links
Create a responsive pattern for mobile, tablet, and desktop.
Reduce cognitive load by making it easier for users to scan through the section using icons and labels.
Goals
