Byblos bank is one of the leading banks in Lebanon; they have the second biggest market share after Audi Bank with 88 branches located all over Lebanon.
What was done: Main website redesign, UX Research, Wire-frames & Prototype.
Softwares used: Adobe Illustrator, Axure RP & Keynote.
Project done at Johnson Luke in 2015
UI Design and Development done by Born Interactive
The analysis was done for 3 international, 1 regional and 2 local banks: TSB (UK) , Bank of America, Citizens bank, Commercial Bank of Dubai, HSBC (Lebanon), Bank Audi (Lebanon).
We did an individual analysis for each of the above mentioned banks over each of the following red-routes, which are the main processes a user perform on a bank website:
- Apply for a credit card
- Simulate a loan
- Locate a branch/ATM
We compared business processes and performance metrics within the banking industry in relation to measurable UX metrics, including:
Look & Feel, Information layout, Ease of access, Familiar terminology, Customer support, Ease of use.
We were able to get many insights when researching the websites of the above mentioned banks, below are the most important.
Help & Customer Support
A good customer support goes beyond providing help & contact buttons. It should be implicit through structured journeys, familiar terminology and relevant explanations.
Complicated Application Forms
Forms seem to still be problematic even for the best of the competitors. The forms are still too long and, in some cases, contain complex information hardly understood.
Offline Application Process
Some banks provide information to offer their users the ability to continue the application in offline mode when applying to a product or service.
Existing & Prospective Clients
It is equally important to take into account, at every step of the journey, the users that are already existing customers as well as the future ones.
The analysis was done on Byblos bank’s existing website taking into account the ‘user’s perspective’ at its core to identify usability and design problems along the user-interface.
We analyzed Byblos bank’s existing website over each of the following red-routes; those are the main processes a user perform on a bank website:
- Apply for a credit card
- Simulate a loan
- Locate a branch/ATM
We pinpointed usability mistakes found on the existing website in relation to measurable UX metrics, including:
Content Relevance, Content Quantity, Content Quality, Elements placement, Hierarchy of Information, Mobile Friendliness, Saturation of Elements, Consistency with Brand, Layout Consistency, Quality of Visuals, Experience Satisfaction
We were able to pinpoint numerous usability problems on the existing site, below are the insights in a nutshell.
Overload of Elements
Pages are crowded with information and elements in a very small amount of space. Large bulks of text, long paragraphs & miss-use of white space.
Lack of Hierarchy
Information is not distributed according to its significance. Text has very few hierarchical levels with little treatment of its size, weight and style.
Lack of familiar language
In most cases, the information is presented with complicated financial terms hard for the regular user to understand, esp. in the product page.
Lack of action buttons
The lack of call-to-action buttons on the site deprives the user from getting help and guidance through their journey and decision-making process.
To get more detailed information on people’s perceptions, we did interviews with 15 people (5 from each of their 3 customer segments: Young Adults, Adults, Nesters).
We recorded the conversations as we asked open-ended questions about their relationship with their banks and listened to their stories.
After analyzing the recordings, we were able to gather valuable insights that helped us obtain contextual use-cases, determine specific design problems and enrich our personas.
The table below displays the different characteristics of six personas developed out of the five age-groups we acquired from Byblos bank’s marketing department, with the sixth being a financial advisor.
Personas Table Legend |
||
| Decision maker | Persona’s Pains | Opportunity for us |
|---|---|---|
| 1. The Junior Undergrad Student – 20 years old |
| Parents | University |
| Lack of information. Lack of understanding of financial terms. |
| Build their expectations |
| 3. The Early Nester Barber shop owner – 31 years old |
| Employer | Himself |
| Lack of transparency, No reliability on internet’s security. |
| Provide good consistent service with no mistakes |
| 5. The Businessman Entrepreneur | Business man |
| Himself |
| Difficult access to information. Difficulty to contact customer service. |
| Show them interest in their business |
| 2. The Employee Employee – 26 years old |
| Parents | Employer | Bank-loans |
| Lack of transparency. Access to information. |
| Provide reasons to trust |
| 4. The Nester Employee | Looking to invest – 37 years old |
| Himself |
| No reliability on internet’s security. Difficulty to contact customer service. |
| Give them reasons to stay |
| 6. The Advisor Accountant | Employee |
| Influences his company. |
| Lack of transparency. Difficult access to information. |
| Show them the unique value of the bank |
The below diagram shows the distribution of the personas on x & y axes matrix, in relation to the extent of their decision possession (x-axis) and their financial literacy (y-axis).
Tap/hover on a number to see persona’s statement
In the explore phase, our research helped us define our problems that required design solutions. The problems below are classified into ‘specific problems’ existing on their online portal and ‘common problems’ existing generally within the banking industry in Lebanon.
Each design problem is addressed with a solution presented later on this page. Click to go to solutions.
Tap on the image to enlarge
The lack of hierarchy on the menu overloads the site with unwanted information, making the site’s navigation difficult.
The personal Banking menu is overloaded with elements that are not needed.
Tap on the image to enlarge
Users find it difficult to locate a starting point in order to access the different types of information they need.
The Gazeplot image indicates how the user had a hard time finding the ‘locate us’ link.
Not all users are familiar with financial terminologies used on a bank website.
Users usually feel there is hidden information (for example hidden fees) on the product pages.
A relatively high rate of users in Lebanon believe that the Internet is not a safe channel to use their money.
It is hard for users to get the personal support they get at a branch when having a question or problem.
The solutions below are for the design problems determined in the define phase and are classified into ‘specific problems’ existing on their online portal and ‘common problems’ existing generally within the banking industry in Lebanon.
Each solution addresses one of the design problems stated earlier on this page. Click to go to problems.
Tap on the image to enlarge
Menus are structured under logical order that presents the information in clear categories and appropriate positioning.
Tap on the image to enlarge
Common starting points placed in visible places with permanent access from the different pages of the website.
Tap on the image to enlarge
Definitions are provided on specific areas of the website where advanced finance terminology is used.
Tap on the image to enlarge
Online security features are highlighted on the product page when mentioning any online service.
This section presents the information layout of the two most important pages of the site: The ‘Home page’ and the ‘Product page’. It explains the distribution and the purpose of each module within the home & product pages.
The first page the user sees when landing on the bank’s website. It should cater for all types of users and should easily direct them to the desired pieces of information whether they are looking to buy a product, find a branch or get help and support.
This real estate is typically used for promotions, announcements…etc. It is to be selling the experience of having a certain product or service from Byblos Bank rather than just having a credit card.
.
Displaying 3 popular products:
– First two display the top selling products of different categories.
– The 3rd displays a featured product that the Bank would want to up-sell.
.
Displays FAQs, simulators and information regarding the product being viewed.
.
Includes different channels with contact information and action buttons.
This module is present at the bottom of all website pages after the page content.
.
The product page is the most important page when it comes to conversion. It should have a well structured layout and a proper distribution of figures in a hierarchical structure that highlights clearly the important pieces of information and provides guidance to help users in their decision-making.
This is the statement that answers the ultimate customer questions “why should I get this product?” It directly tells the user what (and to whom) is this product for – that makes him decide whether to scroll down to read more, apply for the product, or to search for other products. It includes the product’s title, image, selling line, description, features, and ‘ready to apply’ bar which sticks to the top of the page when the user scrolls down for permanent visibly when the user decides to apply.
.
It tells what the user would gain from acquiring this product. It includes special benefits, common benefits (apply for all other products; they are technically proof points that Byblos Bank augments the product value proposition with “better experiences”) and a monthly bill simulator to help him decide on the monthly limit and payment terms.
.
It tells if the user is eligible for this product, and gives clear info about the fees and charges and required documents to apply.
.
Cross-selling by getting the user exposed to more products that relate to this product and other products to explore – Especially similar affinity products.
.
Includes different channels with contact information and action buttons.
On the product page, this module also includes extra information or Tips & Guides depending on which product the user is viewing.
This module is present at the bottom of all website pages after the page content.
.
Rayan Bou Hamdan
UX/UI Designer
Ministry of Education & Higher Education, Lebanon 
