UI Systems 25'
Evangelising Design Systems
Evangelising Design Systems
My journey evangelising Design system systems started back in 2016 when I discovered Atomic Design book by Brad Frost. was completely new for me to understand how I could organize and link every element to each other and make it more flexible to manage.
My journey evangelising Design system systems started back in 2016 when I discovered Atomic Design book by Brad Frost. was completely new for me to understand how I could 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 everything about building design systems with specific methodology and tools. After consuming so much content, I realized I needed to raise awareness in My Design Community.
Then were Material Design, Nathan Curtis, Airbnb, GOV.UK, and more. I started watching and reading everything about building design systems with specific methodology and tools. After consuming so much content, I realized I needed to raise awareness in My Design Community.
The very first Product Tank Tbilisi, 2018
My friend, Hayk Asriyants who organizes very cool events in Georgia invited me to the very first Product Tank Tbilisi event, where I spoke about design systems and Atomic Design methodology. The concepts were completely new for the audience.
My friend, Hayk Asriyants who organizes very cool events in Georgia invited me to the very first Product Tank Tbilisi event, where I spoke about design systems and Atomic Design methodology. The concepts were completely new for the audience.
Opportunity in Bank of Georgia
Opportunity in Bank of Georgia
Bank of Georgia is Georgia's second largest bank serving 2M+ customers and by total assets after TBC Bank It is considered to be a systemically important bank by the National Bank of Georgia.
Bank of Georgia is Georgia's second largest bank serving 2M+ customers and by total assets after TBC Bank It is considered to be a systemically important bank by the National Bank of Georgia.
I joined Bank of Georgia as a Senior Product Designer in 2018. We were 8 designers building products with cross-functional dev teams, but everyone was working in chaos.
I joined Bank of Georgia as a Senior Product Designer in 2018. We were 8 designers building products with cross-functional dev teams, but everyone was working in chaos.
The problems were obvious:
The problems were obvious:
Inconsistent UX & Interfaces across all products
Design files couldn't sync between teams
Months-long designer onboarding
Constant developer handoff clarifications
No quality standards or review process
Components recreated from scratch every time
Brand guidelines not systematically applied
Inconsistent UX & Interfaces across all products
Design files couldn't sync between teams
Months-long designer onboarding
Constant developer handoff clarifications
No quality standards or review process
Components recreated from scratch every time
Brand guidelines not systematically applied
My Role
My Role
I was one of the first team members who laid the foundation of design systems at Bank of Georgia. From advocacy to execution.
I was one of the first team members who laid the foundation of design systems at Bank of Georgia. From advocacy to execution.
I helped found the excellence team with our head of design and drove adoption across the organization. Later, I became owner of bog.design platform.
I helped found the excellence team with our head of design and drove adoption across the organization. Later, I became owner of bog.design platform.
This became one of the first public design systems in Eastern Europe by that time.
This became one of the first public design systems in Eastern Europe by that time.
Methodology and DesignOps
Methodology and DesignOps
We didn't jump straight into building components. That's where most design systems fail at scale.
We didn't jump straight into building components. That's where most design systems fail at scale.
First, we studied organizational models for enterprise design systems. There are three approaches:
Solitary,
Central (Core),
and Federated.
First, we studied organizational models for enterprise design systems. There are three approaches:
Solitary,
Central (Core),
and Federated.
Before choosing our federated model (central excellence team supported by product designers) we had to advocate hard. This was 2018. Design systems weren't mainstream. No banking best practices existed.
Before choosing our federated model (central excellence team supported by product designers) we had to advocate hard. This was 2018. Design systems weren't mainstream. No banking best practices existed.
I remember our first Design System Meeting. Almost 50 people: dev teams, product teams, compliance, operations. Everyone had opinions and critical questions.
"Why should we do this?"
"How will this affect our timelines?"
"Who's responsible for maintenance?"
I remember our first Design System Meeting. Almost 50 people: dev teams, product teams, compliance, operations. Everyone had opinions and critical questions.
"Why should we do this?"
"How will this affect our timelines?"
"Who's responsible for maintenance?"
Literally us, fighting and advocating
The strategic approach
The strategic approach
If you are starting to build a design system or small style guide, the first thing you would do these:
If you are starting to build a design system or small style guide, the first thing you would do these:
Audit existing components across all teams
Create shared governance model
Build design tokens first (colors, typography, spacing)
Establish contribution guidelines
Plan systematic rollout
Audit existing components across all teams
Create shared governance model
Build design tokens first (colors, typography, spacing)
Establish contribution guidelines
Plan systematic rollout
Audit is the key
Audit is the key
Since we were already creating products with existing designs, we discovered that we had a lot of identical and different design elements and components.
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.
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.
Create Shared Governance Model
Create Shared Governance Model
Nathan Curtis Article: Team Models for Scaling a Design System
Design systems aren't just about pretty components. They're about people, processes, and decisions.
Design systems aren't just about pretty components. They're about people, processes, and decisions.
As I already mentioned in previous section, we studied three organizational models: centralized, federated, and solitary. After researching how other enterprise companies structured their design systems, we chose the federated model.
As I already mentioned in previous section, we studied three organizational models: centralized, federated, and solitary. After researching how other enterprise companies structured their design systems, we chose the federated model.
Our structure:
Our structure:
Central design system team (excellence team)
Product designers as system contributors
Clear decision-making hierarchy
Regular review cycles
Contribution approval process
Central design system team (excellence team)
Product designers as system contributors
Clear decision-making hierarchy
Regular review cycles
Contribution approval process
Everyone needed to know who owns what, how decisions get made, and how changes get approved. Without governance, design systems become chaos with better documentation.
Everyone needed to know who owns what, how decisions get made, and how changes get approved. Without governance, design systems become chaos with better documentation.
Build Design Tokens First
Build Design Tokens First
Tokens are the foundation of everything. If you start with components, you're building on quicksand.
Tokens are the foundation of everything. If you start with components, you're building on quicksand.
We collaborated with our Marketing department to establish design tokens that aligned with our brand guidelines. This wasn't just about digital products. Everything had to work across digital and print touchpoints.
We collaborated with our Marketing department to establish design tokens that aligned with our brand guidelines. This wasn't just about digital products. Everything had to work across digital and print touchpoints.
Our token categories:
Colors
Typography
Spacing
Icon system
Layout and grids
Shadows and elevations
and more…
Colors
Typography
Spacing
Icon system
Layout and grids
Shadows and elevations
and more…
Tokens gave us the atomic level consistency we needed. Every component built afterward would inherit these foundational decisions.
Tokens gave us the atomic level consistency we needed. Every component built afterward would inherit these foundational decisions.
Establish Contribution Guidelines
Establish Contribution Guidelines
30+ teams need clear rules. We created a structured workflow that every contributor follows.
30+ teams need clear rules. We created a structured workflow that every contributor follows.
Each stage has specific deliverables and approval gates. No component enters the system without completing the full process. This ensures quality and consistency when multiple teams contribute to one system.
Each stage has specific deliverables and approval gates. No component enters the system without completing the full process. This ensures quality and consistency when multiple teams contribute to one system.
First Public Banking Design System Guideline
First Public Banking Design System Guideline
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.
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
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.
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.
Closest version
Closest 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.
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!
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.
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.
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
In the summary
• 400+ active elements in the Design system
5x faster-building process
30 Product teams are using and contributing actively
Agile friendly Design processes and system
Unique Communication and Design language
~500K engagement around bog.design launch
• 400+ active elements in the Design system
5x faster-building process
30 Product teams are using and contributing actively
Agile friendly Design processes and system
Unique Communication and Design language
~500K engagement 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!
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!