HKTDC MarketPLACE| Design System

Creating a new Design System from scratch

My Role

UI Design
UX Design
Design Strategy

Project Scope

As a UI/UX designer at HKTDC, my role involves ensuring that the user interface and overall user experience of the marketplace are intuitive, visually appealing, and functional. One of the challenges we faced was the lack of a standardized design system that would help us maintain consistency and streamline the design process.

To address this issue, I took on the responsibility of collecting and analyzing the different UI components that are currently being used in the HKTDC marketplace.

Design system in Adobe XD including configurable UI components and pattern guideline.

To start with creating the design system. I have divided into 4 processes.

Audit the existing product

Define our design language

Build a pattern library

Document guidelines

Audit the existing product
Problem Define

Before building any new elements or component, I need to audit the current website and define What is need & What is NOT need.

Find the problem

In current website, I gather all the icons together and define the difference between the icons. And I found that our icons are inconsistency.

In my observations, I found that there are many different types of icons which make our website looks not professional.
Eg. Type of icon, different stoke, different opacity, different colors, different shadow.


Every button on a website serves a unique function and represents a distinct status or meaning. However, inconsistencies arise when buttons, such as Default, Hover, Pressed, and Disabled, are not synced across various situations.

For example, some buttons may be displayed at50% opacity when disabled, while others appear in grey. Such discrepancies can lead to confusion and inconsistency in our product, potentially causing confusion for our users.

Keep Consistency

The current website lacks consistency in typography structure. Headings, body text, sections, and promotional text are not properly aligned, and the hierarchy is not being followed to build paragraphs.

As a result, the website appears cluttered and lacks focus.

Define our design language

Basically, I divide the design system components into the following parts.

Color, Typography, Icon, Button, Image, Pop-up, Breadcrumbs, Carousels, Tabs, Accordions, Sort/Filter, Dropdown Menu, Notifications.

Build a pattern library

When I build the design system, there are a few things I need to consider. And I will keep these questions in mind when I am creating the structure.
- What devices we will use?
- When can we apply the materials to our design?
- Who will use the design system?
- Why do we need the design system?
- How do we interact with these components?

Clear Definition

HKTDC marketplace is using orange and grey which are HKTDC corporate branding elements,  which is the colour contrast that complies with the W3C web standard.

Read More :

Color Hierarchy

Using colour opacity to distinguish the Default & Disable status.
Applies the following opacity levels.

Font Type

For HKTDC marketplace, basically provide 3 Languages in our website.  

For English font, we will align with using Roboto family, which is the Google web font which supports different browser behavior with faster loading speed.  

For Traditional Chinese/ Simplified Chinese, we will use 黑體, which is the default font for Traditional and Simplified Chinese in the design setting.

Type Scale

The type scale includes a range of contrasting styles that support the needs of your product and its content.

The type scale is a combination of thirteen styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

Button Specification

To understand what types of states are used in interface design, let’s focus on buttons – a very common element used for interactivity in UI design. Buttons can have several states as they’re one of the most highly interacted-with elements in a UI. The following states are common CSS button states used in web development.


One of the important element of design system is how our user interact with our product.

For HKTDC marketplace platform, our user basically divided will use have 2 type: Web-based and Mobile-based. Therefore, when I create the component, I should consider how the user trigger with it. (eg. could it scroll? could it hover?)


Another things we need to consider is the device. Basically, we will have 3 breakpoints for the product. Website (1920x1080px), Tablet(721x1024px) , Mobile (375x812px)

Document guidelines

Designers and developers can easily and intuitively configure the component in Adobe XD.

By optimizing and unifying the panel, all of our team members can easily apply different components in various phases, to avoid misunderstanding and make sure everything is in perfect pixel.

This can highly alleviate communication between the design team and the development team.

Example Guideline

The design system is not only intended for designers, but also for various stakeholders such as developers, project managers, and the QA team who can use it as a reference.

To ensure clarity and prevent confusion, I will develop straightforward and user-friendly guidelines for each component.

Next Project
User Experience Refinement: Seamless Purchasing
View Project
Loosh Brands
Evolving Cannabis Website from B2B to B2C
View Project
Optimizing the customer purchasing journey
View Project
HKTDC Marketplace
Improving business matching rate
View Project

Experience seamless car buying through a reliable platform

View Project
HKTDC Marketplace
Creating a new design system from scratch
View Project
Learning CO

Connecting Tutor and Student together

View Project

Managing your daily transaction with wealfee

View Project