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