```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2F55fc5953-a80c-426f-bb39-4cc655b5950d.png?alt=media&token=f97f3209-223b-473c-bb68-476520524912","id":"55fc5953-a80c-426f-bb39-4cc655b5950d","width":3680,"height":2382,"filename":"Screenshot 2022-04-10 at 20.55.44-min.png","type":"image/png","caption":"bog.ge homepage","border":false}]}
```

## **About**

### Before we start digging into the design process, I would give information about the company. Bank of Georgia is a leading company in terms of loan portfolios, deposits, assets, and stock shares.

## **Last update on the platform**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2Fb19f6b65-ff5f-482b-83e4-9cdc35ea4de9.png?alt=media&token=88850bed-f9f5-41ad-85fe-1eb1d3812f5f","id":"b19f6b65-ff5f-482b-83e4-9cdc35ea4de9","width":2636,"height":1616,"filename":"Screenshot 2022-04-10 at 21.05.12.png","type":"image/png","caption":"old bog.ge (2017)","border":false}]}
```

### As you can see, in 2017 the platform was in a ‘rectangular’ shape. The last update was made in 2014 and at that time this version fully met both the standards and the user experience.

## **Problems**

### The biggest problems that users faced were:

* Uncategorized information

* High drop-offs

* lowest customer satisfaction

* Bad accessibility

* Inconsistent user interface

* High bounce rate

* No e2e services

* No lead generations

* Low traffic

### Frequent surveys have shown that consumers are experiencing these problems more often than ever before

## **Goals and Strategy**

### First of all, our goal was to sort out the very large amount of information around the bank. We met individually with all the stakeholders and tried to determine what kind of information would be helpful to the given user through the platform.

### The next steps were to plan clearly written quarterly releases to bring the customer a good and up-to-date customer experience, which was further reflected in customer satisfaction, low bounce rates, as well as good user flows, and most importantly the platform would be accessible to all.

## **Content architecture**

### We have developed a stable model of content redistribution where the main Retail and Business directions remain and we also have segments such as SOLO, Wealth, Youth

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2F2484c0df-43e0-400c-b3ca-2952542f4020.png?alt=media&token=ceb08a9b-0378-4e79-80f0-e84de85c7421","id":"2484c0df-43e0-400c-b3ca-2952542f4020","width":1784,"height":772,"filename":"Screenshot 2022-04-12 at 14.27.23.png","type":"image/png","caption":"bog.ge","border":false}]}
```

### And for the rest of the content structure, we have created intermediate spaces where we can group the products by category.

## **Wireframes**

### In the first versions, we tried to save more space for Landing to make product information more relevant.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2F0c9fe180-0d78-4385-94a1-217bca45b488.png?alt=media&token=8455adb3-b276-42c5-a691-b6ba5ccdf35e","id":"0c9fe180-0d78-4385-94a1-217bca45b488","width":3840,"height":2160,"filename":"Bank of Georgia screen 3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2Fce813149-6f4a-4654-a2c8-c93790e76bfc.png?alt=media&token=82724557-b9e7-4b73-be2c-eb15c67c3343","id":"ce813149-6f4a-4654-a2c8-c93790e76bfc","width":3840,"height":2160,"filename":"Bank of Georgia screen 2.png","type":"image/png","caption":"","border":false}]}
```

## **Then Visual Design**

### For the launch, we tried to make the design as sophisticated and accessible as possible

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2F7ecd02a4-1ac7-4f73-a60b-180f41524a2c.png?alt=media&token=fdd10dc3-0adb-4af0-861a-cafef24bcc19","id":"7ecd02a4-1ac7-4f73-a60b-180f41524a2c","width":1920,"height":2716,"filename":"Homepage .png","type":"image/png","caption":"Home page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2Fbdd274de-3fe0-4653-9719-f4e596b6a53d.png?alt=media&token=5dfa7d26-c8d2-40f8-bf26-3e68b837aa66","id":"bdd274de-3fe0-4653-9719-f4e596b6a53d","width":1680,"height":1860,"filename":"Currencies.png","type":"image/png","caption":"Currency page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2F82bc0bcc-e2b1-455b-a602-b2d3de0dd89e.png?alt=media&token=a8ae1f21-f082-4992-b475-717e22d217fb","id":"82bc0bcc-e2b1-455b-a602-b2d3de0dd89e","width":1920,"height":2808,"filename":"Gaaremonte.png","type":"image/png","caption":"Mortgage","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2Fef066047-fe92-434e-b96c-17b663d28d4b.png?alt=media&token=f2676407-f8da-492f-95ec-eb556f83c041","id":"ef066047-fe92-434e-b96c-17b663d28d4b","width":1920,"height":3114,"filename":"Plus.png","type":"image/png","caption":"Plus membership","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FGSPyWm4W26aH9olznwaw%2F39bfa85d-60cf-484d-b9c7-9f4b2ed943e7.png?alt=media&token=eeadb603-0b71-4a84-ad52-57c166963cb9","id":"39bfa85d-60cf-484d-b9c7-9f4b2ed943e7","width":1920,"height":4263,"filename":"Mobile Banking.png","type":"image/png","caption":"Mbank","border":false}]}
```

