BNF Homepage Concept

The client

BNF Bank plc, formerly known as Banif Bank (Malta) plc, started operating in Malta in 2008 and has been established as a key player in the Maltese banking sector, offering personal and business clients tailored services through twelve branches across both Malta and Gozo.

Recently, BNF underwent a major rebrand in order to reinvigorate its appearance, aiming for a fresher, more minimalistic image.

The challenge

As mentioned, BNF rebranded to a more contemporary and clean brand style in order to reach a younger audience, however the website does not reflect it: it is not responsive and follows a very old design even on desktop, as illustrated in the images below. There is also a major issue with information hierarchy throughout the homepage; upon landing on the page the user has no idea where to start or the next step that needs to be taken. The essential tools and information most searched for by the users are also hidden or misplaced, which results in frustration.

Desktop version of the website
‘Mobile’ version of the website

The process

I started off by looking at other local competitors such as APS, Lombard, BOV, HSBC and medirect – in many cases the other banks also required a facelift when it came to their online presence, however there were a few which stood out. I also looked into foreign banks such as Revolut and Barclays. All these banks are targeting the same audiences, and analysing the use patterns on their websites proved very helpful, as it determined which are the most valuable actions that a user takes on a banking website.

Apart from noting down the tools and messaging that competitor banks were pushing to their audience, I also traced the flow that needs to be taken on their homepage to carry out common, sample tasks, such as:

  1. Finding information regarding home loans
  2. Accessing internet banking
  3. Opening an account
  4. Contacting a branch and finding branches locally
  5. Accessing Business items

When emulating such process using BNF’s homepage, it failed to give me the information I required, as items are scattered around. The menu is split into sort of two levels, and when accessing the Business tab I was suddenly presented with a completely different layout, yet still had no idea where to find what I needed.

Two-tier menu?

Proposed Design

Aims

  • Look into competitors’ websites and define flow
  • Modernise the overall look to reflect the new BNF branding
  • More white space, clearer messaging and leading the user better • Frictionless experience between devices
  • Facilitate mobile and internet banking
  • Organisation of information, and creation of optimal user flow
  • Design is using the stacking method such as Bootstrap
  • Optimisation for SEO
  • Efficient design: Create a separate page for components so items throughout can be updated with a few clicks
  • Styles: Using Figma, colours and font categorised by device and by type were created 
Components and styles for more efficient UI design

Design Notes – Desktop 

  • COVID-19 updates are of utmost importance during this period, and internet banking is the action that a good percentage of users access the banking site for, hence they were pushed to the top.
  • Main Menu was split into 2 in previous website: considered integrating About Us in the footer and placing items which typical bank user would be looking for at the top, including Tools which would have calculators, etc. Main menu needs to be drop-down.
  • Placing a CTA on the hero banner drives more valuable actions leading to possible conversions/leads
  • Most-looked for actions as per competitor research and page analysis were placed prominently above the fold. News and events are secondary, therefore placed below.
  • Most popular FAQs are on the homepage; if user does not find what he/she is looking for, CTA to FAQ page. Would consider Live Chat for best customer care service
  • Items in footer were been categorised accordingly and more links made readily available. 

Design Notes – Mobile  

  • Menu maintains position upon scrolling, therefore all options are readily available for user as he scrolls through the page. Personal and Business sections can be chosen within the burger menu.
  • Highest-value actions above the fold.
  • FAQs maintain the same action for mobile, with the only difference of expanding downwards.
  • Footer was reduced to expandable drop-downs to condense footer space and make it cleaner. 

Proposed further research and work 

  • Discuss with client the pain points uncovered by customer care and how the website can address them, reducing customer care load and resulting in more satisfied customers
  • If GA has been plugged in the current website, analyse and export reports so that decision-making is also data-driven. If not, plug in GA to stat collecting data from the present and identify user behaviour patterns which could be compared and contrasted with those of future website
  • Set up user testing workshop with defined tasks with a good sample of users representing the typical personas as per BNF audience so that difficulties and opportunities are identified
  • Address Website information architecture needs: discover the most used tools and actions, user test current navigation and build upon it
  • Explore touch points through other channels such as social media which could feed into website and vice versa for a more holistic service offer