Blog

FNB site redesign

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.

7 things I’d like to see in digital for 2013

I was just reading a .net article on the 20 top web design and developments trends for 2013 and I have a few thoughts on what I’d like to see in digital for 2013, especially in South Africa.

  1. Responsive Web Design
    Probably the largest trend, still not picking up enough traction in South Africa is RWD, which makes absolutely no sense to me. The thought of creating a website purely for desktop, when we have such a large percentage of mobile users locally its ignorant. At the same time, RWD might not be the perfect solution after all, given that have multiple layouts require content to be turned on or off, but that only means its hidden from the user’s eye, but all the multiple layouts and content are still downloaded, which in SA, really defeats the purpose.
  2. Content
    If you’ve ever read anything on the web, you’ll know that for the most part, it’s absolute rubbish. I believe that content has to be a bigger priority in 2013, that doesn’t mean to say that it needs to be bloated, while content is king, it doesn’t have to be a silly bloated one at that. Craft of visual assets needs to be factored in and more relevant content be created, instead of just recycling images from a google search on a specific subject, purely as a cheap option to visually populate your wall etc.
  3. Conversation
    Social media conversations need to be better aligned, this prescribing posts months in advance has to stop. Agencies need to be employed and empowered to write content in real-time. While a strategy can be in place to guide the conversation based on the brands objectives, a more natural real time conversation should take place, where agencies speak in the brands tone to people, engaging in conversation rather than shouting out and waiting for responses. The other problem with the month in advance post prescriptive content creation is waiting for client to sign off everything is the delays it causes. clients need to have a little faith in the communication agency they hire.
  4. Focus
    Most agencies try to be all things to everyone, instead of trying to do everything poorly for the same budget, agencies need to identify real opportunities in the digital space and focus more on that specific area rather than spread themselves too thin across every digital channel.
  5. Hybrid designer
    I’m borrowing the term Hybrid Designer from the .net article and I’m going say what they’ve said in my own words, the best digital designers have the ability to code as they have a better understanding of what the constraints of the medium are. I’ve mostly done all of my own coding of the sites I’ve done in my career. I lack the level of development of a lot of the talented developers I’ve had the privilege of working with over the years, but I have always had a better balance between design and development output.
  6. Story telling
    I believe true engagement is to tell a really compelling story, taking people on a journey, giving people a reason to believe, to interact and be inspired to want to share. In SA, I’m yet to see anything like the type of campaigns AKQA or North Kingdom produce. We spend millions producing TV adverts that run for 30 seconds for a couple of weeks, instead of creating rich online engagements that can last for much longer and offer a lot more information, interaction and share-ability.
  7. Waving carrots
    I have noticed that there are few digital campaigns that don’t involve a huge prize as an incentive to engage. If the prize is the reason to engage, then the focus isn’t on the message we’re trying to drive, but rather the “whats in it for me” mentality. If you’re going to give something away, then it’s simple, have an entry form. But if you want people to understand and engage with your brand, give them an experience they’ll never forget.

Tips when naming images for SEO

Quite often we forget that the average joe client, doesn’t have a clue how to do something as simple to us, as naming their images. I have spent many hours renaming images, working much harder than most clients are willing to pay me for, so I decided to start telling them that I want images named correctly, quickly finding out that there’s a lot more to this than even I thought as I watched my Dropbox update with new advice I gave them.

Let’s start with a few rules:

  • No spaces
  • lowercase
  • Use hyphens instead of underscore to separate words, underscore cannot be viewed when a URL is underlined
  • No full-stop in the name, only before the extension .jpg
  • Don’t abbreviate
  • Only letters and numbers
  • Numbers should at least be double digits 01 – 09 if lower than 10
  • Don’t start naming with numbers, they usually only represent the numerical order of an image
  • Abbreviations can be used at the end for things like thumb nail = tn or large lg etc but purely as reference for your developer
  • No more than 50 characters long
  • The main image types supported by browsers are .png .jpg and .gif

This is how correct image naming looks like

product-name-01.jpg or product-name-tn.jpg

