Zig's Design System and Documentation
Zig
Designing and documenting components from the ground up
Role
UI/UX Designer
Timeline
Jun 2022 - Nov 2022
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
• When there is a need for users to enter various and specific destination(s)
• According to intents based on the active and inactive states
• 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
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
Usage guidelines
• Only once. There should only be a single search bar for a specific screen
• 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.