WORK
ABOUT
CONTACT
AARON
LIMBU
Creating a design system for Aigens using tokens

Overview

Aigens specializes in providing SaaS solutions for food ordering, including online platforms, QR code systems, and self-service kiosks. They also offer middleware that integrates POS systems, payment tools, kitchen management software, and food delivery services.

To keep up with their expanding range of products, Aigens recognized the need for a design system. This system was developed to improve efficiency, create a user-friendly experience, and generate increased revenue across all their offerings.

Problem statement

Aigens recognized the need for a comprehensive design system to overcome the challenges and limitations of their current design process. Their objective was to achieve consistency, efficiency, and scalability across all design projects.

Additionally, Aigens faced the absence of a comprehensive library of components that could be utilized to establish standardized designs. The lack of such a library resulted in ad hoc and inconsistent design implementations across their products and interfaces.

Why did we choose to build design tokens?

Design tokens would allow Aigens to systematize and organize component/design values to maintain:

- consistency by using the same tokens over and over again across all my components and products. 

- collaboration + efficiency in our designs when everyone uses the same vocabulary to define visual attributes (pt, st, component) = facilitate effective communication and alignment between different team members, especially designers and devs



Designers can define design tokens, and developers can implement them, ensuring that the intended visual style is accurately translated into the final product.

Impact

With the help of the design system we could redesign our screens more efficiently and faster.

New version (left), old version (right)

Process

- Site audit Aigens’ existing components
- Build a 3 tier design token architecture (pt, st, ct)
- Take inspiration from other design systems such as Material design and Salesforce
- Use the 3 tier design token architecture to build components
- Naming and documenting design tokens
- Documentation of components
- Handover to development team
- Collaboration with development team to build/implement components

We opted for this process because we believed it would provide the most efficient path to complete the project within the specified 6-month timeframe, while fostering collaboration with developers and other departments.

Site audit Aigens’ existing components

Inconsistent spacing gave a rise to the lack of uniformity or inconsistency in the distances between various UI elements, such as buttons, text blocks, or images. This resulted in a visually disjointed and unbalanced layout, leading to a suboptimal user experience.



Inconsistent typographic style gave rise to uniformity or inconsistency in the use of fonts, font sizes, font weights, line spacing, or other typographic elements within Aigens’ design. When typography is inconsistent, it can lead to visual confusion, poor legibility, and a disjointed overall design.
Inconsistent layout gave rise to lack of uniformity or inconsistency in the arrangement and placement of UI elements, content blocks, or sections within a design. This resulted in a visually cluttered and confusing interface, making it difficult for users to navigate and understand the content hierarchy.

Take inspiration from Material design and Salesforce design system

We looked for inspiration from renowned design systems such as Material Design 3 and Salesforce, and the Gov.UK Design System. These established design systems serve as valuable references to inform our UX decisions and ensure a user-centered approach.
By studying Material Design, we gain insights into Google's comprehensive system, renowned for its clean aesthetics and intuitive interactions. We leveraged its principles and components to create a consistent and delightful user experience.
We leveraged Salesforce's design system offers inspiration for enterprise-level applications, focusing on scalability, accessibility, and usability.

Use the 3 tier design token architecture to build components

Having drawn inspiration and established our predefined parameters, we proceeded to construct our components using the three-tier design token architecture within Tokens Studio.

Conclusion

The outcome of this project helped standardise the UI and UX for all of Aignes’ products.