IMB Bank

IMB Bank wanted a fully-fledged digital transformation in order to match their modern banking solutions. The project included the complete rebranding of their website: designing a new design system and then bringing it to life. The task was to create a seamless, intuitive, and engaging user experience that would help this brand stand out in extremely competitive conditions.

Year

2023

Design Team

Gianna Moreno
James Anderson
Melo James
Kemei Lee

Project Type

UX, UI, Branding

Role

UX/UI Designer

Overview

Rebranding strategy for a modernised banking experience

IMB, one of Australia’s oldest mutual banks, is based in the Illawarra Region of New South Wales with its headquarters in Wollongong. Known for its high customer satisfaction, IMB faces the challenge of modernising its outdated branding, website, apps, and internet banking to compete with larger, more digitally focused banks.

Problem

The current website was outdated and difficult to navigate considering their many product offertings. With no comprehensive design system in place, visual elements and components were distributed very unevenly across different page types- fragmenting the user experience.

Solution
View Final Solution

Reimagining the information architecture: A big focal point of this was to reduce the click count it takes for users to reach information. To achieve this, we conducted in-depth IA workshops, analysing the structure of leading Australian and global banks. We mapped out user flows and used insights from competitor research and user journeys to form a more seemless experience.

Designing for a modern, responsive design: This project needed responsiveness from mobile to web as one of the core features. The approach to designing responsively in Figma meant designs could be handed over to Webflow with little to no friction, and ultimately, the development team could implement consistent experiences across all devices.

Design System Implementation: We created a repeatable design system within Figma, standardising colors, typography, icons, and UI components across the entire website. This created a consistent look and feel while making future design and development easier.

Design
System

To create a flexible, scalable design system for IMB, we implemented a robust system of variables which were divided into two key types: Primitive and Semantic Tokens.

Primitives were the foundational values—think of them as the raw building blocks of our design. Semantic Tokens took those raw values and assigned them specific roles in the design, such as representing a warning or success state, background or foreground colour etc.

Rather than focusing on a specific colour, these tokens conveyed meaning and purpose, making it easy to change the colour/style throughout.

This approach gave us flexibility, allowing the design system to adapt as the website evolved- while also maintaining consistency in the user experience. This ensured everything visual had intent and, by doing that, made updating easier, keeping it coherent while scaling.

Solution

The Modern banking solution

Considering above UX decisions; design system and UI design, these screens have been created following the agile process along with iterations wherever needed.

Our templated approach

The templated design approach was taken to create an application that is more consistent while greatly improving the speed of design and development. We enabled faster updates and adjustments by making reusable components, rather than having to rebuild designs from scratch for core pages and templates of flows

This not only improved our efficiency but also ensured that users experienced a cohesive interface. This allowed the client to have greater flexibility to scale the product and create new content while maintaining the same high-quality user experience.

Award nomination

We were nominated as a Webflow All Star Finalist

More Case Studies

Kaia

Rush Gold