Overview

Patentcloud is a SaaS platform that has six products, and the scenarios and interactions are different from each other. The design system is very orderless due to every product was designed by different designers.
It does not just cause the difficulty of the code maintains and also causes the user experience not to unify. Therefore, establishing a flexible design system and considering the development needs of new features has become a big challenge.

Skills

UI/UX Design
User Research
Information Architecture
Interaction Design
Design Systems

Outcomes

High-Fidelity Mockups
Interactive Prototypes
Style Guide

My Role

Product Designer

The Problem

System dependency

The design unify can be divided into consistency within the product or the platform. To decide the component should follow which consistency logic needs careful consideration and discussion with PM and RD, and the process involves inventory, organization, and definition.

Workflow

The design system is not just a simple document; it’s a dynamic, collaborative process. It will continue to evolve according to new feature development or component iteration, and the design system’s purpose is to make development and maintenance more efficient and easy.

Design Process

01

Inventory

02

Organize

03

Research

04

Define

05

Document

Color system

In the beginning, there was only one product in Patentcloud. Therefore the color system was not suitable for other products. It not just confused the branding image but also made the experience inconsistent. After researching many documents, I propose a color system ratio that is 5% primary color and 95% grayscale color because the clean and minimalist color scheme will make the primary color more impressive.

Color ratio analysis of competitors

Patentcloud Color System

Components

Here take the dropdown and selector component as an example, showing how is the design process going.

Dropdown & Selector

Inventory & Organize

We start with inventory to define or design a component; we'll review all product pages and screenshots to record it, then organize by interaction.

Research & define

Outcomes