## **Launch**

### The results of the first year after the successful launch had stats:

* 77% cSat

* 40% bounce rate

* low drop-off

* 300K monthly users

* Consistent design language

* Accessible for all platforms (Web, Tablet, Mobile)

* Generated over 60K leads

* Added e2e services

This is the stats of 2019yr, Now in 2022 these results have been doubled or event 3x and many other problems have been solved

Bog.ge - main banking promo platform

```cv
vimeo
{"url":"https://vimeo.com/697879733","width":1280,"height":720,"thumbnail":"https://i.vimeocdn.com/video/1411388342-6cd55e59c2815d7dfab3a35269451d43d71b8169b83d6f8d1c91d7617d84a18f-d_100x75"}
```

## **Start**

### My journey evangelizing Design system systems started when I discovered  [Atomic Design book by Brad Frost](https://bradfrost.com/blog/post/atomic-web-design/). 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](https://material.io/), [Nathan Curtis](https://medium.com/@nathanacurtis), [Airbnb](https://airbnb.design/), [GOV.UK](https://design-system.service.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](https://www.facebook.com/groups/uiuxdesignersge).

### My friend, [Hayk Asriyants](https://www.facebook.com/asriyants) who organizes very cool events in Georgia invited me to the very first [Product Tank Tbilisi event,](https://www.youtube.com/watch?v=W7stL-v0WQQ) 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

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F27a37cac-7f1b-48c2-ab7a-54cc69f6b2d8.png?alt=media&token=d5371f62-439f-411a-a542-64c81638de8e","id":"27a37cac-7f1b-48c2-ab7a-54cc69f6b2d8","width":2674,"height":862,"filename":"JBolton-article-4.png","type":"image/png","caption":"Design system models","border":false}]}
```

### 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F363ee667-3856-49ad-beea-cf8c4dbeed8e.jpg?alt=media&token=4a450c89-d24e-48f0-b2e8-3415a50291a6","id":"363ee667-3856-49ad-beea-cf8c4dbeed8e","width":1400,"height":788,"filename":"1_eCf0mtVgGlEUt3iDAhrZgw.jpeg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F529c752e-394f-4465-ae3b-d19088298d1c.jpg?alt=media&token=5969d92b-ca62-4efc-81c3-9aa5a339cc3b","id":"529c752e-394f-4465-ae3b-d19088298d1c","width":3024,"height":3024,"filename":"IMG_4089.JPG","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F2c47bfee-b7dc-46e1-9393-6997de5cea4d.jpg?alt=media&token=39be27bb-fc43-422c-9b87-27c912f46cd3","id":"2c47bfee-b7dc-46e1-9393-6997de5cea4d","width":4032,"height":3024,"filename":"IMG_4085.JPG","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F60a6be15-cc0c-4bee-807d-7a0a431c83e3.jpg?alt=media&token=4788136c-aa50-4a09-bf30-a75ecabc20b6","id":"60a6be15-cc0c-4bee-807d-7a0a431c83e3","width":4032,"height":3024,"filename":"5.JPG","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F96dbbed2-efc8-4bbb-adf3-8113e2c22261.jpg?alt=media&token=8791a78e-092d-489f-ac8e-52348b4a06be","id":"96dbbed2-efc8-4bbb-adf3-8113e2c22261","width":3024,"height":4032,"filename":"6.JPEG","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F24bc31e6-d13f-48fe-8c2f-2fe37bde5ea3.jpg?alt=media&token=aade443d-f526-4a64-bc42-fa67c5a3f686","id":"24bc31e6-d13f-48fe-8c2f-2fe37bde5ea3","width":3024,"height":2016,"filename":"3.JPEG","type":"image/jpeg","caption":"","border":false}]}
```

