Sean Baik — The Design System

level 00

Facing the obstacles.

Custom Components

Designers were independently creating their own components, leading to a lack of uniformity and an array of inconsistent elements within the design ecosystem.

No Standardized Spacing

The absence of standardized spacing guidelines resulted in uneven and haphazard layouts, making the designs look unpolished and inconsistent system-wide.

No Auto-Layout

Without utilizing auto-layout, manual adjustments were necessary for each design iteration, significantly slowing the design process and increasing margin for errors.

Unique Type & BG Colors

Diverse and uncoordinated typefaces and background colors were used, which undermined brand consistency and made the user interface visually fragmented.

Irresponsive Design

The lack of a responsive design framework led to designs that did not adapt well to different screen sizes, negatively affecting user experience on various devices.

Developer Hand-off

Inefficient hand-off processes between designers and developers resulted in miscommunication and implementation errors.

What can we do about this?

Seamlessly assign, track, and manage drivers' schedules and assignments, ensuring smooth operations and timely deliveries.

Customizable Master Components

Develop a library of master components that are customizable, ensuring consistency while allowing designers the flexibility to adapt elements as needed. This streamlines the design process and eliminates the creation of redundant, inconsistent components.

Standardized System

Implement a standardized spacing system to ensure uniformity across all layouts. This approach provides clear guidelines for spacing, resulting in more cohesive and polished designs.

High-Fidelity Architecture

Introduce high-fidelity architecture using auto-layout features, which automates the alignment and spacing of elements. This significantly speeds up the design process and reduces the need for manual adjustments.

Variable Application

Apply Figma’s variable features to standardize type and background colors, ensuring a cohesive visual identity. This alignment with CSS tokenization bridges the gap between design and development, promoting brand consistency.

Flexible Design

Establish a responsive design framework that ensures designs adapt seamlessly to various screen sizes, enhancing the user experience across different devices.

Clear Development Workflow

Create a clear and efficient workflow for developer hand-off, utilizing detailed documentation and communication protocols. This minimizes miscommunication and implementation errors.

level 01

Establishing the foundation.

Crafting Components - Workflow

The workflow for crafting and developing components begins with a Request phase, where requirements are gathered and documented. In the Design phase, designers create the component based on the specified requirements. This is followed by a Design Review, where the design is evaluated and refined through feedback. Upon approval, the component moves to Design Release, making it available for development. During the Develop phase, developers implement the component, ensuring it aligns with the design specifications. A Dev Review is then conducted to validate the implementation against design standards and functionality. Finally, the component reaches the Dev Release stage, where it is deployed and integrated into the design system, ready for use in production.

Explore the elements.

View in Figma

↗

Colors

The color guidance establishes a cohesive and visually appealing palette, comprising primary, secondary, and accent colors. Each color is carefully selected to convey specific meanings and evoke desired emotions. By providing clear guidelines on color usage, combinations, and accessibility, the design system ensures consistency across all applications while reinforcing brand identity.

Themes

Themes within the design system offer versatile visual styles tailored to different contexts and user preferences. Whether it’s a light, dark, or custom theme, each variation maintains coherence and usability while accommodating diverse design requirements. Themes provide flexibility without sacrificing consistency, allowing seamless transitions between interfaces and enhancing user engagement.

Typography

Typography plays a crucial role in establishing brand voice and enhancing content readability. The design system defines a set of typefaces, font sizes, line heights, and spacing guidelines to ensure uniformity and clarity across all text elements. By standardizing typography, the system maintains visual harmony and reinforces brand identity, while also considering legibility and accessibility principles.

Icons

Icons serve as intuitive visual cues that aid navigation and communication within user interfaces. The design system offers a comprehensive library of consistently styled icons, covering a wide range of functions and topics. Each icon undergoes meticulous design and testing to ensure clarity, recognizability, and scalability across different platforms and screen resolutions, enhancing the overall user experience.

Logos

Logos are a cornerstone of brand identity, representing the organization’s values and aspirations. The design system provides clear guidelines for logo usage, including size, placement, and variations to maintain brand integrity across various touchpoints. By standardizing logo usage, the system reinforces brand recognition and trust while ensuring consistent visual representation in diverse contexts.

Effects

Visual effects, such as shadows and gradients add depth and dimensionality to user interfaces, enhancing engagement and usability. The design system defines a set of consistent and purposeful effects guidelines to maintain visual coherence and reinforce brand aesthetics. By incorporating effects judiciously and consistently, the system elevates the overall user experience.

Flows

