Digital Design principles

1. Orientate the person

People must understand where they are and how to get to where they want to be.

How we deliver this: Where campaign titles are used, make sure there’s an H1 product name above.

An example of how we have orientated the user by combining the product name and marketing header for current accounts.

2. Act as expected

Make sure content is easy to learn, feels familiar, and works how the user expects to build confidence and trust.

How we deliver this: Reuse approved patterns from our Design System.

Examples of a tooltip, one-time passcode entry with autofill, and a date of birth field with auto advance and numeric keyboard.

3. Clear hierarchy

Logically structure information in the correct semantic way.

How we deliver this: Make sure H1s, H2s, H3s are in the right order.

Example of content hierarchy on the Virgin Atlantic landing page.

4. Chunk up activities into manageable tasks

Break down complex actions into small, easily completed tasks, and end on a high to increase satisfaction.

How we deliver this: Group inputs in a logical way.

An example of how we have broken up a longer journey into smaller steps within the Credit Card app.

5. Prevent mistakes

Anticipate the information people need, when they need it, to prevent errors and questions.

How we deliver this: Use auto-complete features within operating systems and well positioned hint text.

Example of hint and error messaging used in an onboarding journey.

6. Provide clear feedback

Keep the user informed throughout their task so that they know what has happened and what is happening next.

How we deliver this: Error boxes and success messages go a long way.

An example of clear error states in the Find a mortgage tool.

7. Consider the extremes

Stress test designs across edge cases and unhappy paths to ensure all scenarios are catered for.

How we deliver this: Understand the business requirements and customer needs.

An example of how we consider the extremes in our Virgin Money Stocks and Shares ISA calculator.

8. Design for tap and click

The interface must be designed for mobile, tablet and desktop devices. Working intuitively for the touch of a finger in a small space and when using a keyboard and mouse with a wide screen.

How we deliver this: Reuse patterns. For anything new or unfamiliar we design mobile first.

An example of how we design for tap and click from our Stocks and Shares ISA online service account view.

9. Make things obvious

Minimise a person's cognitive load by making actions and instructions clear to make sure a person doesn't feel overwhelmed when a decision needs to be made.