Garanti - BBVA

Responsive UI/UX Design for millions of bank users

tools & Methods

UI Design


UX Design

Design System

Figures in the visuals are purely illustrative.

Garanti BBVA is the largest private bank in Turkey, serving 12 million customers through 936 branches. When we started re-designing their online banking, they were already offering 195 features to 3 million monthly active users.

Our challenge was not only to create a design that works for everyone, regardless of what experience they have had with existing tools but also maintaining its full-scale banking functionality.

Many banks offer online banking, but from design elements to the structure of the page, they are all different, and each has their own way of working. Garanti wanted to make users fans of their financial service. In this project we weren't focused on trying to figure out how to sell the same set of financial products in a new interface, but rather, on figuring out what the customers are trying to achieve and how to enable them to do it best and fast. To achieve that, we should get to know them better and look at the world through their eyes.

Meet your users: In order to uncover the needs, we interviewed Garanti users and researched their financial behaviours. These in-depth interviews took 40–80 minutes each. We sat down with users and asked open questions to talk about their financial lives, how they felt about saving, investing, transferring, and spending their money. We also experimented with some visual aids such as card-sorting and draft prototypes, but honestly, our best feedback tools were our competitor's websites and products. We learned an incredible amount just by having people experiment with things other companies have already built.

Once we gathered the data from these interviews, we were able to come up with 6 personas that represent a gradient of behaviour and demographic patterns. We had to rethink some widely used patterns of banking UI design. Nevertheless, we retained user-friendly interaction models common in web interfaces. During the design process, we performed usability tests for each module to fine-tune our design.

Easy to read and navigate: We designed an easy to read, easy to navigate through the interface, to increase its usability and gain more trust from the users. To achieve simplicity without compromising in showing the essential and relevant information, we grouped items on the page that will save space and create more order.  We avoided excessive linking to other parts of the website, keep the goal of each page.  To build, and maintain this trust, in general terms, the following elements are created:

• Helpful introduction to key data.
• All money at a glance with the availability of quick spending insights.
• One-stop for all accounts.
• Financial activity feed instead of outdated history.
• Detailed information on each transaction should be available by simply clicking
• Money transfers and bill payments are included in the top priority scenarios of digital banking customer experience.
• Guidance through financial milestones.

Wide range of users:  We optimized the website for different user groups, from juniors to seniors and from colorblinds to bad sighted.

Enabling an Omni-Channel Experience:  “Meet your users where they are”.  Whether they prefer to bank on their phone, computer, tablet, or wearable device – we aimed an online banking platform compatible with any device. We started by taking a mobile-first approach, which enhanced the responsive design and generated an exceptional experience across all platforms and allow your users to jump from device to device.

Maintaining brand identity: The layout is fairly simplistic with many graphical features based on Garanti’s signature colour, green. Consistent with Garanti's brand image, their online colour palette supports their trustworthy, intelligent, nature-loving brand characteristics.Throughour the website we kept buttons, structures and menu’s in a consistent style and colour to ensure familiarity in using the site while being on different pages.  Also, to maintain consistency in further developments I have created an interactive design system for the use of internal designers.

This process was hyper-focused on the user, which allowed us to understand users and serve them an exceptional user experience, and transform them into brand evangelists. It was a critical milestone on Garanti’s continued success in digital banking, which lead Garanti to become an award-wining digital banking brand.

*Forrester’s “2017 European Online Banking Functionality Benchmark” evaluates the functionalities of digital banking and the security of the websites of 13 European retail banks. In the overall classification, which covers eight categories, Garanti Bank holds second place, with a score of 87 out of 100, second only to BBVA. According to the same benchmark, the best U.S. and Canadian banks scored a maximum of 86/100