Crafting Design Excellence: Building a Robust Design System

Duration

2023.06-Present

My Role

Product Manager, Product Designer

Responsibility

Streamlined project management, design standardization, and cross-team collaboration.

Company

FunNow

Overview

Team Goal

Rebuild the design system for FUNNOW Group, improving existing issues and enhancing system scalability.

My Role

  1. Managed project timelines and developed comprehensive global standards.

  2. Guided designers in creating design pattern guidelines and led discussions.

  3. Coordinated between designers and engineers to balance design and technical requirements.

Challenges

FUNNOW Group is currently in a phase of product and team expansion, requiring simultaneous project development and design system construction.

Result and Impact

  1. Designers unified on the revamped design system, enhancing teamwork.

  2. Engineers praised the new system for boosting efficiency and consistency.

Background

In late 2021, FunNow evolved into FUNNOW Group by integrating sub-brands such as the family booking platform Niceday and Southeast Asian restaurant reservation platform Eatigo, broadening its brand portfolio.

This expansion led to an increase in team size, necessitating enhanced communication with colleagues from various countries to ensure seamless collaboration.

User Reasearch

At the project's outset, I invited 4 product designers and 4 front-end engineers for user interviews to identify core usability issues. Here's what we discovered from these interviews:

Idea Workshop

We also organized a workshop with both engineers and designers to brainstorm the issues they're facing with the old design system and come up with solutions.

Problem Define

Based on the user research above, we can identify 3 key issues and challenges that will become the core focus of our project:

Diverse Product Requirements

FUNNOW Group, spanning apps (iOS, Android), web platforms (Desktop, Mobile, Tablet), and products for merchants and end-users, faces challenges with its one-size-fits-all old design system due to varying needs across its diverse product portfolio.

Incomplete Definitions in Old Design System

The existing design system lacks comprehensive definitions, leading to inconsistencies in component usage among expanding design teams. This results in varied design drafts and necessitates repeated discussions.

Neglect of Engineering Needs

The old design system's simplified guidelines fail to address engineering specifics, such as component display in responsive designs, hierarchy, and states, causing confusion and increasing development time and cost due to the need for ongoing dialogue with designers.

Lack of System Management and Standards

Previously, there was no clear procedure or standards for updating the design system, including additions, deletions, or modifications, nor was there a history log for tracking changes.

Establish Hypothesis

Hypothesis 1:
Device and Product-Specific Design Systems

Tailoring the design system to fit different devices and products could align component usage more closely with their intended contexts, enabling designers to find and use relevant components more efficiently, thus reducing confusion and frustration.

Hypothesis 2:
Filling Component Gaps and Clarifying Definitions

Addressing missing components and redefining their attributes and usage could enhance consistency and efficiency in the design process.

Hypothesis 3:
Detailing Components in the Design System

Incorporating detailed component specifications into the design system could boost engineering productivity and lower communication costs with designers.

Hypothesis 4:
Establishing Clear Management and Standards

Creating explicit guidelines for design system management can increase control over the system, mitigate risks associated with changes, and ensure stability and consistency.

Hypothesis 5:
Implementing Design Tokens

Introducing design tokens can facilitate using a common language with engineers, reducing communication barriers and increasing development efficiency.

Semantic Clarity

Transforming numerical values into semantic terms allows the consistent application of color values across different scenarios, like funnow-orange-50 for button backgrounds, hyperlink colors, and primary icons, clarifying color usage.

Improved Teamwork

Design tokens act as a shared language between designers and engineers, smoothing collaboration and communication. This mutual understanding reduces barriers and misunderstandings, boosting efficiency.

Design Flexibility

As FUNNOW Group expands, incorporating more products or interfaces becomes necessary. Design tokens enable designers to easily manage and update designs without creating new ones for each addition, ensuring consistency and maintainability.

Deliverables

Establishing Design Tokens

The first critical step in refining our design system was to reestablish the Design Token System. This foundational move involved setting up a clear naming convention and hierarchy, ensuring our design practices are both consistent and scalable across all projects.

Global Tokens
(Reference Tokens)

Global tokens are the foundational level in the token hierarchy, usually representing specific values such as color HEX codes, font weights, line heights, font types, and spacing.


They define the basic styles across the entire design system, offering high applicability but lower precision in usage.

Semantic Tokens

Semantic tokens clarify the application and purpose of global tokens, explaining how and where they should be used.


They have medium applicability and precision.

Component Tokens

Component tokens are used to define styles related to specific components like buttons or navigation bars, ensuring consistency across different implementations.


These tokens have low reusability but high precision in usage.

Segmenting Design Systems by Platform and Product

