How FNB could have designed their new website

FNB new website

FNB’s new website

I bank with First National Bank, the most “innovative” bank in South Africa but their latest move could not be termed anywhere in the innovative bracket. FNB released on 14 July, its revamped online banking website offering a responsive design to give a more enhanced experience for users on mobile devices. However, the new site has been met with several problems including unavailability of services and navigation issues, sparking widespread criticism. It seems they missed a couple of tricks. In this post, I shed some light to how FNB could have rolled out their new offering, in a much better way by taking User experience into proper consideration.


FNB Company objectives

Lee-Anne van Zyl, FNB Online Banking CEO stated that they had reviewed banking sites across the world to benchmark themselves and expected to increase their online banking customers with this new platform. Their core aim was to make FNB the first truly scalable banking site on the continent, to shape banking experiences on mobile devices much better. In my opinion these are valid objectives and make a lot of sense towards the expansion of the brand across Africa. So what went wrong?

Complaints about the FNB site

Comments from Facebook expressed bad experiences due to the navigation, confusing tablet design and errors on the site. One response to these complaints from FNB which made me laugh was “We are confident that the more you experience the FNB site the more  you will appreciate ease and flow of performing a transaction”. Oh my. If users have a bad experience, obviously they will not continually use it in the hope it gets better. Ease and flow of a banking experience should be dictated by its design and content strategy from the start. The performing of a transaction is only part of the banking experience, as is clearly seen in a real bank. How clean the bank is, its staff and how the bank runs, adds a huge weighting to the experience whether or not I transact.

Just a couple more before we move on to how FNB could have approached this revamp.
On HelloPeter users had this to say
“The website is full of errors, I cant even view my transactions? The website font is poor and text resolution is pathetic. The old website was a winner. Please discipline the director who signed this hopeless website to go live. Or shoot the designers, your choice”.

“…it is very cluttered and nothing is where it used to be…then I tried being positive about it and check out the tutorials and guess what I find. ..they don’t correspond with the website. I develop applications for a living and know from previous experience to not roll out before everything is tested…I am utterly disgusted! Roll back to the old version is all I can say!”

“Why did the site go live without performing aggressive testing. Why isn’t the old website being published back online until all testing have been completed and the site is fully functional???”.

Its clear to see from these responses the problem not only lies with the design but the whole system its built on, being not so robust. I am sure you know of badly designed applications or sites which still get the job done well. So what should they have considered?

1. User needs

I have to say the first time I saw the site, I thought someone was playing a sick joke. But no, it was the new site. As a UX and UI designer for a digital agency, we have learnt to design applications based on what tasks users need to do. The first place to start was to understand the user and what they do on the current site (which FNB did. 300 participants in total) and why they do it, then focus on the business objectives. Using a user centric approach enables one to keep what is not broken working, while making way for new innovations. FNB seemed to have done the research but forgot to use it effectively.

2. Understanding Responsive design

To be fair, the FNB site actually resizes and rearranges its content very well. However Responsive design is not just about rearranging content to fit a smaller screen. Responsive design requires software development teams to focus on only the most important data and actions in an application for a mobile device. In one word. Prioritization. The context of a mobile user has to be taken into consideration. Their network signal, battery power, screen size and the environment they are using the device. The generally means very seldom does the same and all the functionality on the desktop view exist on a mobile device version. This is where Responsive design gives a true competitive advantage to other banks loading the whole site in a small screen. Even FNB’s mobile app developers understand this and have produced a smaller more streamlined offering of the main site’s functionality.

3. Gradual change

This is a major piece of the whole revamping process that FNB missed by a long shot. The previous site followed good web design practices and patterns whereas the new site is quite a drastic change from the original site. Naturally people do not like change and anything too drastic is jarring and will create emotions of anger, frustration and eventually abandonment. So how have big brands like Facebook and Google done it? Gradually. Small changes at particular intervals go a long way towards reassuring a customer the brand is still the same.

FNB old website

FNB’s old website

FNB new website

