Design System
Design System created for Urban FT that ensured consistency and efficiency in both design and development across digital products.
Overview
Project type: Building a design system
Role: Junior designer, workshop, visual design
Industry: Restaurant Tech
Duration: 8 Weeks
Introduction
A design system is a set of standards bound together by design principles and UX strategy that consists of reusable components, patterns, and guidelines intended to reduce redundancy while also creating visual consistency across different products. We can relate a design system to a Lego set for creating products but at scale.
Project overview
The team previously had no design system, and our library was a mess. Our grid, components, typefaces, and more were inconsistent with our projects. Our product suites lacked cohesion, and we spent extra time re-creating standard parts. We needed a definitive solution to streamline the design of our products and create visual consistency. We were also in the middle of switching from Sketch to Figma and felt now would be the best time to develop a design system.
What problem does it solve?
Reduce speed to market time
By leveraging reusable code/components for all our products, we can reduce design and development delivery times
We work on advancing to a place where our UI developers will be using design tokens in every project as we grow.
Eliminate components tailored for individual products or platforms
We shift away from platform-specific designs and patterns and move to a more modular platform and product-agnostic approach.
Address inconsistencies across our products
We remove inconsistency in patterns and UI elements used across different products.
Reduce time spent on ‘busy’ work
With a design system, we can reduce focus on components and increase focus on experience.
We shift focus from output to outcomes that directly impact our business and its revenue.
Who does it benefit?
Design team
Reduces delivery time for producing new features/products in the UI design phases of the process.
Allows team to focus on just creating core screens.
Alleviates strain on the team and frees up time/resources to focus on larger, more complex problems.
Drastically reduces the time for Design QA.
Increase speed of prototyping/testing design concepts.
Onboarding new designers to our team and enabling them to understand design standards quickly.
Business as a whole
Speed to market.
Creates a unified language and visual consistency within and between different products as part of X-35.
Development team
Ability to replicate designs quickly by utilizing pre-made UI components and elements. Removes the need to produce new features from scratch repeatedly.
Reduces the number of design bugs and time spent on fixing them.
Empower developers to create simple screens without experience team involvement.
Clients & end-users
Consistent visual language = more familiar patterns, making it easier/faster for users of our products to accomplish their intended task.
Competitive research
Before this project started, our team was inexperienced in building a design system from scratch. I researched and analyzed well-established design systems such as Goldman Sachs, Material.io, and ZenDesk Garden to gather some inspiration regarding categories and groupings, guidelines, and behaviors.
Establish design foundations
We established our design foundations before moving on to component development and building the library. By analyzing the font styles used across multiple products, we streamlined the selection by removing inconsistencies. We also proactively identified any future font sizes we might need, ensuring scalability and consistency throughout the design system.
We established blue as our primary color and conducted research to select complementary shades of blue and neutral tones to enhance the overall palette. Additionally, we identified secondary and feedback colors to provide contrast and highlight key components, such as graphs and charts, adding a pop of color.
Our design foundations consisted of:
Color Palette
Typography scale
Grid system
Elevation
Illustrations
Patterns
Visual Form
Conduct component audit & streamline library
As part of our effort to create a cohesive design system, we conducted a comprehensive component audit across all products. This process involved identifying inconsistencies, cataloging existing UI elements, and evaluating their functionality and visual alignment with our design goals. By consolidating components and refining their styles, we built a unified library that ensured consistency, improved usability, and streamlined the development process.
Define use cases, guidelines, and logic
After auditing the components, we focused on defining clear use cases, guidelines, and the logic behind each element in the component library. This involved outlining when and how to use specific components, establishing rules for their behavior, and creating design guidelines to ensure consistency across different platforms. By setting these standards, we ensured the component library was intuitive, scalable, and adaptable to future product needs.
Create final components
With the foundation in place, we moved on to creating the final components for the design system. Each component was meticulously designed to align with the established guidelines and use cases, ensuring consistency in appearance, behavior, and responsiveness. We rigorously tested them across different scenarios to guarantee functionality and adaptability. The result was a robust, scalable set of components ready for seamless integration into our products.
Conclusion
Looking back on this project and my career in UI UX thus far, I can see how important each step of this process has been to my development. It was through both switching from Sketch to Figma and learning a new program that I have been able to progress to where I am today. It is clear to me that it is crucial to look at the field of design from an atomic-level perspective. The fundamentals, which include writing guidelines, use cases, and Do’s and Don’ts, provided a deep understanding of the concepts and components. This enlightening learning experience helped me to realize that I was inspired to learn more and that I wanted to expand my knowledge in UI UX.