Lily Chou

PROJECTS

RESUME

Lily Chou

PROJECTS

RESUME

Gruve

Gruve

Scalable Design System for Enterprise B2B Product

Scalable Design System for Enterprise B2B Product

Built from scratch with reusable components and modular templates for flexibility.

Built from scratch with reusable components and modular templates for flexibility.

Overview

Gruve is an IT consulting company to provide digital transformation and AI-driven service. My responsibility is to build a scalable design system that can meet different business client’s requirement and facilitate the design workflow to deliver features demo effectively.

Design Sytem

Style Guide

Prototype Demo

My Role

UX/UI Designer

Collaboration

1 Designer, 1 Product Manager

1 Software Engineer, 1 Marketing

Timeline

July - Nov 2024 (4 months)

What I’ve achieved in this role?

AI-powered Enterprise System

Designed hi-fi prototypes for 5 AI-driven enterprise projects, including an AI financial dashboard and a legal contract automation tool, ensuring intuitive user experiences and securing client approval.

Designed hi-fi prototypes for 5 AI-driven enterprise projects, including an AI financial dashboard and a legal contract automation tool, ensuring intuitive user experiences and securing client approval.

Brand Style Guide

Identified brand language and visual style with marketing team, including 11 color palettes, 14 typography usage scenarios, and 18 logo variations.

Identified brand language and visual style with marketing team, including 11 color palettes, 14 typography usage scenarios, and 18 logo variations.

Design System

Created a component library from 0 to 1, including 134 reusable components and enterprise form/data table template, enhancing the design work by 36%.

Created a component library from 0 to 1, including 134 reusable components and enterprise form/data table template, enhancing the design work by 36%.

Background

When I joined Gruve, the company had just merged with Trusli and transitioned into an IT consulting firm. Therefore, we needed to build a brand-new design system from the ground up.

Background

When I joined Gruve, the company had just merged with Trusli and transitioned into an IT consulting firm. Therefore, we needed to build a brand-new design system from the ground up.

Why we need to create a new design system?

New Branding, New Look

With the company's transformation, a fresh brand identity was essential. A unified design system ensured consistency across all products and marketing materials.

Faster Client Demos

Clients wanted to see and test ideas quickly. A structured design system helped us speed up prototype creation, making feedback loops faster and smoother.

Handling Complex B2B UIs

Many of our projects involved complex B2B interfaces, especially forms and data tables. A reusable system made it easier to design and maintain these interfaces efficiently.

Before stepping into design, I set up the principles for our design system, ensuring all the requirements are met.

#1 Atomic Design

We break components into small, reusable UI elements, ensuring a systematic and scalable design system that works across different projects.

#1 Atomic Design

We break components into small, reusable UI elements, ensuring a systematic and scalable design system that works across different projects.

Email

name@email.com

Submit

Email

name@email.com

Interest Type

Please select

Submit

Label Text

Placeholder

Button

Login

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Email

name@email.com

Interest Type

Please select

Submit

Forget password

Atoms

Molecules

Organisms

Templates

#2 Consistency

#2 Consistency

To create a cohesive look and experience across products, we standardize typography, colors, and spacing using design tokens and best practices.

To create a cohesive look and experience across products, we standardize typography, colors, and spacing using design tokens and best practices.

#3 Flexibility

#3 Flexibility

Since our projects are client-driven, the design system needs to be configurable. Components should be easily swappable while maintaining alignment and usability.

Since our projects are client-driven, the design system needs to be configurable. Components should be easily swappable while maintaining alignment and usability.

How did I build our design system from 0 to 1?

Brand

Style Guide

Brand

Style Guide

Form/Table

Template

Form/Table

Template

Component

Library

Component

Library

Step 1

Brand Style Guide

The brand style guide establishes the foundation of the design system, defining core elements such as color usage, typography, and visual tone to ensure consistency across all products.

Step 1

Brand Style Guide

The brand style guide establishes the foundation of the design system, defining core elements such as color usage, typography, and visual tone to ensure consistency across all products.

As a foundation, I collaborated with marketing team to build a comprehensive brand style guide

As a foundation, I collaborated with marketing team to build a comprehensive brand style guide

Logo

✅ Logo Variance

✅ Do & Don’t

✅ Logo Placement

Color

✅ Primary

✅ Semantic

✅ Tertiary

Typography

Icon Usage

Step 2

Component Library

I built a library of reusable components powered by design tokens, with clear best practices and usage tips to keep the UI consistent and easy to scale.

Step 2

Component Library

I built a library of reusable components powered by design tokens, with clear best practices and usage tips to keep the UI consistent and easy to scale.

Based on our product attributes, I prioritized and built several components to ensure consistency and avoid repetitive works.

Based on our product attributes, I prioritized and built several components to ensure consistency and avoid repetitive works.

Our company is building enterprise software service for business client, so it’s important to clearly identify the different component states and have enough variants to cater to different requirements. The components I built including dropdown, text input, and upload. (to name but a few here)

Our company is building enterprise software service for business client, so it’s important to clearly identify the different component states and have enough variants to cater to different requirements. The components I built including dropdown, text input, and upload. (to name but a few here)

I applied design token to the whole design system for easier management and facilitate design-dev collaboration

I applied design token to the whole design system for easier management and facilitate design-dev collaboration

Why Design Token especially matters in B2B consulting?

Why Design Token especially matters in B2B consulting?

