No matter how big the project is. It is easier to set up one with a design system at hand. Especially in the initial phases of the project. In Ackee, we have been focusing on the process consistency for quite some time and thanks to a design system, Our work has become more transparent and steady. Regarding our clients, we now have significantly more time to solve complex problems. And development teamwise, there are now clearer unified rules of cooperation. So how does a design system save time, energy and money?
Design system? What's that?
Design system is a complex set of UI and UX standards whose purpose is to organize designs into reusable components, patterns and fixed procedures. They are set up in order to make the work on a digital product easier and more transparent for all the people participating in the project.
Design system is not just a library of colors, fonts or buttons. It is a way the designer approaches the project and every time this approach is somewhat unique. It requires involvement during the whole lifecycle of the product from the moment of first contact with the client up to the resulting product and following cooperation.
It might happen that after the project is handed over, a different team of designers would be working on it — that is the reason why it is so important to have a design system well prepared from the very beginning. It helps the client as well as other designers to proceed correctly in further development of the product without the design losing its consistency.
How does the design system help us?
- Speeds up the work of designers and developers by allowing efficient replication of operations.
- Makes the initial designer work easier and allows the designer to focus on more complex and important issues.
- By defining the form of cooperation it creates a unified language between the teams of developers, designers, project managers and anyone else involved.
- It enables the creation of a visually consistent product which is also important for the development of new features.
- It serves as an education tool for all the internal teams as well as for clients.
When (not) to start creating a design system?
At the beginning, it is important to consider how big and complex the project we are dealing with is. Based on this we can decide whether it makes sense to build a design system and on what scale. In case it is a one time project or an event with a short lifespan without aspiration for continuation, there is no need to create a dedicated design system.
The task of UI and UX designers is to understand the wider context and have an overview not only of the basic technical aspects but also of the way project management is done or rather how all the teams are cooperating on the project work. That is why it is necessary to be on the same page with the development team and agree on the way the system is to be built. This step helps to eliminate many problems which would be awaiting in further phases of development. The setting of internal processes is also a part of a design system.
Ackee fast design system
Design systems that can be commonly found online as inspiration are created to build products of big proportions that have their dedicated design team or individuals capable of taking care of its maintenance — for example Airbnb, Apple or Google. These are very sophisticated and complex sets of processes, rules and other parts that make up the design.
In our case of app development in which we only have about 1–3 months for a project, a full scale design system would not work, because such a short period of time does not allow to create a relevant and functional output. Despite this fact we managed to optimize and automate this common approach in Ackee. We created a simplified version of a design system in the form of a template which allows us to build it fast and efficiently.
It is necessary to consider that a design system is a part of a more complex process (that includes our design principles) and all its parts are bound up:
- Understanding the needs of the client and users
- Creation of a wireframe prototype of the product
- Creation of a design system
- Communication and hand-off amongst all teams
- Control of the implemented solution
Atomic design vs. Ackee Atomic
In many cases, the atomic design system is used. It has a clearly defined logic upon which the building of design systems is done. It consists of atoms, molecules, organisms, patterns and pages — which already sounds like quite a lot, right? The definition of such a system requires many (redundant) steps and its complexity is the reason why it is often impossible to use its structure. The mere selection of the elements we would like to use and subsequent presentation of such a monster of the system to the developers (let alone its implementation) would cost us a lot of time, but most importantly money.
That is why in Ackee, we have selected only its most important and stable parts. Which we have used to create a template that we use for each project. We created the template in cooperation with development teams (whether it is frontend, team of project managers or any other team). We reduced the original atomic design by two sections and created Ackee Atomic (AA) with the following structure: Tokens, Components and Layout. For short-term projects, that is all we need. It is, of course, possible to set up a design system this way for larger projects with long-term continuous development as well.
Tokens: basic building blocks of the design system
It does not matter which design software we are using — in the template, we have defined basic approaches to the organization of components and their naming. This way, each designer always hands over their work to the development team in the same structure which everybody is familiar with. These Tokens whose logic remains the same are the basis of a design system:
- Colors and their hierarchy
- Text styles
- Naming convention for components and their states
- Exportable assets
- Exportable App Icon
- Template for Google Play and AppStore screenshots
Token creation marks the initial moment of design when there is always chaos amongst developers and designers alike. In the case of Ackee, colors and text styles are often the issue — it is important to have these well prepared (in case that we need to change colors in the whole system later on). In case the client would require adding dark mode to the application, well predefined colors in the design system allow us to do it easily in a couple of clicks. In the opposite case, we would have to completely redo the project which would require a lot of time and work on the part of design as well as development. Based on our needs we can also add layout elevation, corner roundness and other parts of the design that are not components by themselves but act as building blocks for them.
In the case of components that are composed of already well defined Tokens we mostly have a free hand — everybody knows how to design a button, text field or modal window. For example a common button consists of Tokens such as background color, text style with color and corner radius. That makes a specific component which we can add to the “components” artboard where we add its different states as well. It is important to keep to the defined structure of the artboards and the naming convention.
Design system: a few steps ahead
We reduced the complexity of design by approximately 70 %. As a result, it is easier to explain how we work to junior designers, developers and new colleagues. Unified communication and shared processes amongst teams help to get rid of questions such as “Where should I look for icons when you did not send me a link?”, “What does an error state look like?” or “Are there any defined text styles?” and more…
As we can see, a design system is an integral part of most of our projects – our work is not just about handing over the final designs. It is also about creating processes that allow this handover to be easier and smoother. That is why it is important to automate these processes, keep them in order and always think a few steps ahead. With a design system in mind, we can save an incredible amount of time.