A few tips when working with images for the web

  • Use the progressive setting when saving in Photoshop to ensure that it shows something, rather than loads in bits on a page
  • Use img {max-width: 100%;} when doing responsive designs to scale proportionately
  • Thumb nails don’t need to show the entire image, zoom into something that is obvious and makes sense to the user
  • You must give your images a description
    <img src=”image-name.jpg” alt=”The image must have a description for better SEO” />

These are just a few tips, if you have more suggestions, please feel free to share

An alternate approach to building a website

Budgets are tight, so I needed to rethink how I build websites. The usual approach would be to research, wire-frame, design, build and launch. Okay so that’s, pretty simple and I’m being vague and skipping quite a few steps, but it’s not really important, I still do some of the things I might have skipped over. What was a huge time-consuming task, was getting clients to agree on a layout. This could get tedious, and even under contractual agreement to a set amount of reverts, clients seem to focus too much on unnecessary details, wasting huge amounts of time, which is of course money, something almost every client seems to have a shortage of. So I’ve taken a new approach. Given that most of the time, I’m involved from concept to execution, acting as designer and developer. I follow a different process, reducing the time it takes.

This is where I blow your mind!

I research, I wire-frame (briefly) and then I start building, then I do what we generally term as design. I have found that people respond better to a working site, so that’s what I do. I build the site, keeping it simple, avoiding focussing on the shine that makes the site beautiful. I build a framework, I add the content, navigation and general functionality. At this point, when the client agrees that I have met the functional requirements of the site, I pretty much skin it. Giving it the type of polish it deserves. I have avoided designing something, that changes multiple times before dev, during or after dev, which saves clients moolla.

A few warnings though. 

Not all clients respond to this route, they just can’t seem to be able to visualise the site. Working this route in a team environment might not work either as the design is in my head while I’m deving. Too much complexity might also require design first.

It’s unconventional, it takes experience and it takes a lot of faith by your clients. But it cuts down time, which means it cuts down costs and delivers on the “form, follows function” theory.

My current Kindle reads

I thought I’d share a few Kindle books currently on my iPad


Abduzeedo Inspiration Guide for Designers (Voices that matter) – Fabio Sasso
Content Strategy for the Web – Kristina Halvorson
Creative Workshop: 80 Challenges to sharpen your design skills – David Sherwin
The Digital Diet: The 4-step plan to break your tech addiction – Daniel Sieberg
Don’t Make Me Think – Steve Krug
The E Myth Revisited – Michael E.Gerber
The Essential Guide to HTML5 – Jeanine Meyer
Flash Mobile – Matthew David
Foundation HTML5 Animation with JavaScript – Billy Lamberta & Keith Peters
Good Strategy / Bad Strategy – Richard Rumelt
HTML5 Guidelines for web developers – Klaus Forster & Bernd Oggt
Mobile Design & Development – Brian Fling
Mobile Web Design for Dummies – Janine Warner & David LaFontaine
ReWork – Jason Fried & David Heinemeier Hansson
Steve Jobs – Walter Isaacson
Stunning CSS3 – Zoe Mickley Gillenwater
Undercover User Experience Design – Cennydd Bowels & James Box
Untitled – Blaine Hogan
The Wake-Up Call – Jonas Eriksson
Web Form Design: Filling in the blanks – Luke Wroblewski
The 4-Hour Body – Timothy Ferriss
The 4-Hour Work Week – Timothy Ferriss

FNB are quick to respond but are they responsive?

Earlier today I commented on a tweet which mentioned FNB will bring the new iPad to South Africa. Simply, I was curious as to why FNB, not Apple (The Core Group) were bringing the iPad to SA, given that I know FNB as a bank, they handle your money etc. Promptly I received a response which I noted because someone I respect had a good chuckle at my expense.

@MichaelJordaan: A real Guru wouldn’t ask “@Digiguru: What the hell does FNB have to do with iPads?”

This was met with quite a few retweets by people who were either laughing at me or at the cocky response from @MichaelJordaan – CEO of FNB. Not taking it too seriously, without hesitation I replied…

@mikestopforth @michaeljordaan LOL I’m not a real guru, but would hope that FNB was a bank and not a Apple distributor 🙂

