MS - UX & Information Systems
DemocracyLab - Design System
Responsibilities:
UX Designer
Project Duration:
May 2023 - Ongoing
Website:
What is democracyLab (DLab):
DLab connect skilled volunteers with the projects that need them. Open to everyone from individuals and established nonprofits to government organizations and for-profit social enterprises — DLab provide an open avenue for a better connection, more efficient collaboration, and increased impact.
DemocracyLab is a volunteer-based 501(c)3 non-profit organization, headquartered in Seattle, WA.
Why I thought there is a need of Design System
Upon joining democracyLab (DLab), I noticed design inconsistency caused when volunteer leave. To tackle this, I took charge of a design system for better continuity and collaboration between designers and developers.
How I got underway
Much like a skilled chef carefully selects and prepares ingredients before artfully plating a culinary masterpiece, I believe a design system's foundation is rooted in its spacing and grid. I began with spacing and grid because they lay the groundwork for an aesthetically pleasing and user-friendly design.
Spacing Blocks & Grids
I went with a 12-column grid for simplicity in dividing areas into halves, thirds, fourths, and sixths. Additionally, I created 8-point incremental spacers to maintain consistent spacing between various UI components.
Typography
The font for democracyLab wasn't a choice I made, as it had already been decided. I was responsible for finalizing the font size for both web and mobile applications. The base size I worked with was 16, and I implemented a scaling factor of 1.2 and 1.125 for web and mobile respectively.
Iconography
At democracyLab, we are required to utilize free icons. In the absence of a consistent icon library, volunteers were free to select icons based on their personal preferences. To ensure visual coherence, I introduced the practice of utilizing solid icons from fontawesome. Additionally, I established fundamental design guidelines, including a corner radius of 2dp and a stroke width of 2dp.
Color Palette
Colors for democracyLab is carefully curated to adhere to the WCAG 2.1 contrast guidelines and palette is quite extensive due to the diverse range of badges that need to be assigned and they are of different colors. Still, within these colors, some are regularly used by volunteers across components and messages - displayed in the image. All the frequently use colors I've categorized them into —Action, Critical, Link, Text, Background, Border, Icons.
Buttons
While it's commonly understood that designing a button is relatively straightforward, the challenge emerges when determining the appropriate button for a specific purpose. To address this, I meticulously crafted designs for buttons and their various states, encompassing Primary, Secondary, and Tertiary functions and added detail for various button.
Input Fields
The design of input fields and buttons often appears quite similar. To enhance differentiation and user-friendliness, I introduced text fields. This allows users to refer to label text once the placeholder text disappears. Additionally, I developed a range of designs, including error and warning states, to ensure a comprehensive and intuitive user experience.
Other Components
While there are so many elements that require attention, I've initiated the process by focusing on the primary components. Considering that I'm still in the learning phase and this marks my inaugural attempt at crafting a design system, I thought to show the progress I've made till now.
Next Project