System

Image qui représente les composants du design system

System is a design system specially conceived and designed for the Amiltone agency.

About

01

Team

Amiltone

Role

Lead UX/UI designer

Need

Design a scalable design system that can be adapted in a few clicks to the needs of an agency's client. The product also allows to create web products quickly and consistently between the design and development teams.

Immersion

Research

02

Before actually starting the project, we asked ourselves about our objectives, the tools we were going to use, the level of scalability of the product, etc. A set of questions that allowed us to delimit the bases of the design system.

The product is large-scale and must correspond to three main targets: designers, developers and the agency's clients. The collaboration between the first two is crucial to the success of a project and to respect the business constraints of each. The end result of this well-established collaboration is the realization of a product that corresponds to the client's needs and the possibility to easily make the project evolve.

Main targets

designer

Persona illustré avec un café

As a designer, how can I be productive using System while responding to project issues ?

Developer

Persona illustré avec des lunettes

As a developer, how can I develop products more efficiently and consistently with designers and the customer?

Agency's client

Persona illustré avec un ordinateur

As a customer, how can I benefit from a complete expertise and quickly test my product?

Conceptualization

Co-conception

03.a

The second step of the project was to establish the styleguides. These include the graphic identity of the product, the tone, the logos, etc. Finally, everything that represents the DNA of the agency to speak the same language and this, despite the diversity of trades. In collaboration with my colleague and friend Thomas MONAVON, we imagined the guide styles to be as modular as possible.

The objective with this is that in just a few clicks, we can adapt all the styleguides to the image of a client.

Preview of the styleguides

Focus on the guidelines

Image qui synthétise les styleguides du design system

Creation

03.b

Within Amiltone, the field of competences is very wide: we can produce native IOS and Android applications as well as web and responsive products. All this is in addition to the notion of wireframes, light and dark mode of a digital project. From the beginning, we had to understand the need to adapt to all types of requests.

After listing the components to be created, we finally designed a system for IOS, for Android and for the Web. System is a collection of all these creations, in other words, it's a design system of design systems.

Overview of the components

More than 6 000 components

Image qui représente les composants du design system
Implementation

Prototyping

04

The level of complexity and modularity to which we wanted to bring the design system raised a lot of questions about the nomenclature, the organization of files and tools, the coherence between the teams, etc.

After 1 year of work, we are now able to adapt more than 6,000 components to a client's charter in just a few clicks. Productivity is therefore increased tenfold, both for designers and developers. We now work hand in hand to best respond to customer requests.

Test, improve and redo

Selection of some components

Preview

Image qui résume les 6 000 composants du design system
Review

Introspection

05

Creating this design system was the longest and most complex project I've ever had the chance to work on. I learned a lot about collaboration between designers and developers. Designing together makes it easier to understand each other's business problems and to find solutions together. I had to learn the IOS and Android guidelines to adapt the components to the structures imposed by these web giants. In short, it was an extremely complete and interesting project on all points, if I had to do it again, I would do it again without hesitation to continue to learn more!

thanks to amiltone for its trust

Next
Écran de pésentation du projet Izicamp, page d'un camping

Izicamp

06

Izicamp is the Airbnb of camping. This platform allows you to book your vacations by choosing an accommodation from a private owner or a campsite.

Website + RESPONSIVE + DESIGN SYSTEM
Roue avec le texte qui indique de cliquer pour voir le projet