LEISURE PROJECT
Constellation Design System
Designing a Scalable and Inclusive Universe for Digital Products
As a product designer, I was eager to dive deeper into the world of design systems. Driven by curiosity and a passion for learning, I embarked on building my own design system in my spare time. This project not only helped me refine my design skills but also provided valuable insights into creating scalable and cohesive systems for product development.
Product
Constellation Design System
Vertical
Design System
My Role
Product Designer
Skills
UX & UI Design,
Product Thinking,
Interactive Prototyping,
Timeline
2023-2024
Introduction
What is Constellation Design System ?
The Constellation Design System was a personal project that allowed me to experiment with and improve my design skills while also learning about the nuances of building scalable, reusable designs. The name "Constellation" reflects the meaning of this project: much as constellations combine stars into meaningful patterns, this design system seeks to connect various design aspects into a unified, efficient framework. Though initially designed for personal growth, the system evolved into a robust toolkit for creating MVPs and more sophisticated applications.
Purpose
Why was it created at first place?
After working on a cross-functional product team with a designer in charge of a design system, I was motivated to learn and progress. This encounter demonstrated the complexity and value of design systems, motivating me to design my own to practice and absorb these skills.
Who was Intended Audience?
Initially, the system was not tailored to any specific target. However, as the project progressed, it became clear that Constellation could be a versatile basis for developing MVPs and possibly scaled applications.
Grid across key different breakpoints
Design Process
Key Points
Research & Inspiration
To better grasp the best practices and ideas underlying design systems, I undertook thorough research on prominent design systems such as Material Design, Polaris, BASE and Carbon Design. This helps to discover common patterns, principles, and methodologies that underpin successful design systems.
Methodology : Atomic Design
The foundation of Constellation was built on Brad Frost's Atomic Design principles. The system encourages reusability and consistency across multiple use cases by breaking components down into atoms, molecules, creatures, templates, and pages.
Example of nested component development
Guiding Principals
A set of core principles guided the system's development:
Tools over rules: Focused on creating practical tools rather than rigid guidelines.
Cohesion over consistency: Designed for intuitive use, allowing consistency to emerge naturally.
Inclusivity: Ensured accessibility by considering users of all abilities.
Scalability: Developed components and tokens to adapt to future growth.
Design tokens as a foundation: Leveraged tokens to define the system's core aesthetics and maintain visual coherence.
System Structure
Typography: "Poppins" was chosen for its readability and modern look, with a clear typographic scale ensuring visual hierarchy.
Color Palette: A core palette of primary, secondary, and accent colors was established, complemented by thematic palettes for specific states and dark mode.
Component Library: Components were designed with variants and documented with clear usage guidelines to support diverse applications.
Example of table as template based on atomic design
Challenges and Learnings
One important problem was ensuring that components remained flexible without creating fragmented designs.
To address this, I implemented higher-level design patterns that directed the meaningful combining of components. These patterns ensured intuitive interactions and a consistent user experience.
Key Learnings:
Iterative Design
Progressing through refinement cycles highlighted that design systems are never completely "finished" but rather adapt in response to feedback.
Accessibility
Building for inclusivity deepened my understanding of accessibility principles, such as color contrast and responsive font sizes.
Documentation
Clear and concise guidelines were vital for usability and maintenance.
Scalability
Atomic principles allowed the system to adapt to different needs while maintaining its integrity.
Outcome
Success Metrics
While the design system has not yet been implemented in a live project, its design progress served as a significant personal milestone. It demonstrated the potential to be used in building scalable, cohesive MVPs for various products.
Public Sharing
The Constellation Design System remains a personal project. However, its completion has inspired ideas for future use in real-world applications and potential public sharing as an open-source resource.
Spry