FNB’s new website. Aaaah!

Areas of improvement for new FNB site

Responsive design encourages designers and developers to think mobile first then desktop view but it seems FNB got stuck on and ran with a tablet view. Here are a couple of bad web patterns only on the homepage that I feel could have been fixed.

  • Logo placement is smaller and at the bottom of the page. One would mistake the site for a phishing scam. Sorry that was a low blow but someone has to say it.
  • 5 menu levels have been reduced to two without re-categorizing sections resulting in a cluttered interface at the top
  • Search is small and on the left along with social media links
  • No clear indication to what is a button and what is a text field
  • Main content section has grey “gaps” which adds visually to the confusion
  • A help or tour guide to the new features would have been useful

My design

So I felt so strongly about this I decided not just to criticize but to create a landing page design for which tries to encapsulate everything mentioned on this post. This obviously is a quick draft but it illustrates the following key elements.

  • Similar design to old site for an easier transition to new site
  • Clear headings, text fields and buttons
  • Quicklinks to most viewed sections of the site
  • Reduced menu structure with a way to show new additions to the site
  • Social links along with important bank quicklinks in the footer
FNB draft site - Simplified header layout

FNB draft site – Simplified header layout and responsive grid based elements

More defined heading for FNB site sections

More defined heading for FNB site sections

Complete FNB visual mockup

Complete FNB visual mockup

FNB Responsive Mobile view

FNB Responsive Mobile view

This is obviously an example of how the landing page could look when UX is taken into consideration and gradual changes are put onto the site systematically. Its not the silver bullet to solve all problems. I still believe FNB will learn from what their customers are saying and bring that magic. Already there are compliments around how the experience within the site has improved and that is a definite plus.

If you enjoyed this article please like, follow or comment my blog. I would appreciate any feedback from special people like you. 😉

13 thoughts on “How FNB could have designed their new website

    • I can see what you mean. I have to admit, the experience within the site is very sweet but the first impression of the site in general leaves a lot to be desired. What made it worse was it was coupled with system errors and bugs.

  1. Wish you had got the job of developing the new site. It is ridiculous! I use a 26″ screen – the site does not scale so I have to scroll backwards and forwards. For 5 days I was unable to pay a single supplier and for 4 days I could not add a new recipient. I still cannot download a CSV version of my statement which has correct balances! It is clunky and illogical and I am in the process of changing banks! I do not use a mobile device and I use my on-line banking for business. I have asked colleagues and friends and none of them do business banking on a mobile device.

    • Don’t change banks just yet Tracey. I still think FNB is too far ahead for the competition to catch up. This latest “episode” might have been tragic but I do believe they will improve their offering. I doubt they will redesign the look but they will definitely make it more robust.

  2. Very nice work Calvin. I like your response to the FNB site issues (I’ve had a number of them myself). I don’t necessarily have huge issues with the way the landing page looks per se, but I must say the new interface is a bit too drastic. Things definitely look a lot more cluttered throughout the site in general. I think the font looks cool but adds to the cluttered feel. I also think the site gives you too many random options on a page that you never need or use when conducting that specific transaction. Feel like they should just have a pop-up menu button that has all these options – you can click on it if you need to use those specific functions.

    Anyway, I like your draft. Very sleek, very easy to use, and I like that it eases the user slowly into the changes.

  3. Great review and your quick frontpage mock up is tons better than the FNB one. It really strikes us, how a company of that statue, with – we would assume a huge budget behind this project, would fail on on some basic design and usability aspects. And then also release a buggy site? According to MyBB, it took two years of development for this website… Oh dear…
    Btw., you might also want to read some customer reviews on


    • Thanks for the comment. I have to say, without errors the new website would have launched successfully despite the design. Its just a couple of visual elements and affordances that needed to be clear enough for usage. The experience and architecture within the site is actually alright. That is if there is no error.

  4. Oh yeah, I used to find their old website much more user friendly, I am no expert in the matter but they definitely could have designed differently especially the Forex section, thanks for pointing it out Calvin

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s