Design System: Streamline your digital design and development

We are living in a digital era, with rapid iterations in the digital platforms brought by new technologies and innovations around the internet. Brands are trying to attract more audiences by leveraging digital platforms. Within this context, to stay prominent in the market, brands should keep coming back with a consistent visual story to spike recognition among the audience. In the meantime, consistent branding is also a key element to boosting the growth of our business.

The report shows that: inconsistent branding might harm the benefits of your organization, by creating confusion in the market and therefore damaging a company's reputation or credibility. (The state of brand consistency, 2019)

Design systems synchronize your digital platforms and help you maintain a consistent brand visual.

Design systems are widely adopted by enterprises, such as Tencent/Tdesign: Enterprise Design System, ByteDance design system: Arco Design, Ant design system, etc…

(Example of Ant Design)

Design System is a tool that can help you efficiently manage a large scale of design and development, by standardizing the brand's visual language, copywriting, and visual interaction design. This allows you to stay consistent on all your digital platforms, no matter who is behind the design and development.

At EY-Fabernovel, we believe that from design consistency to streamlining development, design systems are vital for businesses that want to scale without compromise.?

A design system is essentially a collection of guidelines, principles, and repeatable components that form a company's definitive approach to designing and building digital products.

Case study 1: Digital transformation -?The process to build a design system

In 2019,?Christie's, an auction house leader, had only a global website for their Chinese customers. EY-Fabernovel helped them to design and develop a WeChat mini program for the past 3 years. We have been continuously maintaining and updating it.

That is why we built a design system that greatly facilitates the design tasks for later iterations in the WeChat mini-program. In addition, the design system can also help onboarding designers to quickly adapt to the design tasks.

Process

Step 1 Define Style Guide

The style guide is the image your brand presents to its consumers. It is the core part of building trust with your brand’s consumers. In Christie's design system, we include color palettes, typography, iconography, and spacing.

Step 2 Build Components Library

The components library is a combination of reusable components, and all of those reusable components we created should strictly follow our design system style guide in terms of color, font, icons, etc.

Step 3 Build Pattern Library

The pattern is made by a collection of reusable components. We define the layout and usage guidance for those combined UI components. In Christie’s design system our pattern library includes patterns like: Accordion, Bidding status, Banner, Bookmark, footer, etc…

Case Study 2: Design system helps us to maintain brand consistency

YARA is a Norwegian chemical company. It produces, distributes, and sells nitrogen-based mineral fertilizers and related industrial products. In China YARA's business model is business-to-business, therefore they don't have a direct connection with its consumers.?

In this project, we created an ecosystem that connects farmers, retailers, distributors, and Yara in the same loop. Based on our platform, the distributors can distribute the fertilizers to the retailers and then the retailers will sell them to the farmer. We built a WeChat mini program for retailers and farmers and a dashboard for distributors and Yara.

Outcome

Most of the users belong to the elderly group who are less sensitive to technology. Catering to the audience, we defined a larger font size in this project to ensure a comfortable basic visual experience. For the color palette, we avoid using similar colors to reduce the work on the maintenance of invalid colors for the back end.

The component library we created under the guidance of the style guide accelerated our design work massively and also helped us to unify the style of design for both mobile and desktop platforms.

To build your own design system and streamline your design and development process, contact us at: [email protected]

This piece is written by: Amber Yang, UX/UI Designer of EY Fabernovel