The biggest challenge for this project was to reorganise every single atom of this mobile application in a short time and saving developer's time during the development process, and I started to analyse every part of this product and understand the information architecture and then to create the design system for Digital Garage.

One of the most important things to keep in mind when I worked on the Design System is that I need to keep all organised, also internally for the design team. For example, for the new joiner in the design team, it will be easier to understand how the product function, where are the right elements that he needs, etc.

My responsibilities were to create the design system from scratch, reorganise the style guide, creating a fully clickable prototype, prepared all the assets for the developers and project maintenance and design system organisation.

This system is mainly based on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.

This foundation loosely defined our typography, colours, icons, spacing, navigation and information architecture, and proved essential for guiding our work in a unified direction. Reviewing our collective work at the end of each day, we began to see patterns emerge.

I analysed what I have already in place, and I make a plan for how to go forward quickly and then I started to work on the style guide. I decided to define the layouts first and based on the layout after refining all the atoms and molecules.

To begin with, we started designing basic atoms of our design system like font, primary colours, icon set.
Things got more exciting and tangible when we started combining these atoms to form molecules like buttons, form fields, table cells etc.

Then we changed our approach a bit. We started using those atoms and molecules simultaneously to see if they worked well in real pages. For example, we defined different levels of H1, H2, subheading in typography to conclude page headers.
It helped us validate whether those components worked or not. If parts didn’t work, we made changes at the atomic level again.

Templates consist mostly of groups of organisms stitched together to form pages. It is here where we start to see the design coming together and see the layout in action.

I'm proud because I worked on a massive project like Digital Garage and because I created a vast design system that will help the future of this product and the way of working with this design system.

In the end, as always you need to create the full prototype with the main screens, share it with the team members and test it! If there are issues, you can iterate it and check if there are some issues that need to be solved. If everything works well, you can prepare the assets and give support to the developers during the development process.