Support custom branding and easily swap themes (colors, fonts) per client

Maintain consistency across complex UIs (dashboards, tables, forms, etc.)

Make global updates safer across different teams and products

👇 Design Token Logic👇

I also provided best practices and usage guidelines for specific components, ensuring consistency across the whole design team.

I also provided best practices and usage guidelines for specific components, ensuring consistency across the whole design team.

Step 3

Table/Form Template

I combined components into flexible form and table templates that can switch layouts and content easily, helping teams build complex enterprise UIs faster and more consistently.

Step 3

Table/Form Template

I combined components into flexible form and table templates that can switch layouts and content easily, helping teams build complex enterprise UIs faster and more consistently.

As a data-heavy B2B consulting company, I created modular templates for forms and data tables to reduce repetition and simplify client customizations.

As a data-heavy B2B consulting company, I created modular templates for forms and data tables to reduce repetition and simplify client customizations.

For enterprise clients, we frequently encountered repeated requests for complex forms and data tables across projects. Without a standardized solution, this led to duplicated effort and inconsistent UI.

To address this, I created a flexible template system with the following benefits:

For enterprise clients, we frequently encountered repeated requests for complex forms and data tables across projects. Without a standardized solution, this led to duplicated effort and inconsistent UI.

To address this, I created a flexible template system with the following benefits:

Rapid customization by easily swapping field types

Rapid customization by easily swapping field types

Accelerated delivery through reusable design modules

Accelerated delivery through reusable design modules

Consistent design patterns across products and teams

Consistent design patterns across products and teams

Data Table

Enterprise Form

Template #1

Modular Data Table Template

Modular Data Table Template

🧱

Table Structure Overview

Unit Cell

Cell

Column

Header

Cell

Cell

Cell

Cell

Data Table

Header

Cell

Cell

Cell

Cell

Header

Cell

Cell

Cell

Cell

Header

Cell

Cell

Cell

Cell

Header

Cell

Cell

Cell

Cell

🔍

Column Attribute Breakdown

Each column has its own structure and interactive attributes.

Each column has its own structure and interactive attributes.

1st Col

Format

Expandable

Children

Checkbox

Middle Col

Tag

Placeholder (others)

Data Attribute

Plain text

Last Col

Button #

Action

More

⚙️

Cell Variants

  • cell-format

  • cell-type

Modular Table Assembly Process

Modular Table Assembly Process

  • Combine unit cell into a full data table

  • Swap in attributes with ease (e.g. tags, text, or action buttons)

Control Format Instanly

Control Format Instanly

  • Toggle cell behaviors directly

  • Apply formatting logic on each cell

First Row

hasChildren = True

isExpanded = True

Below Row

isChild = True

Checkbox = Ture

Hover = True

Template #2

Customizable Enterprise Form

Customizable Enterprise Form

🧱

Form Composition
Breakdown

Form Composition Breakdown

Form Title

Footer (Action Btn)

Single Column

Double Column

Triple Column

Content Sections

⚙️

Base Components
and Variants

Base Components and Variants

Edit/Display the form title and optional description

Edit/Display the form title and optional description

Select from a dropdown to swap field types

Select from a dropdown to swap field types

Choose footer layout and button alignment

Choose footer layout and button alignment

🕹️

Interactive Template

Supports single, double, or triple-column layouts to fit various content needs.

👀 Let's take a look at how this template use!

Edit Form Text Easily

Edit Form Text Easily

  • Update form title and description directly

  • Toggle to hide optional descriptions

Swap Form Fields with Flexibility

Swap Form Fields with Flexibility

  • Instantly swap field content vis dropdown

  • Maintain consistent spacing and layout

Customize Footer Actions

Customize Footer Actions

  • Insert action buttons with configurable alignment

  • Tailor button sets for different workflows

Example

Example

Showcase how different UI components are applied across projects to support specific workflows and enhance user interactions.

Data Knowledge AI Agent

By integrating with enterprise databases, the AI agent allows users to query specific data, predict sales revenue based on historical information, and visualize results through generated reports.

Used Components

dropdown, text area input, upload

Document Automation & Visualization

Streamline legal contract workflows with AI, automating document processing and visualizing results on a centralized dashboard for easier management.

Used Components

data table, form, calendar, search, pagination, upload

Statement of Work (SoW) Form

Facilitate clear alignment with clients by defining scope, deliverables, and timelines, helping our projects stay organized and on track from kickoff to completion.

Used Components

form template, text area, calendar, dropdown

Neuropy

Effortless mood-tracking AI solution

ThunderCore

Web3 Blockchain Wallet Revamp

Neuropy

Effortless mood-tracking AI solution

ThunderCore

Web3 Blockchain Wallet Revamp

Neuropy

Effortless mood-tracking AI solution

ThunderCore

Web3 Blockchain Wallet Revamp

Let’s Get in touch!

Eager to uncover market opportunities and delivering state-of-the-art products with seamless, intuitive user experiences!

peisyuan0910@gmail.com

@ 2025 | Pei Syuan Chou

Let’s Get in touch!

Eager to uncover market opportunities and delivering state-of-the-art products with seamless, intuitive user experiences!

peisyuan0910@gmail.com

@ 2025 | Pei Syuan Chou

Let’s Get in touch!

Eager to uncover market opportunities and delivering state-of-the-art products with seamless, intuitive user experiences!

peisyuan0910@gmail.com

@ 2025 | Pei Syuan Chou