System is a design system specially conceived and designed for the Amiltone agency.
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.
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
As a designer, how can I be productive using System while responding to project issues ?
Developer
As a developer, how can I develop products more efficiently and consistently with designers and the customer?
Agency's client
As a customer, how can I benefit from a complete expertise and quickly test my product?
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
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
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
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