STAR Design System
Creating a design system for the STAR mobile and web platforms
Client
Non profit
Services
UX Research and Design
Skills
Design System design, User Research, User Testing, Prototyping
Overview
I built the Star Design System from the ground up to develop the STAR mobile and web platforms. With clear design principles and product vision in mind, I defined every aspect of the system, establishing its foundational structure and guidelines. From there, I designed and developed a full suite of components, ranging from basic elements to advanced interactions.
A design system is like a playbook for creating a cohesive and consistent visual and interactive experience across all digital products.
Context
Atoms are the basic building blocks of the interface, like buttons, input fields, and labels. They are the smallest, indivisible elements that serve as the foundation for more complex components.
Molecules are groups of atoms bonded together to work as a unit. Examples include a search bar (input field + button). And Organisms are groups of molecules and/or atoms. Example include a header that contains a logo, navigation, and a search bar.
Followed the Atomic design methology
What is a Design System?
Why Roboto?
The Process
Why a design system?
Type
Color
Grids and Spacing
01
A design system ensures consistency, scalability, and faster product development, giving a new product a strong visual identity and efficient design-to-development workflow from the start.
02
It serves as a single source of truth to keep designers, developers, product managers, and stakeholders aligned.
01
Versatility & Readability
Roboto offers a clean, modern look with excellent legibility across different screen sizes and resolutions, making it ideal for both web and mobile interfaces.
02
Neutral & Geometric Aesthetic
Its balanced letterforms combine mechanical precision with a friendly, approachable feel, ensuring clarity without sacrificing personality.
03
Extensive Font Weights & Styles
Roboto provides a wide range of weights (Thin to Black), allowing for a flexible and scalable typography hierarchy within the design system.
Mobile Grid System
Desktop Grid System
Spacing
Elevation
Elevation is the distance between two surfaces on the z-axis
Components
Building on top of the foundations, I created interface components, including their variants.
Buttons
Input Text Field
Navigation
Bottom Navigation
Top Navigation bar
Side navigation
Interactive components
Chips
Tabs
Date Picker
Avatar
Cards
Iconography
Impact
And many more…
🌟
70+
Components
300+
Styles
📱
1000+
Varients
📊
The design system was used in designing the Star mobile application.
Star App Process
Learnings
Clear documentation is key. Defining use cases helps guide the usage of design system effectively.
02
A design system is a continuous work in progress, constantly evolving to meet new needs.
01
Foundational design decisions have a compounding impact as the system expands.
03
Back to Projects
Other Projects
Research Study
GenZ PM: Project Management for Social Media Marketing
Speculative Product Design
Design Futures: Designing an Immersive Art Experience
