In-keeping with my current research project, I am now examining the personality of four or five different financial websites. This is considering how font, colour, texture and the site design is used to convey a personality.

What do most financial companies want you to think about them?

• They want to appear professional and knowledgeable
• This helps to make them appear trustworthy and secure
• The trustworthiness helps to allow people to ‘open up’ to them and take their advice (which may be in the financial companies’ interest/benefit – controversial!)
• All of this leads to custom and the impression that they care about their customers

That’s how most major banks and the majority of financial advisers want to come across. There are of course slightly ‘sketchier’ financial organisations who are almost certainly in it for themselves and almost exploit their customers’ emotional and economic needs and desires to gain business. Their sites are different to the major banks.

Banking: Barclays and Lloyds

These are two good examples of major banks with websites that fit the impressions above.

Colours

The use of blue on the Barclays site and the green on the Lloyds site is notable because these colours are known to both evoke calmness and trustworthiness, research from the California College San Diego has concluded. The white on each site is also believed to create ‘freeness and impurities’. A lot of these banks trade on ‘being free with your money’ or ‘having freedom as a result of security’, so the white against the blue or green is an obvious, but reasoned, choice. Blue is also thought to help productivity thanks to its calming nature and green is thought to be trustworthy as it is a natural colour that surrounds humans in nature.

 

Textures and imagery

Textures when used sparingly can help improve information architecture by separating content and guiding users to certain bits of content. Barclays and Lloyds don’t really use textures on their sites at all rather they use different shades of the same colour in their menus, block colour sections and images to separate content and guide navigation. This looks more professional than textures which can sometimes look a little ‘rough’ and ‘urban’. Look at the examples below which renowned design critics Awwward gave commendations for using textures.

 

 

Textures often invoke a nostalgic, vintage and reminiscent response. Banking websites do not want this. They are proud of their heritage but display this in other ways, usually using slogans such as ‘By your side for x number of years’ and talking about their reputation rather than through their designs, branding and marketing. Banking websites want to appear modern, successful and secure – especially from an IT/e-Banking/internet services perspective. People likely would not trust doing e-Banking with a bank that used a nostalgic theme. Look at how Lloyds and Barclays separate content using colour gradients and images instead and how that gives out a very different image.

 

 

The images and block sections help make the site look more professional and modern.

Fonts

The Sans Serif font used across the websites is very legible very clean and most importantly is seen as being an ‘all purpose’ font, as found by a study conducted by the Wichita State University’s Software Usability Research Laboratory in 2006. This is very important because these banks need to appeal as a massive audience of people, their customers are sometimes global or at the very least national and comprise of a large range of customers of different ages, technical and physical abilities. The white background and blue and green accents helps to make text more legible to a larger range of people as white text on these accents is legible, as is black-on-white text. People with dyslexia struggle to read white on black and the blue or green text on black, so this further makes white a suitable colour for the background colour.

Insurance: Churchill, Direct Line and More Than

The principles are very similar to the banking website ones, but with some subtle differences.

Colours

Again, the colours used tend to be blues and greens against a white background to depict trustworthiness, knowledge, calmness and help improve text legibility. Churchill and More Than both use a blue or green interface on a white background, Direct Line however uses a lot of red in their interface.(as well as small bits of lime green).

Red is seen as a confrontational colour, often pushing people to act, raise pulses and even excite people or invoke a romantic feeling. Insurance is a necessity if you own a car or home and is a good idea if you own a pet. Asides from the obvious ‘their famous logo [the landline telephone and computer mouse] is red, so the site must be red too’, the red colour could get people to act and purchase insurance for the possessions they hold the closest to their hearts. It’s all about wanting to protect these loved belongings and Direct Line offers the product to do just that. People think they’d better act and purchase insurance before something bad happens – whether that’s them facing the wrath of the law or potential damage to a loved item.

Car insurance is clearly their biggest-selling item. The red Citroen is the most noticeable item on the page and breakdown cover and travel insurance are appropriately placed underneath car insurance, which takes half of the container space. Why’s the car red? It’s red because that’s the colour that evokes love, romance and excitement – and we want to protect that item we hold close to our heart. The attachment we form towards cars is an interesting one. Having ‘been there and done that’, twice, I’ve always felt that we fall in love with and personify our cars because we have fun in them, go to places in them, relax in them, talk to them, cry in them and ultimately depend on them – they give us freedom, independence and security. At the end of the day, I guess they become like a friend to us. Plenty of articles and blogs online agree with these thoughts, one summarising it like this:

Even when our car is in crappy shape, the emotional attachment we have to it can trump material demands.

