Design System
Design system is the foundation for consistency and alignment across our platform, guiding both new and existing projects. It ensures a unified user experience and visual identity throughout.
Project Overview
Problem
Before the redesign of the builder tool, there was a lack of consistency across the platform, with each product having its own unique look and feel. This inconsistency extended to varying font sizes, colors, iconography, different elements, illustrations, buttons, menus and other general components, which made the platform appear disjointed and lacking in unity.
Solution
As I embarked on redesigning the builder UI, I recognized the opportunity to establish a comprehensive design system.
By defining a one source of truth system, which defines colors, fonts, elements and typography, I aimed to create a foundation for the survey builder and future projects.
This design system would serve as the cornerstone for ensuring consistency and alignment across the platform, both for new initiatives and existing projects.
My Role
I am the leading designer on this ongoing project collaborating effort with the design team to set the system definitions. I am responsible for:
- Plan & Research best practices
- Identify Pain Points
- Defining the UX & UI for components to be unified across the platform
- Documentation and specifications
- Define work flow
- Hand’soff to Dev team - once a section was defined
- Design Review of components & Design Review in the integrated environments
As the lead designer for this project, my primary goal was to establish a robust system that not only addressed immediate needs but also anticipated future requirements. By doing so, I aimed to streamline our design processes and enhance efficiency for the entire design team.
Work Plan
Best Practice
I began by studying design systems of leading companies and the guidelines proposed by Material for building components. Then, I discussed with developers and architects to determine the most suitable system library for our designs.
Mapping Products
To pinpoint UI issues, I mapped identical elements with similar functionalities across the platform. This process aids in assessing the impact of new final components on existing products.
Pain Points
As the implementation of the survey builder was already underway, I took on the task of strategizing the integration of the new design system components to ensure a seamless transition. It was crucial to plan each step meticulously to avoid any major disruptions in the design process.
Establishing the Design System
During the creation of new components, I identified and removed redundant elements. I ensured that each component catered to various product requirements across different tools. Thorough checks were conducted to ensure gradual and systematic implementation of changes. Once a component was finalized and approved, I handed it off to development. I reviewed its implementation in the design system site and its integration into products.
WIP (Work in Progress)
Establishing the system and utilizing Figma as a single source of truth has already proven to be a time-saving solution for both the design team and developers. Though the project is ongoing and complex, I'm beginning to witness its initial impact and foresee how it will revolutionize our workflow for everyone involved
Like it? there’s more to see
