Company
Dribbble: Scaling Design Systems Capstone Project
Year
2023
Type of Work
Design systems, branding, component libraries
In 2023, I enrolled in a rigorous 10-week Design Systems course, under the guidance of instructor Dan Mall. The curriculum delved into the construction of design systems at the atomic level, addressed when to deviate from the system, and how to adapt to drastic shifts in business objectives. As my capstone project, I established Astra — a design system for a fictional company named the Interplanetary Travel Syndicate (IPTS), later known as “Shuddle”.
​
This case study details the process of how I designed flexible components and the challenges I encountered while accommodating changes in artistic direction across the three applications in the IPTS ecosystem.
01
Goal
My goal was to develop three digital products, unified by a single design system, for IPTS, the Interplanetary Travel Syndicate.
​
IPTS, short for the Interplanetary Travel Syndicate, reached out to me with an ambitious vision: design three digital products that would help the company shuttle people to and from planets in the galaxy. When I joined the project, all they had was a logo and a company name. My mission was clear - design their interconnected products with by building an efficient design system that would be used as the backbone for all three applications.
02
Process
Step #1: Drawing inspiration from existing products and taking inventory of components
​
What problem is this design system trying to solve?
The goal of this design system is maintaining consistency and adaptability across IPTS's three applications. By establishing a standardized collection of components, styles, and guidelines, my design system simplifies the development process and makes sure that the IPTS products communicate a strengthened brand identity.
​
Are there similar products out there to draw inspiration from?
I sought inspiration from prominent designers on Dribbble and highlighted components I considered typical for each product. Within each product category, I identified and highlighted components that captured my attention as potential candidates for my design system.
02
Process
Step #2: Identifying patterns and creating wireframes
​
Can I find patterns across components of existing products?
Absolutely ”yes." The layouts revealed a bedrock of foundational components. It's worth noting that these patterns are rooted in core functionality rather than aesthetics.
​
How do I decide what should be part of the system?
I looked at the highlighted components above and asked myself "Which elements are employed three or more times across multiple sources of inspiration?" A definitive set of components emerged: Global Navigation, Local Navigation, Buttons, Tabs, Footer, Cards, Text Inputs, Stepper, and Chips.
02
Process
Step #3: Creating the component library and putting together the prototype
​
Can these components seamlessly fit into the design and purpose of all three products?
Yes, components were intentionally designed with extensive flexibility, offering customizable properties that can be enabled or disabled based on specific scenarios. The core functionality remains consistent, allowing for tailored adaptations.
​
Do the created components align with the brand's visual identity across all three products?
The design maintains a minimalist yet impactful approach. The foundational elements such as fonts, colors, icons, and spacing remain unchanged, ensuring visual coherence across the three products.
03
Challenge
The Brand’s New Identity
When stakeholders at ITPS rebranded their company as Shuddle, it required an entire overhaul of the design system. Shifting away from the ominous black and white theme, Shuddle was introduced as a younger, faster, more energetic brand that the design system had to adapt to. Fret not, Astra was ready for the change and delivered it seamlessly.
​
How do we convey the brand’s new identity through our design system?
By utilizing the component properties we've established, adjusting attributes could happen at the molecular and organism level.
04
Adapting
How do we ensure these changes aren’t compromising the components’ core functionalities?
I took advantage of altering the properties that were already established at a component level. I transitioned the original proposed colors into lighter hues and gradients - a more welcoming palette. I incorporated white space, drop shadow styles, rounded corners, and a friendlier font, all things that communicated softness and fluidity to every component.
​
Are there any additional components or variations that need to be introduced to accommodate the adaptations?
Astra's evolution involved expansion as well as alterations. While Astra 1.0 embodied minimalism, Astra 2.0 added stylized elements like fonts, colors, abstract shapes, gradients, and brought whimsical illustrations to the forefront.
Before & After
05
Lessons learned
Maintaining Functionality: Transitioning the design system to a new theme taught me how to retain components’ essential functionalities by manipulating its properties all while keeping the foundational structure the same. It meant learning how to add to a design system instead of breaking it.
​
Translating Identity through Visual Elements: I realized the power of visual elements in conveying a brand's identity. By aligning colors, typography, and imagery with the brand, a strong and unified personality developed.
​
Creating an Adaptive Future: I saw first-hand the importance of building flexibility into design systems for future changes. An adaptable framework ensures that the brand's design remains sustainable and responsive over time.