Meaning that we’ll do anything to protect our car, our friend. Direct Line will trade on this and use these emotional attachments to get you to purchase insurance. And the colour red has a lot to do with that. It’s how all good marketing and sales works – you have to be emotional to be able to sell and market.

The personality is that they are just as passionate about your car, home or pet as you are and want to protect it.

Textures and images

Again, textures are typically not used a lot on insurance websites for the same reasons as banking sites, however images can be vital. Look at the More Than website below.

More Than’s home page could be seen as confusing or clunky, but immediately the user is shown an image of pets and prompted to look at pet insurance. It’s a very similar tactic to the red car on the Direct Line site, the pets evoke an emotional response to purchase insurance and also give More Than the impression that they care about protecting your loved ones.

It goes a bit further than that though, further down the page these images are used to break content and show the types of insurance they offer.

A lot of the images for the different services they offer evolve around the family lifestyle, or at least an idealist’s interpretation of that. You’ve got the kitchen with the person baking (sometimes seen as a family activity, more so than ‘cooking’ or simply putting food in a microwave oven) in a traditional-looking family home, possibly promoting the idea of family. An SUV with bikes on it travelling down a small country lane depicts car insurance, with the SUV being seen as a modern family car, the biking a family activity and maybe that road leads down to a family holiday location in a beautiful remote location. The outdoors/holiday feeling in the car insurance photo links to the picnic photo used for travel insurance (again, a traditional family activity) and the photo of the family walking in the forest with the dog, maybe on a holiday – the same holiday they had the picnic and took the car with the bikes to, perhaps. Maybe More Than’s car, pet, travel and home insurance makes this family’s lives happy and helps to ensure they can do family activity. This would make More Than seem like an approachable, friendly company who care about the welfare of their customers and are a ‘breath of fresh air’, whilst promoting and supporting traditional [family] values.

It all makes sense. Although a lot of people complain about insurance prices, no insurance company wants to come across as a ‘money-grabbing cow’ – they know that won’t win them customers.

Fonts

Again, Sans Serif is the clear font to use on insurance sites too. When reading complex legal information or trying to complete forms to get insurance quote the last thing the user needs is a font that is difficult to read.

Churchill does use a slightly different typeface in their main menu, possibly to stick to their branding guidelines.

The bold and more rounded version of a Sans Serif font used in their menu looks a bit friendlier and ‘more inviting’ than the body copy used below. This could be a branding decision to try and use some elements that link well to their famous dog mascot – it is likely to do with this. As mentioned, financial websites in general can’t look ‘too unprofessional’, so to add some character to the sites little things like this have to be added.

Financial advisers: NorthStar Wealth Management

A little different to a bank or insurance companies, financial advisers are all about giving sound advice and less about managing money or appearing family-focused. How do they achieve this?

Colours

Where banks and car insurance like to use blue and green to promote security, trustworthiness and knowledge, NorthStar utilises a lot of purple in their design. Purple is historically the ‘royalist’ colour, worn only by royalty. Today, it represents premium brands and premium services – so as such NorthStar want their customers to feel that they offer a high-end service and sound advice and knowledge. Using purple helps instil this, though since the association with purple is not as natural (rather ‘human conditioned’) it may not come across to everybody. The association with blue and green being trustworthy and relaxing on the other hand is more natural – think of the blue sea, blue sky and green forests naturally being relaxing.

Black on the other hand is said to evoke the feeling of power and authority. Combine the two and you have a personality that screams ‘we offer a premium service and sound advice which will give you power and control of your wealth’. Or, it could be read by some as them having the control and helping you.

Textures and images

It shouldn’t come too much of a surprise that textures aren’t really used, apart from the hero image at the top of their page which looks scientific, modern, technological as well as creative. Is it a texture or an image? It could be either, but it gives the impression that the company is all of those things. Being modern and technological shows that you are keeping up-to-date with the latest trends and therefore can give advice relating to the latest situations, making you more trustworthy. Being creative also shows that you can work around people’s problems and find the best solutions for them, critical when dealing with financial situations.

Like Lloyds and the other sites mentioned, NorthStar uses blocks to separate content rather than textures to help the user find information and to retain the professional appearance of the site.

Fonts

On NorthStar’s site at least, all are Sans Serif and a black text is used against a white or an off-white (grey) background. As shown in the screenshot above, sometimes purple is used to keep the brand consistency strong.

The reasoning for this is the same as the bank and insurance websites.

Payday loans: SwiftMoney

Whilst payday loans are not illegal, the ethics behind them are often questioned as the people who tend to resort them are those in dire financial situations and interest rates on payday loans can cripple a person, not help them. The type of business that payday loaning is and the sort of clientele a payday loan company would hope to attract is very different to that of a bank, insurer or financial adviser.

Colours

