Design System

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications, and the need for them go hand in hand with the need for scale, efficiency, and consistency in Design.
The Design System features a comprehensive collection of elements and principles housed within a centralized design library. This system facilitates design management, enables rapid iteration through the use of reusable components and patterns, and accommodates flexible timelines.
  • Role
  • UX Design
  • Tools Used
  • Figma
  • Services
  • UX Design
  • Time
  • 3 Weeks
The Challenge
  • No Standard to Follow
  • Creative Difference on Diverse Briefs
  • Undefined Components
  • Scattered and Dotted Assets
  • Lack of Unity in UX/UI
The Idea
To enhance cross-functional teamwork and eliminate barriers between design, development, and quality assurance teams.
Add product design thinking to constantly improve the system, in order to get ongoing feedback from all teams.
The Grid

You don’t start building a house without its foundation so the same thing applies to design systems. You just don’t use concrete. The foundation of a design system is your spacing and grid system. I feel like spacing and grids are some of the most overlooked elements when it come to visual design but they can make a huge difference in the look and feel of a design. The reason why I went with an 8pt system is to help the design system be more responsive because all of the top screen sizes are divisible by 8.

The Components

Design Systems are like living organisms due to their inherent complexity and continuous evolution. Just as living organisms adapt and grow in response to their environment, Design Systems also require ongoing refinement and improvement to remain effective. As new technologies emerge, user preferences shift, and design trends evolve, a Design System must actively evolve alongside these changes to stay relevant and impactful.

The Process
The process begins with the research stage where it is essential to engage in the discussions and brainstorms with the team. This helps to gain a deeper understanding of the challenges faced by the users. By actively listening to real-time user feedback, we can identify their needs and determine what should be included in the Design System.
The Result
A pre-established library increases efficiency, streamlines development processes and facilitates collaboration among developers, designers, quality assurance, and engineers by establishing a common standard.
Product
Unity

A Harmonized and Consistent Product Interface and User Experience.

Centralized
Library

A Centralized Library for Standardized Assets.

Reduced
Iterations

Predefined, Preconstructed, and Reusable Components.

Less
Friction

From Developers, designers, quality assurance, to engineers.

Branding
Standard

Unified Standard Branding for everything (Print, digital, and Web).

This is an excellent company! I personally enjoyed the energy and the professional support the whole team gave to us into creating website.
Mattie Stepanek
Our Recent Works
New stunning projects for our amazing clients
Previous Project
Next Project