User flows are essential for guiding users through various interactions and tasks within an application or website. The design system offers tools and guidelines for creating clear and intuitive user flows, ensuring seamless navigation and interaction. By mapping out user journeys and defining interaction patterns, the system enhances usability and reduces friction, ultimately improving user satisfaction and engagement.

Layout

Layout principles provide structure and organization to user interfaces, facilitating efficient information presentation and navigation. The design system defines grid systems, spacing guidelines, and responsive layouts to ensure consistency and adaptability across different screen sizes and orientations.

level 02

Structuring Components

Instant interchangeability.

The design system utilizes variables to enable instant theme switching, providing a seamless way to toggle between different visual styles. By defining key design elements such as colors, typography, and dimensions as variables, designers can effortlessly apply consistent changes across the entire interface.

A user-centeric format.

The development of components was driven by a user-centric approach, prioritizing the needs and preferences of the end-users. Each component was meticulously crafted and tested to ensure usability, accessibility, and intuitive interaction. By conducting user research, gathering feedback, and iterating designs, the components were refined to meet the diverse requirements of the target audience.

Explore the components.

View in Figma

↗

Accordion

The Accordion UI component is a versatile and space-efficient way to organize and display content within your digital interface. It is designed to maximize content visibility while maintaining a clean and user-friendly layout.

Avatar

The Avatar UI component is a small, round graphical representation of a user or entity, enhancing personalization and recognition within interfaces. It provides a visually appealing way to display profile images or icons, contributing to a more engaging user experience.

Badge

The Badge UI component is a visual indicator used to highlight new or unread items, statuses, or notifications. It effectively adds context and emphasis to elements, ensuring that important information is easily noticeable by users.

Breadcrumbs

The Breadcrumbs UI component is a navigational aid that displays the user's current location within a hierarchical structure. It allows for easy navigation back to previous levels, improving the overall usability of your digital interface.

Button

The Button UI component is a clickable element designed to initiate an action or command. Available in various styles and sizes, it fits different contexts and purposes, providing a clear and accessible way for users to interact with your application.

Checkbox

The Checkbox UI component is an input element that allows users to select one or multiple options from a set. It provides a clear and straightforward way to capture user choices in forms and settings, enhancing the interactivity of your interface.

Chip

The Chip UI component is a small, interactive element that represents information, actions, or selections. Often used for tags, filters, and inputs, it adds functionality and clarity to your user interface in a compact form.

Divider

The Divider UI component is a thin line used to separate content and elements. It enhances visual organization and clarity within layouts, contributing to a cleaner and more structured interface design.

Dropdown

The Dropdown UI component is a menu that reveals a list of options when activated. It allows users to select from multiple choices in a compact space, improving the efficiency and usability of your interface.

FAB (Floating Action Button)

The Floating Action Button (FAB) UI component is a circular button that floats above the interface, typically used for primary or common actions within an application. It stands out visually, encouraging users to interact with key functionalities.

KBD (Keyboard Key)

The KBD UI component represents keyboard input or shortcuts, enhancing documentation and user instructions with clear visual cues. It provides an intuitive way to illustrate keyboard interactions within your digital interface.

List

The List UI component is a vertical arrangement of items used to display information, options, or actions in a structured and easily scannable format. It enhances readability and organization within your interface.

Notification

The Notification UI component displays brief messages to inform users of updates, statuses, or important information. Often appearing temporarily, it ensures that users receive timely and relevant notifications without overwhelming the interface.

Progress

The Progress UI component is a visual indicator that shows the completion status of a task or process. It provides feedback on progress, encouraging user patience and engagement during ongoing activities.

Radio

The Radio UI component is an input element that allows users to select a single option from a group. It ensures clear and exclusive choices in forms and settings, contributing to a more user-friendly and organized interface.

Rating

The Rating UI component allows users to provide feedback or assessments, typically represented with stars or other icons. It offers a visually intuitive way to capture user opinions and evaluations within your interface.

Scroll Bar

The Scroll Bar UI component is an interactive element that enables users to scroll through content vertically or horizontally. It improves navigation within large datasets, ensuring that all information is accessible and easy to explore.

The Search UI component is an input field that allows users to enter queries and find specific information quickly and efficiently. It enhances the discoverability and usability of your digital interface, streamlining the user experience.

Segmented Control

The Segmented Control UI component allows users to toggle between multiple views or options. It enhances navigation and filtering within your interface, providing a clear and organized way to manage content and functionality.

Skeleton