A lot of payday loan sites are starting to look more bank and insurance websites these days with blue and aqua being popular colours to use against a white background. SwiftMoney however uses a very similar purple and black theme to the NorthStar website, presumably to convey a similar message. The nature of payday loaning however leaves me wondering who has the power – the consumer, or SwiftMoney?

The gold buttons are associated with money (the gold £1 and £2 coins and traditional high-value coins are usually gold) and also psychologically make people feel happy, excited and can prompt them to act. The thought of getting lots of money effortlessly and when you really need would make a lot of people happy and they’d want to do whatever needed to be done to get that, in that case click these buttons. This further gives the company a powerful image (getting the user to do what they want) and also gives a ‘helpful’ persona – ‘we’re trying to assist your financial situation’. They don’t seem as ‘professional, ‘corporate’, ‘formal’ or ‘official’ as the banks, whom a user who might be scared to ask for a big loan from. Some users will be happy about this and feel more relaxed, others will feel that the company is not as genuine and will steer away. It’s a very specific clientele.

Textures and images

Everything about this site’s textures and images give the impression of speed. The graduated purple in the header looks fast, the images and text for the 3 steps to applying in the header all imply speed – they talk about doing it all online, simply checking an email and getting cash in the bank: the user does not need to leave their home and could do these tasks in a matter of minutes.

As a persona, it suggests efficiency, speed and putting the customer at the top of their agenda. But the speed could also show a lack of care, attention and a slightly ‘rushed’ approach to things without checking facts first.

Fonts

Again, they tend to be Sans Serif as most websites are and whilst the company wants to look somewhat professional, the chances are they do not want the same ‘corporate’ branding that Barclays or Lloyds demands, so there are some alternations to the Sans Serif font here and there, such as in their logo which is more rounded to give a friendlier look and made italic to suggest speed. These types of loans are always about speed. Some text has shadows, for example headings and the logo, this is to give an impression of a premium feel, without looking overly-corporate.

Don Norman’s Three Levels of Design: do they apply to financial sites?

Yes. Essentially each level of design is considered by the designers of these sites. When dealing with something as important as money, the lifeblood of everybody, it is important that brand image and perceptions are accounted for in the design process.

Visceral Design

The companies all have a brand, image and personality that they want to portray, and through the use of colours and images and fonts as well as other design tools they are able to present these on their websites. Visceral design concentrates on initial thoughts and feelings towards a product. All of these sites will convey the right initial feeling through the use of their designs and also the fact that many of these brands are so recognisable that people already have an idea of what they feel of the brand (and thus likely the site) thanks to brand strategists. The experience of sites matches the brand and persona.

Behavioural Design

This focuses on the ease of use. Usually there is no one specific task to carry out on any of these websites, apart from maybe on the payday loan site where the aim is to get a loan (and thanks to placing the ability to do that right in the header, the user is able to just that extremely quickly!) or the online banking sites where a user might want to apply for an account or do online banking. However, these sites appear easy to use and include all of the functionality and information that their users could need.

Reflective Design

Reflective design is the consideration of the afterthoughts: the ‘can I tell a story from it? Does it appeal to my pride?’ and things like that. This is hard for a financial website alone to do, unless the site has some kind of fantastic (or awful) memorable feature or experience that it can provide the user with. Generally for financial websites the reflective design bit comes from customer service and the brand image, again leaving the website a little outside of the equation. I guess however by making the website informative and easy to use it helps evoke a positive reflective response.

References

Writer, S. (2013). Using Color in Design to Evoke Powerful Emotions | California College San Diego. [online] Cc-sd.edu. Available at: https://www.cc-sd.edu/blog/using-color-in-design-to-evoke-powerful-emotions [Accessed 29 Oct. 2018].

Savage, J. and Birky Hartmann, S. (2011). How To Use Textures In Web Design. [online] Smashing Magazine. Available at: https://www.smashingmagazine.com/2011/10/whys-hows-textures-web-design/ [Accessed 29 Oct. 2018].

Bonnell, S. (2018). Brilliant Uses of Texture in Website Design And Some Resources. [online] Awwwards.com. Available at: https://www.awwwards.com/brilliant-uses-of-texture-in-website-design-and-some-resources.html [Accessed 29 Oct. 2018].

Bernazzani, S. (2017). Fonts & Feelings: Does Typography Connote Emotions?. [online] Blog.hubspot.com. Available at: https://blog.hubspot.com/marketing/typography-emotions [Accessed 29 Oct. 2018].

Bliss, L. (2014). It’s Just Not That Easy to Get Rid of Your Car. [online] CityLab. Available at: https://www.citylab.com/life/2014/08/its-just-not-that-easy-to-get-rid-of-your-car/379082/ [Accessed 29 Oct. 2018].