Apolo Design System
Company
SimpliRoute
Year
2021
SimpliRoute is a company revolutionizing logistics by helping businesses provide fast, efficient, and smart deliveries to their customers. Their mission is to transform logistics operations with intelligence and innovation, offering accessible solutions to elevate their clients to the next level.
The problem we faced was a lack of a unified visual design guide across our numerous digital products. The Design team had to spend excessive time creating unique visual styles for each product, which was illogical since stakeholders desired an omnichannel feel. For example, we had five different button styles, each with a different color, and no consistent color guide.
Additionally, the Development team repeatedly spent significant time coding each new product from scratch, leading to delays in deliveries and extending our time to market.
This project offers several opportunities for SimpliRoute. A unified visual design guide will ensure a consistent look across all digital products, saving time and allowing the design team to focus on strategic tasks. A standardized design system will speed up product delivery and reduce time to market, improving collaboration between design and development teams. Well-designed products will enhance the user experience and help us stay competitive in the market.
This project aims to make all digital products look the same, make the design team work faster, make it easier for developers to work on the designs, make the design and development teams work better together, and make customers happier with a better user experience.
We entered our first phase, Discovery.
We always ask ourselves who we design for. We solved the problem for everyone at SimpliRoute because our digital products didn't have a consistent design guide. This affected all teams. Marketing faced challenges without a unified framework, resulting in varied and disconnected digital experiences. A unified design guide will streamline design processes, ensure brand consistency, and improve collaboration across teams, resulting in a more efficient and harmonious approach to all of our digital products and marketing efforts.
Having this definition already done, we started doing the hard work, we had to make a compilation of all the visual digital definitions so that we have a view of what is used and what is not, then, we started with the compilation of components in all their digital products.
We had a list of the components, so we made a chart to rank them. This chart helped us decide which components to work on first. This approach helped us plan for future construction and use resources more wisely, which made it easier to implement our design system.
Way of Work
Having our foundations ready, we started with our first definitions, we started to define our work structure, tools and technologies we would use.
Based on this, we had two teams working on this, design and development, in terms of the tools we were going to use for design were these
Design Tool: Figma
Project documentation: Notion
Design System Documentation: Zeroheight
Technologies: React and React Native
Design System Documentation in Development: Storybook
Foundations
Once we defined our work path, we started with the first visual definitions, our discovery stage allowed us to understand what were the colors, fonts, icons and other assets that would allow us to continue with our work.
We made a definition together with the design team about our global tokens, which were the following:
In typography we made three definitions, which were sizes, weights and lineheights. While in borders, we defined Border Radius and Border Widths. In addition, we made some definitions in Effects, such as external and internal shadows.
While this was happening, we met weekly to make the nomenclature definitions of our tokens, it was a joint work because, each defined variable had to be applied in both design and development.
I want to explain a little of the nomenclature structure by which we were based, which was as follows.
$system-category-concept-property-variant
This can be seen in practice as follows
$apl-color-feedback-background-error
All this allowed us to build our components, here is an example of how it allowed us to build our button.
Construction
We already had our main definitions and we had to get down to work, remember our priocission table? well we used it.
This is how we went about designing our components, the design and development team worked hand in hand, this allowed us to design and build our components at the same time, which shortened the launch deadline.
.jpg)
Apolo Design System had its first release 3 months after the beginning of the project, it helped us to give a new image to the digital products that the company had and to enter better prepared to the American and Brazilian market.
The project had a high adoption rate, to be specific, it was 87% and was adopted by different teams, among them Expansion, New Modules and Marketing.
.png)
This project filled me with knowledge, it was my first time working a design system from scratch and also leading a multidisciplinary team from different parts of Latin America, I think it is one of the projects that made me grow the most in 2021 and which has had a great impact within the startup.
If you want to read more about the project and go into each of the definitions that were made, I invite you to read a little more at design.simpliroute.com
