UX Design
Visual Design

Aspire Design System

A design system built to address UI inconsistencies, improve workflow efficiency, and ensure accessibility.
My Role
UX/UI Designer*
Tools
Figma
typescale.com
Adobe Colors
* While I was actively involved in defining the product vision, conducting user research, mapping our user flows and various other aspects of the product, for the purpose of this case study, I'll focus on my work as a UX/UI Designer.

Kickoff & Chaos.

My journey at the Center for Societal Aspiration began when I joined as a UX/UI Designer, tasked with designing a platform that connects people with the right resources through a personalized approach. In our startup environment, we took an scrappy, outcome-based approach—aimed at saving time ✅ and speeding up development ⬆️.

At first, I set up typography styles and created a color palette with extensions—just enough to make something usable, even if the Figma file wasn't perfectly organized. This method worked well from a product standpoint, but as the designer, I soon found myself overwhelmed 🥵 by the constant need to navigate between pages, update components, and keep track of countless details.

Committed to delivering a prototype, I decided to wait until the business requirements were sorted out before tackling these deeper design issues. Then, drawing from my experience in developing Brand Guides and Brand Identities, I realized I could solve these challenges by creating a ✨Design System✨.

My Journey.

Issues with the design.

🗃️
Disorganized File Structure
🧱
Inconsistent Designs
ℹ️
Accessibility Concerns

Impact on my workflow.

🔁
🐌
😵‍💫

It was clear that I needed to...

Create a Design System in Figma to — reduce inconsistencies ⬇️, improve accessibility 👌🏻, and streamline the workflow 🚀.

The Plan.

🏢
🧰
⚙️

File Structure.

Taking inspiration from the concepts of Object Oriented Programming, specifically Abstraction, I created two distinct files – one for the Foundational pieces, and another for Components – to isolate them from wireframes of the designs.

Foundations.

Components.

Design Foundations.

Colors.

Typography / Desktop.

Typography / Mobile.

Color Tokens.

Layouts and Spacing.

Styles.

Key Components.

Icons.

Buttons.

Checkbox.

Input Field.

Outcomes.

🗂️
🪄
👥

What I Learned.

🔍
🧭
📘