I quite appreciated the sensible responses from a few other people who informed me how FNB are trying to encourage clients to make use of electronic channels as a medium to do banking. If that’s the whole truth, I applaud their efforts. Giving them the benefit of the doubt, I decided to visit www.fnb.co.za as I wanted to see how they were offering the iPad. I arrived at their seemingly well designed home page and after clicking on an iPad image, I read that FNB gives you an Apple iPad, Samsung Galaxy or Smartphone at a reduced rate, with your Cheque Account. 24 Months to pay. As long as you’re a FNB cheque account customer, you probably qualify for their deal. This isn’t empowering anyone any more than it is signing people up to their business. This I understand, given that I know a little about marketing and advertising. Good for them and it answers my question “What the hell has FNB got to do with iPads?”

I know a designer who works on the FNB brand and wasn’t too surprised that their site looks quite descent on the surface. As far as banks go, FNB seem like a forward thinking bank, I have noted they have an App, which is fantastic in a geeky way, but it’s device specific and not the only way to access their content from tablet & mobile devices. As typical South African standards go, I wasn’t too surprised that the site is not responsive, it doesn’t adapt to multiple devices, making it quite difficult to bank online on mobile phones etc. People don’t seem too bothered about viewing sites on their tablets, when held horizontally they look like they do on computers browser, but what about when you display it vertically (portrait) and on your phones which have an endless amount of screen sizes? Thats where it would be in their best interest to have a rethink of their existing site and perhaps design it to adapt better to the devices they say they the want to empower people to use.

iPhone 4 portrait screengrab

iPhone 4 landscape screengrab

I honestly don’t believe that FNB care any more about empowering people by using devices like the iPad any more than they are building brand loyalty through association, leveraging the cool factor. That’s great marketing. However, if they were concerned about empowering, they would already have built their site to adapt better on devices, make the buttons etc large enough to be selected on touch devices, legible enough to read on smaller screens and reduced site speed by removing the +- 40 images that make up the page and rather used CSS, as phones accessed the internet well before the iPad was released. But they’re cool, @MichaelJordaan has many fans who would sooner laugh at  his response to my comment than actually think about what FNB are, and what they are supposed to be doing, which in my opinion is banking. I’m not in a battle with FNB, I quite respect their marketing efforts, they seem like they’re ahead of the competition, sociably they seem to be doing the right things too and I’m certainly not going to get into it with every retweeting fan, I’m smarter than that.

I’m no social guru either, and nothing can be taken back, but now that they have this gem of information from me, the right way to deal with my response online would be to acknowledge what I’ve said and say thanks for the advice, we have noted your point about our site not being responsive and we’ll look into it.

For anyone who cares, let this be a lesson to you. Don’t expect to get an informative answer from brands, you might just get a cocky response. People you respect and others you don’t will point and laugh. But maybe you’ll get lucky – like I have, by actually getting an opportunity to turn this around and hopefully make a suggestion that could actually benefit the brands users.

I buy Apple products, from Apple. I bank, at Standard Bank.

What clients need to know about time

