Patentcloud Design System
A scalable design system built to unify cross-product experiences and improve collaboration across a global patent intelligence platform.
Role
Product Designer
Timeline
Mar. 2019
Project Overview
Patentcloud's six SaaS products were built at different times by different teams, leading to inconsistent frameworks and fragmented user experiences. This project aimed to create a unified design system to ensure consistency across all products.
Current Problems
Diverse user flows caused inconsistent experiences.
Fragmented front-end frameworks increased maintenance costs.
Unaligned design specs lowered development efficiency.
Core Challenge
" How to establish and promote the adoption of a design system while ensuring the ongoing development progress of each product ? "
My Role &
Contributions
As the Design System Owner and UI/UX Designer, I led the planning and implementation of the entire design system:
Developed the design system strategy and roadmap.
Analyzed product positioning and user needs for each product.
Established cross-product design specifications and governance mechanisms.
Drove cross-functional collaboration and consensus building.
Solutions
1. Phased Implementation Strategy
Color System: Building the Brand Foundation
Challenge:
In the initial stages, the team lacked emphasis on brand style and design system, often using components or colors that didn't align with product positioning.My Solution:
I proactively conducted brand research, proposed a comprehensive color system, and successfully persuaded the team to adopt and implement the design system concept by demonstrating actual Hex code modifications.Outcome:
Established a principle of 95% neutral colors and 5% product-specific colors, and integrated Font Awesome for centralized icon management.
Basic System: Unifying Common Components
I adopted the Atomic Design methodology to break down components and establish a library structured into Atoms, Molecules, and Organisms, significantly enhancing design and development consistency.
Established a Design Token architecture to unify the management of design attributes (e.g., Color, Typography), ensuring efficient cross-product sharing and rapid updates.
Implemented the BEM naming convention to create a clearly structured component library, markedly reducing communication overhead and rework between design and front-end teams.
2. Design System Governance: Building the Architecture
Drawing from a product strategy perspective, I established a dual-layered design system architecture:
Platform Level
Reviewed common needs across all products to establish a unified foundation:
Design language and brand identity
Basic component library (buttons, forms, etc.)
Shared interaction patterns
Product Level
Developed differentiated strategies based on specific product characteristics:
Customization for specialized feature modules
Product-specific interaction flows
Adjustments for data presentation methods
Case Study: Patent List Redesign
Problem
As a core feature, the patent list, despite sharing data sources, suffered from inconsistent design and operation across products, affecting the overall user experience.
My Approach
Inventory & Organize : Audited all patent lists and categorized by browse intent and data needs.
Research & Benchmark : Studied competitors and frameworks; validated feasibility with developers.
Define Rules : Set standard column widths and display guidelines for consistent yet flexible design.
Document : Created clear specs to ensure consistency across future product or data expansions.
Outcome
Standardized the patent list display experience, improving user efficiency and comfort when browsing data across different products.
Project Impact
Quantifiable Results
Component reusability increased by 60%
Development time reduced by 40%
Design consistency improved by 45%
Qualitative Benefits
Fostered a cross-functional design collaboration culture.
Enhanced product design efficiency and consistency.
Established a sustainable foundation for future product expansion.
Collaboration & Advocacy
I actively drove collaboration and advocacy throughout the project to ensure the successful implementation of the design system:
