5 important design lessons from a bank

In this review, I take a look at UBS Australia’s homepage. The purpose of this review is not to criticise UBS – I have no feelings for this company either way – rather I wish to provide some constructive criticism of the design and provide some insight which you may find useful for improving your site. Let’s begin.

The Logo

Keep it sharp, clear and simple.

It may be just me, but the font in the logo looks ever so pixelated, which isn’t a great look. UBS are a zillion dollar bank so it probably wouldn’t matter if their logo had a touch of canine smear on it but chances are you aren’t so lucky. To avoid this, make sure your logo is super slick at whatever size it’s presented at. For some great pointers on choosing and displaying a website logo check out Dan Norris’ post on the topic here (scroll down to point 2 – “have a simple logo or no logo”).

Main Navigation

What’s important and where is it?

The main navigation across the top of the page is very simple, incorporating a lot of white space and minimal options. Here are my observations for improvement:


1. Mobile site: Without knowing the needs of UBS’s customers, I wonder why there is a link to the mobile site included (“Mobile”), consuming a decent chunk of the navigation area. As a desktop user, there is no need for that link to display for me. If I click the mobile link on my desktop, the site turns to garbage, so this link should really only appear for mobile users. Furthermore, I would question why UBS didn’t go for a responsive design instead of creating a mobile site. A responsive design means your site will automatically “respond” and change layout to suit the browser and resolution of the user. It’s more flexible and adaptive than a mobile site.

2. Split Navigation: There is a second, more substantial navigation bar directly beneath the main banner image. This second navigation bar seems to house the important navigation links and it’s also the navigation that follows you down the page – called “fixed navigation”. On most sites, the navigation bar is located above the main banner and that’s where most people will be looking for it so there is a danger that users will miss this navigation positioned below the banner.

Banner Text

What’s your value proposition?

For me, the text in the second slide of the banner is probably the biggest let down of the page:


They’ve wasted an entire screen to say “UBS in Australia”. Technically, I don’t even think that’s a sentence. I suppose they’re trying to tell me UBS is in Australia… but so what? What are you doing here UBS? What a wasted opportunity this is when they could have told me something exciting. Your homepage banner is the perfect place to sell your customers your value proposition. That is:

  1. What is your product or service?
  2. Who is it for?
  3. What benefits and outcomes we can expect by purchasing your products?

Online marketer Neil Patel has found that a good value proposition can increase a website conversion rate by over 10%. Check out some of these great value propositions from other websites:

Facebook  – “Connect with friends and the world around you on Facebook.”

Basecamp – “Last year alone, Basecamp helped over 285,000 companies finish more than 2,000,000 projects.”

Infusionsoft – “Small business sales and marketing software. Get Organized – Grow Sales – Save time.”

Notice that these examples focus on post-purchase outcomes. They don’t mention product features, just the benefits:

  • “Finish your project”
  • “Grow Sales”
  • “Save time”

Sounds good to me! Where do I sign up? A common mistake when writing a value proposition is to simply list your product features, but by doing so you are forcing your potential customer to connect the dots themselves and work out how those features will benefit them, rather than just telling them. For an example in the offline world, think about all those Lynx deodorant adverts; they’re all about getting the supermodel to have sex with you i.e. the ‘outcome you can expect’ by purchasing Lynx (if you’re a teenage boy). It doesn’t mention the product ingredients, the price, the type of bottle it comes in or even anything about controlling dirty teenage body odour. Pretty simple right? And trust me, when I was a teenager, I bought it. For a detailed analysis on creating good value propositions, read Neil Patel’s post here.

Banner Images

What to use?

The importance of image selection can’t be understated. Images are easily digestable, enhance your value proposition and increase engagement. The blog at WP Curve found that blog posts with compeling visual content receive 94% more views than those without. So what has UBS chosen to do with their visuals?

The first banner image of the pretty girl is quite good, human faces are incredibly engaging and our brains pretty much force us to look at them. After seeing the face we are compelled to read the accompanying text because we want to know the girl’s story.


