There is no getting away from the fact that mobile is not just the future of banking, it’s the here, now and everything. Since the 2008 financial crisis, a new breed of bank has emerged, starting with Metro bank in 2010. Recently, new players like Monzo are tipping the balance, offering services that are better equipped to respond to customers’ needs. At the flick of a screen, customers can see exactly where their money is going. They feel in control, and this is a powerful thing for both customers and banks.

So how does this new breed of bank do it? Well, firstly Monzo is not bound by the same systems that legacy banks have to deal with, and therefore has much more technological freedom. But fundamentally, they put customers in the driving seat. If a customer doesn’t like their bank, they can just change their app. As a result, banks are often on the back foot, creating bolt ons and struggling to keep up with the market. New banks understand the importance of user experience, so design for their customers’ needs and make mobile banking a priority.

This is not groundbreaking. Mpesa the African mobile money network has been providing customer-centred mobile banking services for over 15 years on low tech phones with high battery life (because Africa has an energy problem). Using only text messaging, they can even serve the 30% of the African population that is not connected to the internet. Therefore bridging long distances, times for banks transfers, political disruption, living in rural areas without banks close by, and demographics – as people of all ages can use it. 40% of Kenya’s GDP flows through this simple system.

The key thing to take away here is that the solution is designed with the market in mind. In recognising this we can draw a connection between customer needs and the application of universal design principles. Monzo creative director, Hugo Cornejo quotes “universal design” as the secret of his team’s success.

Here are our top seven universal design principles for banking services:

Cornejo credits the first four as underpinning the way Monzo was designed.

Example of Monzo’s animations

 1. The Aesthetic Bias

Aesthetic designs are perceived as:

• Easier to use
• More readily accepted
• Used more frequently
• Promoting creative thinking and problem solving

Key take-away: The better it looks, the more people will like and use it.

Example of Affordance for door opening

 2. Affordance

Affordance recognises that some objects and environments are better suited to certain functions than others. Basically it gives clues to how something should be used. For example, drawing a 3D button on a computer interface makes it look a physical button, and therefore people are more likely to press it.

Key take-away: The more intuitive your designs, the easier they’ll be to use. 

Example of mistake-proofing

3. Poka-Yoke

A poka-yoke means to mistake-proof your design. It literally stands for avoid (yokeru) mistakes (poka). It lets you prevent, correct, or draw attention to customer errors as they occur. This can be addressed by making actions easy to undo, or by calling out errors through messaging.

Key take-away: Factor customer mistakes into your design and let them quickly fix them as they go.

Example button size and actual target size

4. Fitts Law

Fitts Law is vital when designing for mobile. It states that there is a correlation in the time taken to reach a target depending on distance and size. It is applicable for rapid pointing movements, not moving targets. For designers, this means being acutely aware of where you position things on screen. For example, making controls distant or smaller when they are not needed so they aren’t used at the wrong time.

Key take-away: Bring tools to the forefront when needed, and minimise them when they’re not.

Examples of different forms of iconic representation

5. Iconic representation

Iconic representation reduces performance load, conserves display and control areas, and makes signs and controls more understandable across cultures. There are four types of iconic representation:

• Similar – consider similar icons when representations are simple and concrete
• Example – use example icons when representation is more complex
• Symbolic – consider symbolic icons for well-established and recognised symbols
• Arbitrary – consider arbitrary when the relationship to the action has to be learned

Generally icons need to be labelled and share a common visual motif for optimal performance.

Example of inclusive signage and alternatives to photo avatars

Do consider that icons like the male and female to signify toilets or photo realistic avatars may exclude and or expose certain people. As vocabulary and understanding expands around these issues, icon designs need to be increasingly neutral in order to signify inclusivity.

Key take-away: Use icons to provide easy-to-understand visual references.

Example of alignment

 6. Alignment

Alignment lets you organise your design in a way a person will naturally scan a screen. This makes it easier for them to use the service. Often elements are aligned in rows and columns or along a centre line. When elements are not arranged in row/column format, consider highlighting the alignment paths. Use left or right alignment to create the best alignment cues and consider justified text for complex compositions.

Key take-away: Organise your design elements in a way that makes it easier for customers to navigate your service.

Example of forms of consistency

7. Consistency

Consider aesthetic and functional consistency in all aspects of design. There are four types of consistency:

• Aesthetic consistency – use to establish unique identities that can be easily recognised
• Functional consistency – use to simplify usability and ease learning e.g. the controls of a remote that are now universally recognised
• Internal consistency – ensure that systems are aligned behind the scenes  e.g. signs within one system like a cycling track
• External consistency – ensure consistency across external platforms, to the greatest degree possible e.g. emergency signs that are the same across different systems

When common design standards exist, observe them.

Key take-away: Give your customers a consistent experience at each part of their journey, and at every touchpoint.

These seven universal design principles are the building blocks for better, more successful designs. By getting these basics right, you can establish a foundation that lets you create more customer-friendly services that better meet the needs of your users.

Find out more about universal design principles:

Part 2 in the series: Designing for accessibility
Part 3 in the series: How to design responsibly

Find out more:

Learn more about universal design principles
Learn more about Mpesa
Ted talk: You don’t need an app for that

Recent Articles