LINJUN LI

Work
About
About
Explore
Explore
Resume
Resume
LINJUN LI

Project Menu

Project Overview
Team Collaboration
Problem
Desicion
Final Outcome

About the STW Design System?

About the STW Design System?

About the STW Design System?

About 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.

Responsibilities

• Audited and reorganized the existing design system for improved scalability • Led the modular setup of components and UI patterns • Defined core design tokens for color, typography, and spacing • Created clear documentation to support developer handoff • Collaborated across design, development, and content teams to ensure consistency

Team

Design Team Members • Collaborated with 3–4 designers to build components and refine UX patterns. Developers • Worked with frontend devs to ensure component feasibility and clean handoff. Contributors: • Education and Content teams — for accurate representation of informational elements like cards and brochures.
Design Team Members • Collaborated with 3–4 designers to build components and refine UX patterns. Developers • Worked with frontend devs to ensure component feasibility and clean handoff. Contributors: • Education and Content teams — for accurate representation of informational elements like cards and brochures.

Project Details

Project Type: Design System Overhaul for a Nonprofit WordPress Site Tools Used: Figma, Google Docs, Notion, WordPress, Framer (exploration) Focus Areas: • UI Consistency • Developer Collaboration • Documentation • Accessibility

The Problem

The Problem

The Problem

Audit of the Old System

Audit of the Old System

Inconsistency issue

Inconsistency issue

Inconsistency issue

Inconsistency 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.

Handoff & Documentation

Handoff & Documentation
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.

Organizing Design System

Organizing Design System

Organizing Design System

Access STW Design System
Access STW Design System
Access STW Design System

We divided the system into four core pillars:

We divided the system into four core pillars:

We divided the system into four core pillars:
Tokens

Tokens

Tokens
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

Components

Components
Components
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.
Patterns

Patterns

Patterns
Patterns
Reusable layout or behavior structures that support consistent UI experiences.
Reusable layout or behavior structures that support consistent UI experiences.
Reusable layout or behavior structures that support consistent UI experiences.
Handoff

Handoff

Handoff
Handoff
Clear documentation and specs that bridge the gap between design and development.
Clear documentation and specs that bridge the gap between design and development.
Clear documentation and specs that bridge the gap between design and development.
Other Case Study
Other Case Study
Early UX/UI Project & Growth for Save the Water™ 2023
Early UX/UI Project & Growth for Save the Water™ 2023
Early UX/UI Project & Growth for Save the Water™ 2023
Study Case: Personalized Pilates
Study Case: Personalized Pilates
Study Case: Personalized Pilates
Study Case: Personalized Pilates
Study Case: A Resort Booking Experience 2022
Study Case: A Resort Booking Experience 2022
Study Case: A Resort Booking Experience 2022

© 2025 Linjun Li. All Rights Reserved.

© 2025 Linjun Li. All Rights Reserved.

© 2025 Linjun Li. All Rights Reserved.