Design System

Design Team:

Lead & Research: Erfan tehranifar Design, Updates, Research: Amir shaebanloo , Aida falsafi

About

What was the reason
behind creating this
design system?

The Gamma project is a web platform that allows users to create mobile applications using voice commands. The project was designed with the goal of simplifying the app design and development process for non-technical users. However, in order to allow users to create apps on Gamma, various apps in different categories needed to be designed and coded in advance. In version one, our design team was responsible for creating and designing 16 small applications in various categories. Each application consisted of limited pages with different styles, which were handed over to the development team for implementation. In version two, however, the applications needed to be much more comprehensive and detailed, with each app requiring over 100 pages. This increase in volume not only added to the design time, but also posed a significant challenge for the development team as they had to implement each app individually. To address these issues, the need for a comprehensive design system became crucial.

Challenges

Problem

The goal of designing the design system for the Gamma project was to address the issues caused by visual inconsistency and repetition in the design and development process. In the first version, each application had its own style, and there was no unified design language among them. This lack of consistency created serious problems in the user experience and made the design and development process time-consuming.

Solution

To resolve these issues and optimize the process, a comprehensive design system was developed. This system included a set of design standards such as typography, colors, spacing, icon packs, illustration packs, and components that were applied consistently across all applications and were reusable. In addition, common pages like authentication, payment, onboarding, and others that were frequently repeated across applications were pre-designed as templates in the system.

Experience

"With our new design system, design and development time has been reduced by 50%, delivering a more seamless user experience than ever."

Design process

What was our design
process?

Creating a comprehensive design system requires careful planning and a structured process. Below are the key steps we followed to build the design system for the Gamma project

Tokens

Colors

We begin by exploring the core identity, values, and goals of the brand. Colors are selected to complement the brand's essence and reflect its tone and messaging, ensuring a cohesive visual experience throughout.

Tokens

Typography

We carefully choose typography that enhances readability while aligning with the brand's character and voice. The typefaces are selected to create a harmonious balance between aesthetics and functionality, ensuring a consistent and clear visual hierarchy.

Tokens

Grid System

Our grid system is designed to ensure structure and consistency across all layouts. By providing clear alignment and spacing, the grid helps create a harmonious flow and balanced design, making sure that every element is well-positioned and easily readable across different screen sizes.

Spacing

Tokens

Iconography

Our iconography is designed with clarity and functionality in mind. Each icon is crafted to communicate meaning quickly and effectively while maintaining visual consistency. The icons are scalable, adaptable, and seamlessly integrate into the overall design, ensuring a cohesive user experience.

Molecules

Buttons

Our buttons are designed for easy interaction and clear visibility. They maintain consistent spacing, color, and typography across different states (default, hover, active) to guide users effectively and ensure accessibility.

Molecules

Inputs

Our input fields are designed to be intuitive and easy to use, providing clear feedback to users. They maintain consistency in spacing, typography, and colors across all states (default, focus, error) to enhance user interaction and ensure accessibility.

Molecules

Navigations

Our navigation components are designed to be intuitive and user-friendly, ensuring smooth transitions between different sections. They provide clear visual cues with consistent spacing, typography, and colors to enhance usability and guide users through the platform seamlessly.

Tokens

Cards

Our cards are designed to organize content in a clear and structured way, making information easy to scan and interact with. They maintain consistent spacing, typography, and alignment, providing a cohesive layout that enhances user experience and visual hierarchy.

Other Components

Screens

Screens and Themes Overview

In addition to showcasing the models created using our design system, we have also applied and displayed various themes to demonstrate the flexibility and versatility of the system. The following screens highlight how the core components and layouts adapt seamlessly across different visual styles, from Simple to Modern and Friendly themes. Each theme reflects a unique visual tone while maintaining the consistency, scalability, and usability provided by the design system. These examples illustrate how the system allows for quick customization and branding while ensuring a cohesive user experience.

Result

"Our headless design system has revolutionized our template creation process. By providing a comprehensive library of reusable components and guidelines, we’ve significantly accelerated the development of new templates. Designers can now focus on crafting visually appealing layouts, while developers can quickly assemble templates using our standardized components. This streamlined approach has resulted in a 40% reduction in template development time, allowing us to meet the increasing demand for diverse and customized content formats."

Thank you for your

Attention