Blog

On the 14th July FNB launched their newly designed website. There have been a lot of negative comments made, which is to be expected given that people really don’t like change, but in fairness I have to commend the effort made by the team who have redesigned the FNB site, it is a huge leap forward compared to any other banking website locally (& abroad for that matter).

On the plus side, the site is responsive, fast, the use of text instead of images would be a huge help with that, clean(ish) and at least an attempt has been made to refresh it and keep up with current trends.

I haven’t had too many of the problems with my account, like some other people have reported, nothing is obviously broken. But I do see a lot of design and usability choices that I might have done differently. I’m not going to tear into the redesign, I think there are enough people doing that, but I will offer some advice, based on what I currently see online. I hope that this advice is taken into consideration as I really do believe it could improve the over all user experience.

Buttons
It’s not particularly clear what is a button and what is just text. You basically need to run your cursor over everything to see if it’s click-able and on touch devices that really presents a problem. If you are using text links, then underline them. If you have buttons, then make them stand out and have clear call to actions, so they cannot be ignored. Buttons sizes should be larger on touch device’s as your finger is the cursor.

Menus
Whether it be the main navigation menu, a sub menu or a list menu, again these need to be made obvious to the end user, as with buttons. Menus also need to show where you are. They should contain the most important functions of the site first, then secondary include things like about us, careers and other company information (you are mostly buying into the service, not the history of the company or it’s current job vacancies). With responsive designs, especially when focusing on mobile devices, menus should be easily recognizable and easy to use.

Navigating
When you click into many of the sections of the site, a modal like window appears and it has a close button. While that makes sense in some instances, it just doesn’t in others. For example, if you close the window to be taken to the home page, then why not just have an icon that has a house on it. If it’s a tab menu, then why have a close button?

If you are going to have several pages deep as you navigate, then at least include a bread crumb trail, so you can work your way back.

Fonts
The use of web fonts on the site ensure that it’s a lot more on brand, that the content is SEO friendly, will always show, even if images were turned off and best of all, it loads a lot faster. Given that the site homepage is secure (https://) due to the login form on the home page, this is a really smart addition. But they still haven’t got the balance of font weight and size right. On tablet and mobile devices, the text is tiny, which is a simple mistake easily fixed, just bump it up a bit for smaller screens, so you don’t have to strain to read it.

Use a colour scheme that makes it easier to differentiate between header, sub-header, body copy and links. Remembering that hover isn’t immediately recognized on touch devices.

Icons
One of the stand-out features of the old FNB site was the use of iconography and it has often been used as a shining example of what clients want when they reference other sites, so I’m not sure why they have hardly used any icons. Just like icons on road or airport signs, it would be easier to have some symbols that are easily recognizable on the site, so even if you have trouble reading, you know what to click. It would also help differentiate between what is a button and what is just text. Obviously this needs to be a consistent treatment or again it could confuse.

When designing icons, even something as simple as an arrow, make a little effort. A triangle is just a square cut diagonally and rotated. That’s just lazy. When you see all the curves used in the FNB CI (from what I can tell) surely some rounded arrows could be used.

If I had to take a guess, while speeding up the site must be a priority, user friendliness has to come in pretty close. If speed is the issue, then use sprites of png or svg graphics. You can even create a font, which includes all your graphics as vectors, which can be loaded in once.

Interface
The interface design is very confusing for me, I’m just not sure I understand what they were trying to achieve. But if I had to guess they were against the traditional scrolling website and they wanted the interface to seem more contained. The fixed header and footer was a poor choice, as was adding their logo on the bottom. Logos are commonly recognised as being home buttons and are best suited to being on the top left.  This isn’t to say that it can’t be done, I see fixed elements and logos being abused in all sorts of ways now that this functionality is better supported, but on a banking site, I’d opt for something more traditional myself.

Another odd element is the left hand side where page headers are flipped 90 degrees; it all just reads a little odd to me.

The element that bothers me probably the most is the search and login section. It sees really cramped and hard to tap on mobile devices. I’m sure real-estate was a huge consideration for the designer, this section s one of the most used features and just seems cramped at the top on the edge. A little padding around everything would make it easier on the eye and touch.

Loading
Remember loading bars on Flash sites? I’ve designed enough of them to know that you can do amazing things, but in HTML, they are a functional element for content heavy sites that load slowly. I understand telling people the pages are loading, but if you are going to have a loader, that is a bar that represents the amount of data being loaded and indicates how long you have to go, at the very least, make it work properly. And only use loaders if it’s really necessary, given the speed of the page loads, I don’t think it’s worth it on this site.

Social Media
I went and looked at a bunch of international banking sites and not one, not even PayPal have social media icons on their home page. While I am aware that FNB dominates as far as banks go in this space, it just strikes me as weird to add these icons to your home page. But if you are going to, then at least use the official icons as specified by the specific social networks. Facebook is probably the most aggressive about this, but even the friendly folk at twitter have some terms too. FNB are a very public online site and could well land up in trouble.

Responsive Design
I believe the use of responsive web design was the smartest choice made when redesigning the site. I’ve not seen another bank do anything close to making their layout work across multiple devices. There are so many advantages to using this technique and given FNB’s commitment to embracing technology, making it work across multiple platforms is a sure way of allowing users to access their site on any device. I actually think the need for a mobile app and a mobi site becomes redundant. What I would caution the team on though, is their current interface design and various layouts across the devices. I’m not sure if they have finished this yet, but across my devices, the site doesn’t quite adapt enough to call it truly responsive. I struggle with the font sizes, buttons etc as mentioned above. Regardless it functionally works across all my devices, which means I can bank anywhere, which is a huge win!

Conclusion
I could continue to do this all day, but I am sure that the team have got their hands full given the mammoth task of pulling something like this off. Again, it’s a huge effort and I really am impressed, as usual FNB are ahead of the rest of the banks online and I’m sure once people get used to where old features now are, the complaining will turn into compliments as they have made the effort, no other bank that I’m aware of has made toward a better online experience. I would personally love to work on a project like this and to the teams involved, keep going, it’s inspiring and you all deserve a good pat on the back.