UNIS Design System
%402x%20(dark2).svg){kind=icon}
Designer
UNIS
20 weeks
Overview
In today's fast-paced digital world, maintaining consistency and efficiency in design and development is crucial. To address this, we embarked on a project to create and implement a unified design system for our team and company. By utilizing Figma's advanced variable features and integrating them with CSS tokenization, we successfully streamlined the workflow. This alignment helped bridge the gap between design and development, reducing inconsistencies and speeding up the overall development process.
THE BUSINESS OBJECTIVE
Design teams across different projects struggled with consistency, time management, and keeping a unified visual style. A clear solution to these problems was creating a unified design system.
THE DESIGN CHALLENGE
How can we tackle major challenges like design inconsistencies and lengthy development times while implementing a simple, low-friction solution that saves both time and money throughout the process?
THE GOAL + VISION
Develop a strong yet adaptable design system that unifies visual components and boosts collaboration and efficiency among designers. Prioritize creating a high-quality set of design elements built for lasting use.
Phase 1
Navigating difficulties
Custom Components
Designers were building components on their own, which resulted in a lack of consistency and a mix of unaligned elements within the design system.
No Standardized Spacing
Without standardized spacing guidelines, layouts became uneven and disorganized, leading to designs that appeared unpolished and inconsistent across the entire system.
No Auto-Layout
Without the use of auto-layout, each design iteration required manual adjustments, which considerably slowed down the process and raised the likelihood of 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 absence of a responsive design framework resulted in designs that struggled to adjust across different screen sizes, which had a negative impact on the user experience across various devices.
Developer Hand-off
Ineffective hand-off procedures between designers and developers led to misunderstandings and errors in implementation.
Phase 2
What are our options?
Easily assign, track, and manage drivers' schedules and tasks to ensure smooth operations and timely deliveries.
Customizable Master Components
Create a library of customizable master components that maintain consistency while giving designers the flexibility to modify elements as necessary. This approach streamlines the design process and prevents the development of redundant or inconsistent components.
Standardized System
Establish a standardized spacing system to maintain uniformity across all layouts. This method offers clear spacing guidelines, leading to more cohesive and refined designs.
Hi-Fi Architecture
Incorporate high-fidelity architecture with auto-layout features to automate the alignment and spacing of elements. This greatly accelerates the design process and minimizes the need for manual adjustments.
Variable Application
Utilize Figma's variable features to standardize typography and background colors, ensuring a cohesive visual identity. This integration with CSS tokenization connects design and development, enhancing brand consistency.
Flexible Design
Create a responsive design framework that allows designs to adapt smoothly to different screen sizes, improving the user experience across various devices.
Clear Dev Workflow
Establish a straightforward and efficient workflow for developer hand-offs by incorporating detailed documentation and communication protocols. This approach reduces miscommunication and implementation errors.
Phase 3
Building the foundation
Workflow of Building Components
The workflow for creating and developing components starts with a Request phase, where requirements are collected and documented. In the Design phase, designers develop the component based on these specifications. This is followed by a Design Review, where feedback is used to evaluate and refine the design. Once approved, the component enters the Design Release phase, making it ready for development. During the Develop phase, developers implement the component, ensuring it adheres to the design specifications. A Dev Review is then held to verify that the implementation meets design standards and functionality. Finally, the component reaches the Dev Release stage, where it is deployed and integrated into the design system for use in production.
Colors
The color guidelines define a cohesive and visually appealing palette, consisting of primary, secondary, and accent colors. Each color is thoughtfully chosen to convey specific messages and evoke the intended emotions. With clear instructions on color usage, combinations, and accessibility, the design system ensures consistency across all applications while reinforcing the brand identity.
Themes
Themes in the design system provide flexible visual styles suited to various contexts and user preferences. Whether it's a light, dark, or custom theme, each variation ensures consistency and usability while meeting diverse design needs. Themes offer adaptability without compromising coherence, enabling smooth transitions between interfaces and boosting user engagement.
Typography
Typography is essential for shaping brand voice and improving content readability. The design system specifies typefaces, font sizes, line heights, and spacing guidelines to ensure consistency and clarity across all text elements. By standardizing typography, the system achieves visual harmony and strengthens brand identity, while also prioritizing legibility and accessibility.
Phase 4
Structuring the components
The design system uses variables to allow for instant theme switching, making it easy to toggle between different visual styles. By defining core design elements like colors, typography, and dimensions as variables, designers can consistently apply changes across the entire interface with ease.
Accordion
The Accordion UI component is a flexible, space-saving solution for organizing and presenting content in digital interfaces. It helps maximize content visibility while keeping the layout clean and easy to navigate.
Breadcrumb
The Breadcrumbs UI component is a navigation tool that shows the user's current position within a hierarchical structure. It enables easy navigation to previous levels, enhancing the overall usability of the interface.
Button
The Button UI component is a clickable element used to trigger actions or commands. Offered in multiple styles and sizes, it adapts to different contexts and purposes, providing users with a clear and accessible way to interact with the application.
Chip
The Chip UI component is a small, interactive element used to represent information, actions, or selections. Commonly applied for tags, filters, and inputs, it provides functionality and clarity to your user interface in a compact, efficient design.
Dropdown
The Dropdown UI component is a menu that displays a list of options when triggered. It enables users to choose from multiple selections in a compact format, enhancing both the efficiency and usability of the interface.
List
The List UI component is a vertically structured arrangement of items designed to present information, options, or actions in a clear and scannable format. It improves readability and organization within the interface.
Segmented Control
The Segmented Control UI component enables users to switch between multiple views or options. It improves navigation and filtering, offering a clear and organized way to manage content and functionality within the interface.
Stepper
The Stepper UI component helps guide users through a multi-step process or workflow. It visually indicates progress and the current step, making complex tasks easier to follow and more understandable for users.
Text Field
The Text Field UI component is a single-line input area for text entry. It is commonly used to capture user inputs like names, emails, or search queries, offering a simple and efficient way for users to interact with the interface.
Phase 5
Building Blocks
The web blocks section features pre-designed, reusable UI components that simplify the design and development process. These building blocks enable teams to quickly create consistent and visually appealing interfaces. Each block is carefully designed to meet the standards of the design system, ensuring cohesion and high quality across all projects. This method improves workflows, shortens development time, and preserves design integrity, allowing for faster iteration and deployment.
Authenticator
The Authenticator web block offers a secure and user-friendly interface for user authentication. It features components for login, registration, password recovery, and multi-factor authentication, ensuring a smooth and safe user experience.
Card
The Card web block serves as a flexible container for showcasing various types of content, including text, images, and actions. Crafted to improve visual hierarchy and organization, cards are ideal for summarizing information and creating attractive layouts.
Dialog
The Dialog web block is a modal component designed to present essential information, prompts, or actions that demand user attention. It delivers content in a focused and accessible way, improving user decision-making.
Information Box
The Information Box web block emphasizes important messages, alerts, or tips. With its unique styles, it effectively captures attention and ensures users are well-informed and guided throughout the interface.
Map
The Map web block incorporates interactive maps into the interface, enabling users to explore locations, access details, and conduct geographic searches. It supports multiple map providers and offers customization options, improving the representation of spatial data.
Menu
The Menu web block offers a structured and user-friendly navigation system. It accommodates hierarchical structures, dropdowns, and icons, allowing users to easily locate and access various sections of the application.
Popover
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.
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.
Want to see more?
If you’d like to see a clearer component library, please let me know! If you have specific elements or examples in mind, I can assist you more effectively.
Phase 6
Implementing the toolkit
As designers incorporated the toolkit into their workflows, the system's standardized components and guidelines enabled more efficient and cohesive design processes. Feedback and real-world usage data showed a significant reduction in inconsistencies and faster development times. This iterative process of testing and refinement demonstrated the design system's effectiveness in boosting productivity and delivering high-quality, uniform designs.
Phase 7
Documentation
Recording changes and interactions.
A detailed changelog was created and kept up to date to track changes and iterations throughout the design and development process. This log acted as a centralized record of updates, promoting transparency and accountability among teams.
Key Takeways
Improved Design Cohesion
The introduction of a unified design system greatly minimized inconsistencies across different projects. By standardizing components and guidelines, all designs were aligned with the same visual and functional principles, resulting in a more harmonious user experience.
Enhanced Efficiency
The design system optimized the design and development workflows, significantly shortening the time needed to create and implement UI elements. This boost in efficiency was especially noticeable in quicker development cycles and the capability to rapidly prototype and iterate on designs.
Enhanced Collaboration
The unified design language and toolkit promoted stronger collaboration between designers and developers. With clear guidelines and standardized components, the gap between design and development was narrowed, improving communication and decreasing the chances of errors during implementation.
