Forehead Design System

Multi-platform Design System for GOI logistics ecosystem

RESPONSIBILITIES

Strategy

Product Design

ROLE

Lead Designer

YEAR

2018-2019

Context

GOI is a Spanish company that aims to deliver technology solutions to the logistics industry. When I joined the organization in June 2019, it was still in its early stages, with just about fifteen members in the team and just beginning to produce the first lines of code.

As the company's first designer, my role was to not only create the first designs for our applications, but also to establish a structure and methodology for the team to expand with the company.

As GOI grew, it became increasingly important to maintain a consistent style and visual language across all of our products. We desired more rigorous techniques to leading and optimizing our joint efforts with over five apps and counting.

The major purpose was to create a collection of reusable components driven by defined principles that could be combined to satisfy new business and product objectives.

Challenges

Because the software environment at GOI was so fast-paced, it became clear that we needed a robust structure that would allow us to build new products both quickly and effectively.

Because of the demand to produce a new product on a regular basis, as well as new team members joining us, there were other people working on the same file, which might become chaotic if everyone uses different styles for the same component. This also generates considerable confusion and difficulties for our development colleagues.

Principles

A design system is a collection of reusable components that may be built together to create any number of applications.

I detailed the guidelines and best practices for adopting Atomic Design to make our system scalable and efficient.

Spacing

We chose 8px grid rules to spread out the components and build a system that is adaptable, scalable, and stable.

Primary colors

Because each of our apps has its unique color scheme, we require various palettes with distinct basic colors.

Support colors

The neutrals, feedback, tag colors, and gradients in the support palette were utilized for branded materials.

Typographic scale

Our band used two fonts: Barlow for large headlines and display texts, and Inter UI as our default and general usage font.

Icons

We embraced emojis as a component of our brand identity for numerous uses, but for the interface, it is best to use classic, highly identifiable and legible iconography.

As a result, we chose a library that suited our needs and aesthetics and produced many more in-house.

Buttons

For our clickable components, we built a three-level hierarchy, as well as each state for the various types of buttons and links.

Forms & inputs

Establishing all of the potential form components' states in advance allows us to be ready for any new type of information that could be introduced into our system and avoids development friction caused by not having some states specified when developing new features.

Designer experience

The objective was to be able to easily develop new solutions and features while minimizing the risk of inconsistency when co-designing. To ease collaboration and version tracking, we utilized Sketch Libraries and Abstract to manage and sync our designs.

We hosted our Design System in a separate file that was shared by all of our projects and UI assets and continuously adjusted our files to be more productive and agile as new versions of Sketch got released.

First, we developed our shared text and layer styles to accommodate any eventuality, and then I organized the symbols into an Atomic Design hierarchy, allowing me to simply explore and pick the component and state required.

Conclusions

Creating and maintaining a system like this is undoubtedly a lengthy process. It's easy to wonder whether all that effort is worthwhile throughout the process, but after several months of building, cleaning, and enhancing, I can promise you that it is. Its capacity to boost your ability to design new interfaces or make substantial adjustments in a short period of time is priceless. 

Thank you for your time! Make sure to read the Midday Design System case study to check how my process on working on Design Systems has evolved in the past years.

Have a cool project? Let's work together ☺︎