Start
My journey evangelizing Design system systems started when I discovered Atomic Design book by Brad Frost. It was so new for me to understand how could I organize and link every element to each other and make it more flexible to manage.
Then were Material Design, Nathan Curtis, Airbnb, GOV.UK, and more. I started watching and reading a lot about building design systems with a specific methodology and tool. After reading and watching so much stuff I realized that I needed to raise awareness in My Design Community.
My friend, Hayk Asriyants who organizes very cool events in Georgia invited me to the very first Product Tank Tbilisi event, where I was speaking about Design systems, Atomic Design methodology and it was so new for the audience.
Opportunity in Bank of Georgia
I started working with the Bank of Georgia as a full-time Product Designer. In the beggings, we were 8 Designers on the Design team and each of us built products with cross-functional dev teams.
Major problems identified
As I said we were only 8 people on the design team, then we started growing very fast with developers as well, we were creating so many products then we realized problems:
-
Inconsistent UX and Visual Designs
-
Synchronizing design files was so hard
-
Building products were so slow
-
Flexibility to work with cross-functional dev teams was so bad
-
Not having a design language
-
Not having a design culture
Methodology and Design OPS
After identifying problems we were deeply searching for the right model for us to build a better design team with a design system as well. Our head of design was attending many conferences about building design for corporations. There are three models when you are building a design system for a big company
from this, we discovered that It was a matrix model that needed to make some changes to fit our reality and we chose it.
Building tokens first
If you are starting to build a design system or small style guide, the first thing you would do is set up tokens:
-
Colors
-
Typography setup
-
Spacing
-
Layout and grids
-
Canvas and shadows
-
Multimedia assets
-
UX writing
That's what we did in the first place with the collaboration of our Marketing department to achieve consistent design tokens across our brand guideline
Building components then
Since we were already creating products with existing designs, we discovered that we had a lot of identical and different design elements and components.
The Head of Design decided to run a workshop where all the cross-platform teams would bring their design elements, and components they used in the products, and audit them. Our plan was to merge visually and functionally identical elements together and build components and organisms with states through our design system tokens.
Distributing design system
As I have already mentioned, the design system is for everyone. In the building process participated many people from different cross-functional on its assembly, so it was necessary to have consistent communication with each other, give the correct names to the components, and agree on the assembly process in general.
Drafting bog.design website
Once we have successfully contributed and established a stable version for the design system.
We considered it necessary for others to share this story with the fact that we created the first large-scale design system in the region at the Bank of Georgia, which was used by more than 30 teams in total and would be implemented in many projects or products.
Building V1
From the beginning, we decided what elements to bring in the first version:
-
Design tokens
-
Design elements ( buttons, form elements, interactive elements, cards and etc)
-
Multimedia assets
-
About Brand guideline
-
UX writing guideline
But for a number of reasons this version has moved from a list of important priorities to a list of the lower priorities list.
Once we started re-launching this platform we were given time in which we could improve the platform navigation and documentation, along with the visual elements.
Decent version
We started improving UX and Visual design along with the content. The goal was to show more value.
We started communicating with the marketing department, that we would need massive communication in our segment.
Launch!
As I mentioned the marketing team was actively involved in this process, we asked them to create a video in which we explained the design system more easily to others.
I actively participated in the work on the video, both in the creation of storytelling and in the Art direction of the whole filming process.
In the summary
-
400+ active elements in the Design system
-
20x faster-building process
-
15 Product teams are using and contributing actively
-
Agile friendly Design processes and system
-
Unique Communication and Design language
-
200K engagment around bog.design launch
and more, which is converted into brand values, culture, and revenue.
Shoutout to bog.design team and the rest of the digital teams who were participating actively contributing design system!