UI Design
UX Design
Design Strategy
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
Before building any new elements or component, I need to audit the current website and define What is need & What is NOT need.
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.
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.
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.
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?
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 : https://www.w3.org/WAI/standards-guidelines/#intro
Using colour opacity to distinguish the Default & Disable status.
Applies the following opacity levels.
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.
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.
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)
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.
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.
.jpg)
