My role

Seniur UI Designer

The SEND Design System

After joining the product team in December 2021, he built the company’s first design system library from scratch in Figma. We used them to share style components across all platforms: consumer apps, sender apps, rider apps, websites, CMS, marketing emails and their assets.

Space & grid systems

You can only build a good house with a good foundation. The basis of a proper design system is built in a precise space and grid system. They are one of the most overlooked visual design elements, and their inappropriate use can make a huge difference and mess in all subsequent design and work environments. In this project, the “8pt grid system” consisting of a 12-column grid and an 8px baseline was adopted as the foundation. By using a rem-based guide that matches 8px, all screen sizes are divisible by 8, so the applicability of the design system is enhanced, and a highly versatile system can be constructed.

Typography

We wanted to use clean and versatile fonts across all our products. Our creative designer selected Helvetica Neue LT Pro because the letter geometry and inter-letter spacing were perfect. It’s also very versatile, comes in several weight variations, and looks great as a headline font or body text, so we made it native.

Iconography

SEND’s design system used the icon library from ‘Coolicon’, available free of charge and well suited to complement the overall visual language of the system. Icons with too many variations increase cognitive load, so we selected a simple icon set. We focused on simplicity so that users can understand the concept of icons and recognize them even on small screens.

Colour Palette

A single type of button generally has multiple states, such as active, hover, focused, and disabled, and may require loading depending on the specification. In SEND, we decided to use four different purpose buttons that combine all five states and the capability to show the left and right icons. The atomic master component has all states, and the components and variations derived from it are managed in one place. Easy future updates.

Button

A single type of button generally has multiple states, such as active, hover, focused, and disabled, and may require loading depending on the specification. In SEND, we decided to use four different purpose buttons that combine all five states and the capability to show the left and right icons. The atomic master component has all states, and the components and variations derived from it are managed in one place. Easy future updates.

Form Field

Form fields are another of the main components that need to support multiple different states, like buttons. We considered “web accessibility” recommended by W3C when designing. Added essential components such as dropdowns, radio buttons, checkboxes, and toggles, along with multiple states such as error, success, and hover. Combining the components into one can be used according to the purpose.