### 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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F3fe7f01e-3a77-4f0a-ad28-be4645be54ea.png?alt=media&token=9871b885-cfc4-4301-91d9-879790b91f5e","id":"3fe7f01e-3a77-4f0a-ad28-be4645be54ea","width":1400,"height":788,"filename":"1_LVlmWDgr4tYJfX2c99tQmw.png","type":"image/png","caption":"","border":false}]}
```

## **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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F031ac713-31ae-44c4-9263-f111b0efcc6c.png?alt=media&token=531b2c1c-de46-4a63-adae-c72438bc2351","id":"031ac713-31ae-44c4-9263-f111b0efcc6c","width":2048,"height":1200,"filename":"process.png","type":"image/png","caption":"8 step component adding process","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F163e7c93-e450-4a11-926c-2ac8063fea3d.png?alt=media&token=267c0e4b-5df4-4386-aafd-b0bcd5b5f392","id":"163e7c93-e450-4a11-926c-2ac8063fea3d","width":1740,"height":732,"filename":"1b8a352f-1e85-4c3d-9021-52cbf476a2f3.png","type":"image/png","caption":"","border":false}]}
```

## **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.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F360a61b9-dc0b-4f7e-90ad-0599cce82c2d.gif?alt=media&token=403a7107-bc6c-40ca-805e-f90957b22824","id":"360a61b9-dc0b-4f7e-90ad-0599cce82c2d","width":1440,"height":900,"filename":"Interactive_Component_Final_2-min.gif","type":"image/gif","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F50e875c7-edd2-4af9-870a-3d5cf84bf41f.png?alt=media&token=ab4c0441-12bd-4d9e-afa6-9a3f82fdf7b9","id":"50e875c7-edd2-4af9-870a-3d5cf84bf41f","width":5760,"height":3240,"filename":"Components collagen.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F73375135-feb5-4fb8-bccb-1dc77254862b.png?alt=media&token=0fbc3a40-8bcc-4842-89fd-511c2334c6af","id":"73375135-feb5-4fb8-bccb-1dc77254862b","width":5760,"height":3240,"filename":"Components collagen-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F0d05c258-eb89-4b3c-a99e-65b37ebea8f6.png?alt=media&token=a0dd6cf2-97f6-48cf-9563-63783e03b266","id":"0d05c258-eb89-4b3c-a99e-65b37ebea8f6","width":1920,"height":1674,"filename":"About Colors - 1920x.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F8a44fd1c-355b-457a-8e3b-55638a7fd16f.png?alt=media&token=1afacfd3-e458-42c0-afac-1bd73ab74b1f","id":"8a44fd1c-355b-457a-8e3b-55638a7fd16f","width":3452,"height":1882,"filename":"Screenshot 2022-04-12 at 21.55.30.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2F329c52d9-3a47-4641-a54d-7ea3aaf1e105.png?alt=media&token=c70db334-8f52-4d0d-84a1-17353a371c00","id":"329c52d9-3a47-4641-a54d-7ea3aaf1e105","width":3450,"height":1886,"filename":"Screenshot 2022-04-12 at 21.55.41.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FKc9sgwvch2fYKW6wOJFq4rlxi4i2%2FYJzhJ8HVAUELDcNNN2fQ%2Fb5dbcf25-3835-4fc7-9dab-b676601e19aa.png?alt=media&token=90dc2df9-cd95-404a-80b4-303d17b5b767","id":"b5dbcf25-3835-4fc7-9dab-b676601e19aa","width":3454,"height":1886,"filename":"Screenshot 2022-04-12 at 21.55.50.png","type":"image/png","caption":"","border":false}]}
```

## **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!

Building and Contributing BOG Design System

0 → ∞

Circle Landing

Bog.ge

Parcel locker Web and Mobile App

Locker

Design system

Logistic management app

Logistic managment platform

Techno club ticketing platform

Product Design Chapter Lead

Seed-stage London startup with a mission to build infrastructure for independent online educators. We have just launched an early version of our platform and have raised a $3M seed round to build and scale it further

Lead Experience Designer

Start a successful brand with 0 costs and comprehensively manage it in an all-in-one solution - website, printing, sales, packaging, delivery, and analytics.

Co-founder

Open Source Project that facilitates the formation and management of a Georgian design community which I founded in 2015 and already has more than 10,000 active monthly members.

Guri Sitchinava

Projects

Work Experience

Contact