The Club App Revamp Project

Design System for The Club Ecosystem


DURATION

October 2021 ~ Present

Due to relaunching The Club’s digital platforms, creating a design system for all digital touchpoints under The Club is an important task that should not be overlooked. This not only saves time and resources in development but also enhances the user experience by providing a unified and cohesive brand identity.
Moreover, a well-defined design system can help teams collaborate better and increase overall productivity. With The Club's large and diverse range of digital touchpoints, a design system can help manage these channels more efficiently and communicate a strong message to the users. Therefore, it is necessary and beneficial to create a design system for The Club.

ROLE

Research, define direction, UI design, mockup, validate, document, design management

TEAM

2 core designers, rest of design team

TOOL

Figma, Confluence

DESIGN PROCESS

This is the design process I followed for this project.

AUDIT & RESEARCH

Evaluate the current design system

First thing first, we have to understand the strengths and weaknesses of our existing design system by conducting a thorough assessment. Identify pain points, outdated components, and inconsistencies.

And we gathered feedbacks from designers, developers, and users to understand their experiences with the current design system and pinpoint areas for improvement.

AUDIT & RESEARCH

Competitive analysis

Research and benchmark against other industry-leading design systems to identify best practices and gain insights into the latest trends:

DESIGN

Colours

DESIGN

Typography

In the Club digital products we had to cater with English user, also Traditional Chinese user. In English font we chose Nunito Sans because geometric shape of the letters and the spacing between characters is perfect. It is also great to have a big contrast with Bold text, it might bring the message more prominent.

For Traditional Chinese to tend to select OS preferred fonts, such PingFang HK for iOS and Noto Sans TC for Android device, since the complexity of Chinese charters, it is more user friendly when looking on a familiar fonts.

DESIGN

In the Club design system we decide collaborate with agency to fully customise our icon set. We discover that majority icon set in the market can not fulfil our needs in a wide range of products. We focused on simplicity to help users understand the concept the icon represents and recognise icons on smaller screens.

Iconography

DESIGN

Buttons

In buttons, we prepare four stages of button status, Default, Pressed, Focus and Disable.

Also we know that Secondary button will be used in area like form or on Cancel button, so we cater in our design system.

DESIGN

Grid, Responsive & Spacing

The foundation of a design system is about spacing and grid system and responsive behaviour. With a minor changes with this properties they can make a huge difference in the look and feel of a design.

For this project, we used an 8pt grid system with a 12-column grid and an 8px baseline grid. And also used a rem-based guide for the spacing system that aligns with the 8px grid.

we chose an 8pt system to make the design system more responsive, as all top screen sizes are divisible by 8 on at least one axis. This is important because it helps prevent antialiasing.

DESIGN

The big category of components I built for the Club is product display widgets.

Also we know in ecommerce world there is a lot a price rule for a product, such we using “As low as“ for a config product, a config product is cluster of similar products (eg, iPhone 12 Pro with different colour & storage). We using tags that label out the product selling point, such how much % of rebate and if it is a Pre-order products

Product display widgets

Our challenge: In the Club, users can pay not only by cash, can also with Club Points, in the product card also will display price mix with cash&points, so we need to cater both scenarios.

DESIGN

Design systems are complex and I've only scratched the surface of components in here. To round this out I just wanted to show a few of the other components that we have done so far to help the Club define design system to secure our app and even our products tone and identity.

More components…

VALIDATE

To ensure that all team members and stakeholders were well-informed about the progress of the revamping process, we established various communication channels. We also reached out to other stakeholders, such as business partners and customers, to keep them informed of the changes and to gather their feedback.

To ensure the usability of the design system, we conducted two rounds of usability tests with real users. These tests were crucial in gathering valuable feedback and insights that we used to refine and improve the design system even further. This ensured that the final product was not only functional and aesthetically pleasing but was also highly user-friendly and intuitive.

Communication and Testing

IMPLEMENT & DOCUMENT

We document design system in a comprehensive style guide or documentation. Which covered all aspects of the design system, including the visual elements, UI components, interaction patterns, accessibility guidelines, and design best practices

Develop design guidelines

IMPLEMENT & DOCUMENT

Develop design guidelines

We document design system in a comprehensive style guide or documentation. Which covered all aspects of the design system, including the visual elements, UI components, interaction patterns, accessibility guidelines, and design best practices

RESULT

It’s not the end

Design system is not a one-time creation; it requires continuous iteration and improvement. Gather feedback from designers, developers, and users to identify areas for enhancement. Keep track of changes and updates to ensure the design system stays up-to-date.

Takeaways and Learnings

Previous
Previous

The Club App Revamp

Next
Next

China Tech City