The beginning of AmiGO Design system

AmiGO had rapid growth in team size and application demands. It hindered the evolution of the product and work methodologies, generating inconsistencies in the design process and the final product, due to the focus on short-term deliveries and results.

the development of a design system for the app aimed to solve the following problems:

The hand-off to developers was decentralized.
Components and nomenclatures were disorganized, without well-established rules or standards.
There was a lack of alignment between documentation specs and VD.
There wasn’t a simple source of truth for ready-to-go layouts and they were hard to build from scratch.

The process

UX/UI auidit

We start by mapping out the entire app experience and visualize all the screens and flows of each stage. After this step, we were ready to look at the UI's existing components holistically.
Atomic design

The second step was to conduct an analysis of the Sketch library. The goal was to identify the foundational elements- colors, typography, spacing, borders, and opacity - and group the components in a scalable manner, considering the constant expansion of the product over time.
Sketch to figma

After defining the foundations, UI framework, and atomic design structure, we start a migration from sketch to Figma, this brought new opportunities for collaboration and fast iteration.

The result

+800 Components created

Around 1000 variants to build the dark and light mode of the app

5 libraries ready to use cross product.

Brandind and visual style

Having a stable design system allowed us to have a clear definition of the product look and feel and start establishing visual guidelines for marketing materials.

Clean and friendly driving app

The usage of illustrations and little animations offer delight and personalization to the usually mundane task of driving, we wanted the app to feel like a friend as our name suggested and for this, we decided on a bright and vibrant design palette that will match perfectly the illustration style and tone of voice.