Zig's Design System and Documentation

ComfortDelgro Zig

Role

UI/UX Designer

Timeline

Jun 2022 - Nov 2022

Aug 22 to Dec 22

Platform

ComfortDelgro's Zig app and web applications

The problem

During my internship at Comfortdelgro, I was part of the team in creating and documenting a comprehensive web and mobile design system. The goal was to streamline the user experience by introducing a consistent visual language and interaction patterns across the app. This design system was designed to address key issues:

Inefficient workflow

Standardized UI components and guidelines will quicken ideation and mock-up processes in Figma, reducing redundancy and increasing productivity.

Lack of rules and guidelines

A created documentation and guidelines within the design system will facilitate effective collaboration and hand-offs among design and development teams

Brand Identity

By implementing consistent branding elements, the app will project a strong and recognizable brand identity.

Construction and documentations

As the style and layout guide was already built before I joined. I had to utilize them to build on the components. The following are key points of the components I have built and documented.

Journey Planner

Journey Planner ensures modifications of pre-set and custom destinations for mobility-based features.

Anatomy

1. Stop dot: For an indication of the pick-up location
2. Pin: For an indication of drop-off location(s)
3. Text field: To allow specific locations to be keyed in individually
4. Add location: To allow the option of adding a drop-off location
5. Switch: To allow swapping of drop-off locations
6. Remove location: To allow the option of removing a drop-off location

Types

• Journey planner comes in both active and inactive states
• Options for 2 or 3 destinations
• They can also be nested under a main header

Usage guidelines

Journey planner should be used:

• When there is a need for users to enter various and specific destination(s)  
• According to intents based on the active and inactive states

Journey planner should not be used:

• When only an input of location is needed for users

Search field

Search field allows users to input key words or phrases to filter through large amount of data/content

Anatomy

1. Search icon: To represent a visual cue for a search function
2. Label: For primary input of text to represent a badge
3. Remove icon: To clear the entire text input entered
4. Activation indicator: To represent an active state used currently

1. Search icon: To represent a visual cue for a search function
2. Label: For primary input of text to represent a badge
3. Remove icon: To clear the entire text input entered
4. Activation indicator: To represent an active state used currently

Types

• Search comes with both icons and without icons
• They can be used through various states such as default, filled, disabled, and active depending on the scenarios
• Active state only appears when the user has completed and entered a search query

• Search comes with both icons and without icons
• They can be used through various states such as default, filled, disabled, and active depending on the scenarios
• Active state only appears when the user has completed and entered a search query

Usage guidelines

Search field should be used:

• Only once. There should only be a single search bar for a specific screen

Search field should not be used:

• By hiding it in a drop-down menu or in a search icon

Tabs

Tabs help to organize and navigate between groups of content that are related with the same level of hierachy

Anatomy

1. Container: To store the elements used
2. Label: For primary input of text to represent a tab
3. Icon: To visually represent the type of content in a tab
4. Indicator: To help imply an active tab

Types

• Tabs come mainly in 2 types - Container filled and Line indicated
• For container-filled tabs, different colors are used to indicate the various states from active, alternative, and disabled (Blue, White, Grey, Outline)
• For line-indicated tabs, they come in both active and inactive states
• Tabs can come with icons that can be placed on the left, right, and top of the text label depending on the type of tabs used

Usage guidelines

Tabs should be used:

  • With content that is distinct from each tab when comes as a set
  • Horizontally and not place them below one another

Tabs should not be used:

• By hiding it in a drop-down menu or in a search icon

Lessons learned

Mastering layout and grids

Initially unfamiliar with design systems, I quickly learned 4px/8px spacing rules and how to work within grid systems, presenting my ideas to stakeholders before development.

Building responsive components

Working with Figma’s auto-layouts and constraints was challenging but necessary to create adaptable components for multiple screen sizes, a skill I’m now proficient in.

Technical collaboration

Close collaboration with developers ensured the technical feasibility of our design system, particularly in handling elements like nesting the search bar and adding responsive interactions.

Researching for guideline

Navigating the challenge of researching online usability guidelines for components while aligning them with Zig's identity was an enriching experience. This process not only honed my ability to adapt general principles to a specific context but also exposed me to a wealth of valuable insights that informed our design decisions.