Good Work Bankwest – just a few things missing…


Bankwest * –  a local Western Australian centric bank, that has recently redesigned it’s web site. Now the interesting thing with Bankwest is that they have been slowly over time improving their site with each redesign. Making the site more customer focused and less about the bank, more about people.

This most recent redesign seems to have taken that last final leap towards a customer centric service, leaving the stuffy old school bank image behind.

Keeping it Simple.

The main thing that really hits you on the home page (see below) is that the site has been simplified. Making the Search function a key element over the site structure.   Pushing aside the minor items and focusing directly on the major functions people are visiting the site for. In this case focusing on the online banking.

Overall in general terms the site is easy to use.

The site is simple, streamlined back to the core functions, something a good number of other corporate site could do with considering.

Bankwest Site Home Page

Bankwest Home Page March 2011

It’s Not Perfect.

However it’s not all rosy, after a few minutes on the site a good number of issues became apparent.  Here are just a few.

From an accessibility view point Bankwest is failing in its legal obligation, which I find very interesting considering they are displaying an accessibility statement.

For instance the search form could have done with using fieldsets and having a label for the search field.

Looking at the source code is going to make any web professional cry.   It’s a mash of div soup with inline styling and javascript called within the body using old school methods, and not an unobtrusive script in sight.  This is a shame, here you have what is clearly a good interactive design, but it just has a poor implementation.

Bankwest Level Two Page Example of unopened menus

Bankwest second tier page example with closed information boxes March 2011

The site is made up of three tiers or levels of distinct pages styles.

A really good aspect of the site is its responsive design (not fully extended to the tablet level yet).  It fails on the ipad portrait display and rotation back to landscape.  But this really isn’t a major issue.

Also have the core of the navigation is on the left in two tiers, again breaks the corporate mold.

Accessibility and Readability

I have however noted there is no use of ARIA (for accessibility) within the site at all.  Which is a shame as using ARIA roles is really easy to implement.

I also suspect that the design team working for Bankwest are all under 35, as a lot of the visual accessibility issues would have been picked up otherwise.

One major issue is the use of text over image backgrounds. Even with the ghosted colour fills, there is still a problem with the readability of the text.

First off this is going to be hard for anyone over forty to read quickly.  Remember reading quickly is a thing we tend to do on the web.

Also people with any cognitive issues, which includes the aged, are going to have an issue reading these sections as well.

This readability issue gets worse with the smaller header and footer menus. Having a roll over background doesn’t really help if you can’t work out  what the menu item is in the first place.

Consistency and Layout

Their are a few layout issues as well with lack of space for long titles on menus. Again it seems the implementation team wasn’t talking with the user experience team, which is a little sad.

I would be interested in knowing what the usability testing outcomes were for the positioning of the online banking login menu at a lower level.  As it’s a little hard to locate.   I would have recommended the colours and design be consist through out the site. Continuing on from the home page.

Bankwest Level Two Page Example of opened menus

Bankwest second tier page example March 2011

Good with the Bad.

A good aspect is the use of the micro pages revealed via the tabs, this is a good example of streamlining the content down to minimal amount to inform the customer.

However looking at the code, these elements are hidden by a display:none. Making these hidden elements inaccessibility to screen readers. This is a major issue.  A better way would have been to clip or reduce the height of the hidden text areas.

Bankwest Level Two Page Example that is closed

Bankwest second tier page example with automatic menu closure - March 2011

Don’t Use On Hover

Another issue occurs when the screen is reduced in width –  the top menu reduces down to small sidebar.   Now the problem is this sidebar, automatically expands on rolling the cursor over the home button to the left (see above).

Not a problem you think, saves you a mouse click.

Think again, maybe I didn’t want the menu to expand, what if I have shaking hands this will make it very hard for me to use this part of the site.   Again an issue for ageing customers and the like.

Using a click would have been a better alternative.

The Happy Banking Tab.

Minor issues also result from visual confusion, for example the Happy Banking (bottom left) looks like a tab, but appears to be just eye candy.   Makes you feel a little stupid when you go to click on it, and nothing happens.

It turns out this tab expands when you save a product.   Okay that’s good, but how to I close it – using the standard X button.

But  it takes a while to work out how to reopen it!  You use the star at the bottom of the screen – yes it did take me a while to see that.

This functionality should have had two or three ways to achieve this open / closing of the hidden region, for instance using the tab itself.

Bankwest Level Three Page Example

Bankwest third tier page example March 2011

The Lower Pages.

The final tier of pages relate to the product detail pages, these are well presented with only a few minor issues, in general the design is good example of getting the lower level content right, especially if you consider these pages are the final sell of the products to the customer.

Now the star of the product pages is the credit card accounts page.  You can compare and build your own comparison matrix dynamically, this is a wonderful little tool and shows just the type of thing that is possible.

Give Bankwest some Feedback.

Now this is just a quick review, but you can also provide Bankwest feedback on their new site too.

So it you think it’s cool or trash, go tell them.   Big ups for Bankwest being open and taking on board the customers views.

Now I’m not expecting Bankwest to even read this post,  be nice if the relevant people did; as this information has been provided to help them improve.  Consider this a little free professional feedback from someone that works in the area of user experience, interface design and accessibility on a daily basis.

Oh and Bankwest if you want to discuss this with me, you  can contact me at radharc.

* – Disclaimer I am a Bankwest customer, however in many ways that makes me very critical of anything Bankwest does.

Tags: , , , , , , , ,