The Skeleton UI component is a placeholder that simulates the layout of content while it is loading. It improves user experience during data fetching by providing a visual indication of where content will appear, reducing perceived wait times.

Slider

The Slider UI component is an interactive element that allows users to select a value or range by sliding a handle along a track. It is often used for adjusting settings, providing a precise and user-friendly way to control inputs.

Spinner

The Spinner UI component is a visual indicator that shows ongoing activity or loading. It helps manage user expectations during wait times, ensuring that users are aware that a process is in progress.

Stepper

The Stepper UI component guides users through a multi-step process or workflow. It indicates progress and current step status, making complex tasks more manageable and comprehensible for users.

Steps

The Steps UI component visually represents a sequence of steps or stages within a process. It helps users understand their progression and what remains to be completed, enhancing the clarity and usability of multi-step interactions.

Tablist

The Tablist UI component organizes content into tabs, allowing users to switch between different views or sections within the same context. It enhances navigation and content management, providing a structured way to display related information.

Text Area

The Text Area UI component is a larger input field for multi-line text entry. Commonly used for comments, messages, or detailed information, it offers users ample space to provide input, enhancing the flexibility and usability of forms.

Text Field

The Text Field UI component is a single-line input field for text entry. Used for capturing user input such as names, emails, or search queries, it provides a straightforward and efficient way for users to interact with your interface.

Toggle

The Toggle UI component is a switch-like element that allows users to turn an option on or off. It provides a clear and accessible way to control settings and preferences, enhancing the interactivity and customization of your interface.

Tooltip

The Tooltip UI component is a small, informational popup that appears when users hover over or focus on an element. It provides additional context or guidance, enhancing the usability and clarity of your digital interface.

level 03

Building blocks.

Optimizing worklows.

The web blocks section consists of pre-designed and reusable UI components that streamline the design and development process. By leveraging these building blocks, teams can quickly assemble consistent and visually appealing interfaces. Each block is meticulously crafted to align with the design system's standards, ensuring cohesion and quality across all projects. This approach optimizes workflows, reduces development time, and maintains design integrity, enabling faster iteration and deployment.

Explore the blocks.

View in Figma

↗

Authenticator

The Authenticator web block provides a secure and user-friendly interface for user authentication. It includes components for login, registration, password recovery, and multi-factor authentication, ensuring a seamless and secure user experience.

Card

The Card web block is a versatile container for displaying content such as text, images, and actions. Designed to enhance visual hierarchy and organization, cards are perfect for summarizing information and creating visually appealing layouts.

Chat

The Chat web block offers a real-time messaging interface, facilitating user communication and interaction. It includes features like message threads, user avatars, and typing indicators, ensuring a smooth and engaging chat experience.

Date Picker

The Date Picker web block allows users to select dates easily and accurately. It features a calendar interface with navigation controls, supporting various date formats and enhancing the usability of date input fields.

Dialog

The Dialog web block is a modal component used for displaying critical information, prompts, or actions that require user attention. It ensures content is presented in a focused and accessible manner, enhancing user decision-making.

Information Box

The Information Box web block highlights important messages, alerts, or tips. It uses distinct styles to draw attention to key information, ensuring users are well-informed and guided through the interface.

Map

The Map web block integrates interactive maps into the interface, allowing users to explore locations, view details, and perform geographic searches. It supports various map providers and customization options, enhancing spatial data representation.

The Menu web block provides a structured and intuitive navigation system. It supports hierarchical structures, dropdowns, and icons, making it easy for users to find and access different sections of the application.

Navigation

The Navigation UI component offers a structured and intuitive way for users to traverse the interface. It includes elements such as menus, links, and navigation bars, ensuring that users can easily find and access different sections of the application.

Popover

The Popover web block displays additional information or actions when users interact with a specific element. It enhances usability by providing context-sensitive content without cluttering the main interface.

Table

The Table web block organizes data into rows and columns, making it easy to display and analyze information. It supports sorting, filtering, and pagination, ensuring a comprehensive and user-friendly data presentation.

Time Picker

The Time Picker web block allows users to select time values accurately. It features intuitive controls for hours and minutes, supporting various time formats and enhancing the efficiency of time input fields.

Toolbar

The Toolbar web block offers a collection of actionable buttons and controls, typically placed at the top of an interface. It provides quick access to key functions and tools, enhancing user productivity and interaction.

Uploader

The Uploader web block facilitates file uploads with a simple and intuitive interface. It supports drag-and-drop functionality, progress indicators, and file type validations, ensuring a smooth and efficient file upload process.