Time has to be one of the most important aspects of any project and most design professionals will make all sorts of considerations to ensure deadlines are met, quite often even with the very best planning, time can slip away and dare I say, it’s the clients fault. Ofcourse we love our clients and we do our best to accommodate their every need and tolerate all sorts of things, but I do think there are a few things to consider when you are the client to ensure you don’t delay the process.

  • Understand that if you set the deadline on a project, you must either stick to the project schedule or accept that the deadline will have to move out and might incur additional costs.
  • When you agree on a timeline, know that this is scheduled time, so don’t assume that when you exceed the given timeframe, it can immediately be scheduled into the studio.
  • Some of what seems like the simplest functionality can be some of the most time-consuming tasks, don’t assume anything, when asking for additional design or functionality, know what it entails and how it will impact the projects deadline.
  • Agree to a date and time when you review work and respond. Keep it consolidated and communicate clearly to avoid further delays.
  • If a designer quotes you for a certain amount of hours, do not expect to receive your project so many hours later, most designers do multiple tasks, including running their business, so they might only spend so many hours a day on the project, so agree on a delivery date.
  • Work in phases, create milestones and always ensure you are not delaying the process.
  • Payments are not immediate, they take a couple of days, so when paying deposits, understand that your work will only commence when the money is in the bank. the same applies to final payment, if the arrangement is to be paid upon approval of the site, that is prior to the launch, the go live date will be delayed until payment is received.
  • The most common delay I experience is the MIA client who lets other things get in the way, abandoning the project and then expecting your designer to jump when finally realising the deadline is looming.
  • Another common problem is that clients decide to move deadlines without discussing this with the designer first. Just because your deadline moves out, doesn’t mean the designer can accommodate this change.
  • Have a single point of reference between your business and the designer, who consolidates feedback. Nothing delays the process more than getting multiple feedback at different times from different people.
  • The basics on any project should be some sort of timing plan, which should include time for reviews, allow the designer time to make the relevant reverts and allow for testing. Even non technical projects require testing of formats, hardware and delivery by email, sms or on disc.
  • Be transparent about how many people need to approve work and make sure you manage them and give fair timelines for feedback, designers understand this, but do not have clear foresight of how your business operates when they are building a project plan and scheduling in reviews.
  • Looking for stock photography can be really time-consuming, so you could help by asking your designer where you can go look for images to give as reference.
  • Build in buffers as often as possible, delays happen and nobody wants to miss the all important deadline, no matter who is to blame.
  • Designers don’t do open heart surgery, studios are not an ER, things can wait, you should not assume designers will work through the night or over the weekend to accommodate your needs.
  • Before committing to a project, make sure you have everything your designers require, nothing throws a spanner in the works than getting half way through the project and then handing over assets that could affect the scope of work.
  • Most brands have CI guidelines, it’s a good idea to get the latest version and understand that your designer will work with this as reference, if this changes, it impacts the project timeline.
  • New clients should schedule workshops to educate the designer about what you do, so they are well-informed because they understand your brand.
  • Unless you are a startup, there is usually lots of information from previous projects, worth sharing with your designer, so that they are better informed and do not make the same mistakes previously made.
  • IP is not free! Pay for your designers consulting time for better results.
  • If a designer has taken the time to see you, done research and sent through a proposal, respect their time by at the very least responding to them, even if it’s to turn them down.
  • Meetings, emails and phone calls are hugely disruptive, try keep them to a minimum as they waste a lot of time.
  • You are paying for a design professionals time, don’t waste time by trying to be a designer.
  • You get what you pay for, no matter which way you spin it, you are ultimately paying for a designers time. You pay peanuts, you get monkeys.

Why I don’t care much for SEO

I have been monitoring my stats this year quite a bit to see whether making the switch of my portfolio site from Flash to HTML would increase the search-ability of my site. I don’t have any much hard data to share, but I can conclude that I have not seen a single improvement and in fact the only notable search result is for people looking for one of my clients sites and an endless stream of people asking me how to become a famous TV personality.

I have also noticed that traffic has quite significantly decreased with each passing month. Nearly 10 months after I launched my HTML5 website and I’m getting less traffic than I did on my last Flash portfolio after 3 years. Of course this is not directly linked to search and will probably be another post for another day, but does abandoning Flash for a more SEO friendly HTML site make any difference? Well not for me.

I might regret saying this some day, however I will probably make my next site in Flash again, cause clearly all the hype, is just that, hype and I have enough tricks up my sleeve to make my Flash portfolio as SEO friendly as I can an HTML site.

My current iBooks reads

I thought I’d share a few books currently on my iPad

HTML5 for web designers – Jeremy Keith
CSS3 for web designers – Dan Cederholm
The elements of content strategy – Erin Kissane
Responsive web design – Ethan Marcotte
Design Professionalism – Andy Rutledge
A practical guide to designing for the web – Mark Boulton
A practical guide to Designing with data – Brian Suda
A practical guide to Information Architecture – Donna Spencer
Adaptive web design – Aaron Gustafson
The win without pitching manifesto – Blair Enns
Essential JavaScript & JQuery design patterns for beginners – Addy Osmani
Hardboiled web design – Andy Clark
Mobile design for iPhone & iPad – Smashing Magazine
How to create selling e-commerce websites – Smashing Magazine
Website owner’s manual – Paul Boag

Digital Monarchy website

We recently launched our new Digital Monarchy website. It was built in html5, styled with css3 and has some great functionality thanks to jquery. We believe in responsive design, so have made sure it’s viewable on desktops, tablets and smartphones. Please feel free to check it out, we think you’ll love it!

http://www.digitalmonarchy.co.za

↑