The Australia and New Zealand Bank Online Insurance Experience

ANZ (The Australia and New Zealand Banking Group Limited) is an Australian multinational in the finance and banking sector, with its main hub in Melbourne, Victoria. It’s Australia’s second-largest bank in terms of assets.

Our mission was to enhance the online experience by allowing mutiple types of insurance to be purchased under a single quote. 

PLANNING & RESEARCH

User persona’s are created using available data in order to help us empathise with our customer’s needs. These personas are then used to create a journey map. The map is useful for spotting pain points along the journey.

Competitor research is done in order to assess what others are doing well and what could be improved on within our own experience.

UI DESIGN

The images showcase a before and after of the Quote summary page (the latter being the shorter of the 2 images). Immediately you can see the drastic simplification that has taken place.

1. Background Clarity: Background colours have been used to support the visual grouping of information.
2. Eliminating Redundancy: Repeated information has been removed or relocated.
3. Simplified Actions: Component types have been re-considered and relocated for more purposeful interactions.

USER TESTING: PROTOTYPE DESIGN

The frames and wires depict a fully interactive prototype with functioning buttons, links, and navigation, allowing users to navigate it page by page.

This prototype was used in user testing sessions. In general we found that users reacted well to the designs, with only minute changes being required.

USER TESTING: FINDINGS

The initial designs were created with limited user data, it was imperative to run the designs through user testing scenarios to ensure their usability across a range of users.

The image showcases the findings from these testing sessions, presenting feedback ranging from positive to negative.

FIGMA LIBRARY

The video showcases the ability to quickly and efficiently prototype designs within figma through use of auto layout and component variants.

The library is treated the same way a developer would treat their framework, with changes being made, approved, and then pushed to the ‘master file’. Changes to components are made in one place and then updated globally, saving time and effort.

FIGMA LIBRARY

Example of a single component which includes 30 variants (different versions of the same component) that can be easily switched between when mocking pages up.