I like the banner text, it’s engaging and asks me to help them shape the world, with the emphasis on the verb “shape it”. It makes me interested to know more and I’m inclined to follow through and click on their survey.

My only criticism of this slide is that the white text against the white coloured clothing over the girl’s arm is very hard to read. As well as reading this text I was also left wondering what material her sweater was made out of and would it be soft if I rubbed my cheek against it? I can’t get started with world shaping before I’ve felt this sweater.

Unfortunately the second slide image, obviously chosen to match the text “UBS in Australia” is a bit of a wasted opportunity. It looks like they didn’t go beyond the first page when they typed “Australia” into the stock photo site. Showing the Sydney Opera House is the equivalent of showing cowboys and Indians for a U.S. based site – lacking a little imagination. It doesn’t further my understanding of UBS or what their services are.


To make matters worse it looks like they cropped out the bottom half of the image, or am I mistaken and UBS has set up offices in the tips of the Opera House? A nightmare for customers to find but the acoustics are marvellous.

A few pointers when selecting a banner image:

  • Don’t mangle it just to fit the dimensions the designer has allocated for the banner area.
  • Stock photos are o.k. but if you really want to make your message go further then get some photos taken or pay a graphic designer to create something that really shows off who you are and why your customers should buy from you.
  • Make sure you contrast the text colour with the banner image colour for easy reading.


Keeping it neat, achieving goals and eliminating distractions.

UBS have a lot of sections of content on their home page, so there’s a risk the page will look messy. To maintain neatness and usability (and make your programmers job easier = cheaper for you) try to design content to a grid. For example, when columns are used keep headings all in a row, the start of paragraphs in a row and bullet points in a row.

In the screenshot below there are three columns of information and you can see that each heading started on the same row, but the formatting was lost beneath that. I’ve added red lines to show where:

  1. The heading area should finish
  2. The paragraph text should start
  3. The paragraph text area should finish
  4. The bullet point lists should start

content layout


Why are we doing this?

When thinking about content it helps to have a clearly defined goal you would like your users to achieve on each page, whether it’s a purchase, a sign up, a click through to another piece of content, a contact form submission or simply to read to the bottom of the page. Designing for a goal gives you criteria to measure the effectiveness of your page against, then you can experiment to increase the number of visitors who are achieving your goal (your conversion rate).

Scroll Button – Redundant & Distracting Functionality

This is confusing.

After every ‘section’ of content, there is a long line and an arrow with the word “Scroll” in the middle of it:


Guess what it does? You click it and it scrolls you down the page a bit. Is this for people who don’t know how to scroll down a page? It can’t be, because to use this feature, I have to scroll my mouse down to it, click it, then watch the page scroll – instead of just scrolling down. So it’s actually more work. Strange.

This scroll thing reminds me of a customer meeting I had a couple of years ago, where a semi tech savvy customer would say “I want a user friendly design where the user doesn’t have to scroll”. I don’t hear that anymore, I guess people have realised that it’s ok to let people scroll. It’s what they do. If you don’t believe me, look at Pinterest or Tumblr. They’re nothing but scroll.

General Usability Note

Clients ask me all the time to include instructional phrases such as “click here to do this” or “scroll the images to do xyz”. If you think you need to explain something in text to your users, then have a think about how you could redesign that particular feature to be intuitive enough to not require an explanation (which no one will read anyway). Pull your iPhone out of your pocket and check your screen, can you see anywhere “click this little green phone icon to call your friend”? No, you can’t, so don’t you do it either.


The UBS logo and heading font is obviously an older serif style font, with super tight kerning (the space between letters). Both characteristics are usually a no-no for web pages as these font types are harder to read, but they have done the right thing by continuing that ‘old world’ branding style throughout the page on headings and titles:


For your website, make sure you use a font listed in Google’s free fonts, which are optimised specifically for web browsers and web browsing – and they’re free. If your logo uses a specific font, then maintain continuity on that style throughout your site in your page and paragraph headings.

Back to Blog