We start by defining a Global design system as our foundation, ensuring uniform guidelines across all areas.


Then, we create specialized Brand Design Libraries for each product and platform, allowing for customization while maintaining overall consistency. This strategy balances coherence with the unique demands of each project.

Planning Global Rules and Design Patterns

We're revamping the homepage search entry by replacing the magnifying glass icon with a more inviting input box. This upgrade includes the addition of a keyword ticker

Global Rules

These are the core rules of the design system that should be followed across all designs and development efforts within FUNNOW Group.


They ensure consistency in design and user experience across various products, covering aspects like color, typography, and iconography.

Design Patterns

These address specific design challenges by applying global rules to particular components and interactions.


They include detailed guidance on usage, application scenarios, and behaviors, such as for buttons, input fields, and more, ensuring solutions are consistent and effective across different contexts.

Global Rules Before & After

Define Details

Take "Color" As Example

Color Scale Definition

We've specified how color scales are created by fine-tuning HSL Lightness, allowing for precise adjustments (+10 or +5) to maintain consistency.

Accessibility Compliance

We've included guidelines for adhering to WCAG standards, enhancing usability for users with visual impairments.

Transparency Options

We've added transparent colors for creative use in overlays, shadows, and visual enhancements, enhancing design depth and hierarchy.

Take "Color" As Example

Spacing Guidelines

Established spacing guidelines based on an 8 px baseline, including small, medium, and large spacing levels with their respective use cases.


This ensures consistent and harmonious spacing throughout the design system.

Breakpoint Redefinition

Redefined breakpoints for the web version of the product to optimize responsiveness and adaptability across various screen sizes.


This enhances the user experience and usability of the web platform.

Page Layout Guidelines

Established fundamental page layout guidelines, providing a structured foundation for designing web pages that adhere to our design system's principles.


These guidelines streamline the design process and maintain visual consistency across pages.

Take "Icon" As Example

Icon Design Keyline

Introduced alignment guidelines for icons, including square, horizontal rectangle, vertical rectangle, and circular alignments. This ensures icons are consistently aligned and maintain a balanced visual presentation.

Icon Drawing Precision

Enhanced icon drawing precision by specifying details such as rounded corners, line thickness, and tilt angles. These refinements result in more polished and visually appealing icons.

Standard Icon Sizes

Defined standard icon sizes for internal product usage, using 24px as the base dimension. This standardization ensures icons are appropriately sized and maintain consistency across the product.

Design Tokens

Color

We use global design tokens for fundamental text colors like primary text and footnotes. However, for special cases like highlighted text or errors, product-specific design tokens can be applied.


This approach maintains consistency while allowing customization when needed.

Layout

We establish a global design token for margins based on an 8px grid.


This includes definitions for REM values and corresponding numeric values, ensuring consistency in spacing throughout the design system.

Typography

We've defined separate global design tokens for iOS and Android platforms, specifying font attributes and their usage.


We've also improved line spacing by transitioning to relative percentages, aligning better with engineering needs.

Outcome

MVP

Rebuilding the design system is a substantial undertaking, especially with ongoing projects for both designers and engineers. After discussions with the team, we've estimated that this endeavor will require a minimum of 6 quarters.


Our decision is to begin with the creation of design tokens and essential components for the FunNow app as our MVP. This will allow us to gather feedback and iterate as we move forward.

Satisfaction Score: 8.2/10

Gathered from a survey conducted with 14 Frontend Engineers and 6 Product Designers across the company.

In summary, the positive team response to our new design system and workflow is crucial for project success. We'll continue to improve and deliver high-quality design resources and tools.

Next Actions

Following the project's launch, we monitored the search feature's data variations for a quarter and obtained the following detailed outcomes:

Continued Development

We will proceed with the construction of the design system, ensuring its completeness.

Brand-Specific Libraries

We aim to establish design libraries for our other sub-brands, extending the reach of our design system.

User Onboarding

Based on valuable user feedback, we will begin designing an effective onboarding process to familiarize team members with the design system.

Thanks for watching.

Next On

Redefining Membership: A Fresh Approach to Loyalty Programs

Revolutionizing Search Experience: Enhancing User Discovery

Contact

Hello! I'm here to connect and chat. Don't hesitate to reach out!

2024 Anniie Lee, who is swinging between ESFJ and ISFJ 🧋

Contact

Hello! I'm here to connect and chat. Don't hesitate to reach out!

2024 Anniie Lee, who is swinging between ESFJ and ISFJ 🧋

Contact

Hello! I'm here to connect and chat. Don't hesitate to reach out!

2024 Anniie Lee, who is swinging between ESFJ and ISFJ 🧋