Project Menu
STW Design System 2.0
STW Design System 2.0
STW Design System 2.0
A Scalable & Accessible UI Framework
A Scalable & Accessible UI Framework
A Scalable & Accessible UI Framework
What is the STW Design System?
What is the STW Design System?
What is the STW Design System?
What is the STW Design System?
The Save the Water™ (STW) Design System is a scalable UI framework that ensures consistency, accessibility, and efficiency across all STW digital platforms. It serves as a centralized library of design components, typography, colors, and interaction patterns, providing a cohesive visual identity while improving user and contributor usability.
The Save the Water™ (STW) Design System is a scalable UI framework that ensures consistency, accessibility, and efficiency across all STW digital platforms. It serves as a centralized library of design components, typography, colors, and interaction patterns, providing a cohesive visual identity while improving user and contributor usability.
My Role & Team Collaboration
My Role & Team Collaboration
My Role & Team Collaboration
My Role & Team Collaboration
Audit of the Old System
Audit of the Old System
The Problem Analysis
The Problem Analysis
The Problem Analysis
Inconsistency & Accessibility issue
Inconsistency & Accessibility issue
Inconsistency & Accessibility issue
Colors, typography, and button styles varied, causing visual and functional misalignment. Some colors and typography did not meet WCAG compliance, affecting readability and usability for users with disabilities.
Colors, typography, and button styles varied, causing visual and functional misalignment. Some colors and typography did not meet WCAG compliance, affecting readability and usability for users with disabilities.
Colors, typography, and button styles varied, causing visual and functional misalignment. Some colors and typography did not meet WCAG compliance, affecting readability and usability for users with disabilities.
Lack of Scalability
Lack of Scalability
Lack of Scalability
Without a structured component library, designers and developers had to create elements from scratch, slowing down updates and making it difficult to scale new features.
Without a structured component library, designers and developers had to create elements from scratch, slowing down updates and making it difficult to scale new features.
Without a structured component library, designers and developers had to create elements from scratch, slowing down updates and making it difficult to scale new features.
Inefficient Handoff & Documentation
Inefficient Handoff & Documentation
Inefficient Handoff & Documentation
The absence of clear guidelines made collaboration between designers and developers inefficient, leading to misinterpretations and rework.
The absence of clear guidelines made collaboration between designers and developers inefficient, leading to misinterpretations and rework.
The absence of clear guidelines made collaboration between designers and developers inefficient, leading to misinterpretations and rework.
What You Did
What You Did
Organizing Design System
Organizing Design System
Organizing Design System
Design System into a categorized framework.
Design System into a categorized framework.
Design System into a categorized framework.
This Design System Index ensures designers and developers can easily find and reuse design elements, reducing redundancy and enhancing workflow.
This Design System Index ensures designers and developers can easily find and reuse design elements, reducing redundancy and enhancing workflow.
This Design System Index ensures designers and developers can easily find and reuse design elements, reducing redundancy and enhancing workflow.
How it work
How it work
The Structure
The Structure
The Structure
I divided the system into two main sections:
I divided the system into two main sections:
I divided the system into two main sections:
Foundations & Tokens
Foundations & Tokens
Foundations & Tokens
Establishing core design rules for consistency across all UI elements.
Establishing core design rules for consistency across all UI elements.
Establishing core design rules for consistency across all UI elements.
Components & Patterns
Components & Patterns
Components & Patterns
Reusable UI elements that follow the foundational design principles.
Reusable UI elements that follow the foundational design principles.
Reusable UI elements that follow the foundational design principles.
STW Design System
STW Design System
STW Design System
A structured, scalable, and accessible design system for a consistent user experience.
A structured, scalable, and accessible design system for a consistent user experience.
A structured, scalable, and accessible design system for a consistent user experience.
Breakpoint
Responsiveness helps maintain consistency across various screens
Grid
A modified 8px grid system keeps layouts consistent.
Spacing
A structured spacing system enhances readability and alignment.
Spacing
A structured spacing system enhances readability and alignment.
Typography
Typography is used to present information with clarity and structure.
Elevation
Elevation can communicate the state of interactivity of elements, but can also be used as visual flair.
Colors
Use color to represent hierarchy, content, or value.
logo & images & illustrations
All visually represent the organization.
Handoff Process Improvements
Handoff Process Improvements
A Scalable Handoff System
A Scalable Handoff System
A Scalable Handoff System
Bridging Design, Development, and Collaboration
Bridging Design, Development, and Collaboration
This template I designed for nonprofit organizations as a central hub, providing all teams—including stakeholders, leadership, developers, and other collaborators—with a clear understanding of project involvement and contributions.
This template I designed for nonprofit organizations as a central hub, providing all teams—including stakeholders, leadership, developers, and other collaborators—with a clear understanding of project involvement and contributions.
Learn More
