Armada 2.0: Kick Off!
Kargo Technologies In-House Design System (DS)
What is a Design System? Why do we need it?
A Design System is the single source of truth that combines all the elements that will provide resources for the teams to design, realize and develop a product. A Design System is not a deliverable but a set of deliverables. Hence it will evolve constantly with products, tools, and new technologies.
Design Systems have already been used in the tech industry for a long time. Some examples of popular Design systems by other companies are Twitter has Bootstrap, Salesforce has Lightning, Alibaba has Ant, Gojek has Asphalt and now Kargo decided to make their own Design System called Armada (Showcase TBD).
We need a design system because it will enable teams to work faster with consistency. There will be less miscommunication between product, design, and engineering which in turn will provide more time for productivity and increase overall product quality.
What is Armada?
The meaning of “Armada” means a fleet of trucks/ships/planes. This name correlates with our company Kargo Tech which is a tech logistics company based in Indonesia.
As part of the initiative of design and engineering at Kargo Tech, We are building our very own in-house Design System. This is a major milestone to form a bridge for product and engineering for multiple benefits in areas such as productivity, quality, efficiency, delivery, and so much more.
The Armada core team consists of designers and engineers that have true passion and interest in a design system. All core team members are volunteers to this project and currently, we have 12 active core members ranging from designers to engineers.
Armada Plan
Armada is designed to make consistency between each Kargo products, creating consistency is not an easy task especially in terms of adoption. We are planning to create a seamless adoption in which we are getting help from our designers and also engineers to build up the DS with the adoption goal in mind.
Many people have considered creating and adopting a DS in a big-scale company is an astronomically difficult task to do both from design and engineering perspectives, well that’s for others. We in Kargo believe in big bold bets so Armada should be our big bold bet and redefine the process of DS adoption much easier for designers and engineers in any way possible.
Now Let’s Dive Into Armada Tech Side
Engineering Vision & Mission
Engineers want to make Armada as flexible and usable in many current technologies, for example in Web, Mobile, or Native Applications. This is a big plan we have for Armada which we need to complete and deliver.
Our engineering team will first focus on the Web Applications requirements as a priority, also bringing Armada to other platforms down the road. The UI library we are going to first support will be React because it is the UI library that is being used for Kargo products.
Engineering Decisions
A few highlighted engineering decisions we want to share here are:
- Using Linaria for our CSS in the JS library, We picked this because we can generate our CSS that is portable at build time. In our vision, we want to make Armada available on other platforms in which making the Armada framework agnostic design system as possible.
- We will first focus on the web application support for this DS because most of our products are developed for the web application for desktop. This also means that we are saving time and cost to build our DS which is crucial and part of our vision. We want to make sure that the development of this DS is faster and adoption is fast.
- TypeScript, come on it is 2022. We need type safety for our codebase which can reduce the amount of bugs that can appear in our DS. This can further improve our engineering productivity and great developer experience.
- Storybook will be our component playground for designers and engineers to try and get full documentation for our DS. Storybook itself has many plugins to support us in development and also it is easy to implement.
What has been done so far?
We finished the stage of validating design decisions from designers and combining it with engineering decisions to start building the DS. For engineers, we are creating RFCs for each component because we all are working on different teams and these RFCs can make all contributors have context on the same page.
Armada in its current state has cleared the foundation-level tokens such as Colors, Sizing, Typography, Spacings, etc. Furthermore, we have planned to be building more foundational components for other engineers to build something based on our DS. We are planning to release the foundation tokens as soon as it is ready and accepted by the designers.
We are targeting start Armada adoption to start in mid-Q1 2023. This means Armada will start appearing in our products and be consumed by our users. We are also setting up channels to receive feedback and suggestions for Armada.
What’s next for Armada?
We are also looking forward to having more contributors on board to the Armada Team. With more people involved, it will bring Armada to another level.
There is still no plan to make Armada DS to be public, but if we do have many interests from the public we can start planning for it.
For now, We will be continuing our development for Armada and we will be posting updates through our medium. If this article excites you or you are interested in Armada itself please give this article a clap and follow Kargo!
