The Australia and New Zealand Bank Online Insurance Experience

Project

Design overhaul for ANZ’s online insurance experience that puts ANZ 2 steps ahead of it’s competitors.

Client

The Australia New Zealand Bank (ANZ)

Project duration

6 Months

Deliverables

  • Updated user experience
  • Updated interface
  • Working prototype of end to end insurance experience
  • Comprehensive Figma design system

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

Competitor research is done in order to assess what others are doing well and what could be improved on within our own experience. We learned that competitors generally follow a similar flow. Later in our designs we simplify this flow to make a slightly more linear experience which we believe suits our users better.

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.