Bendigo & Adelaide Bank, Australia

Digitized 8 paper-based loan management processes

SUMMARY

Bendigo and Adelaide Bank needed a digital makeover for their business lending division. I led the UX design, transforming paper chaos into a seamless platform for 4,000+ users. It unified 8 banks, 4 data sources, and diverse needs, all while exceeding accessibility standards.

ROLE

Sole UI Designer & UX Researcher
Accessibility Designer & Tester

TEAM

Business Banking Leads
Technology Lead
Product Manager
Frontend Developers
Backend Developers

8

Processed merged into one

>4000

Live users & 5 different user personas

100%

AA WCAG 2.0 Compliant

Setting the stage

Defining ways of working

In the first phase, I created documentation and conducted discussions with the tech team to agree on various terminologies and the UX design process.

I also walked them through my approach to ensure alignment among the team.

Project Setup & Version Control

In the first phase, I created documentation and conducted discussions with the tech team to agree on various terminologies and the UX design process.

I also walked them through my approach to ensure alignment among the team.

User Research

Contextual Inquiry

To understand the perspectives of various stakeholders and how they worked with each other to form the overall process, I made in-depth contextual inquiries about the banking terminologies, the lending process, the existing manual process.

I culminated the preliminary user study by creating detailed user personas and a service blueprint.

Stakeholder & Tech Discussions

I conducted discussions with the backend engineers and the Product Manager to understand the various data sources and the relationships with federal data sources.

I took part in stakeholder discussions to understand their vision for the product and their needs and pain points.

Definition

Information Architecture

I collaborated with the business analysts to understand the API integrations and designed the information architecture for the MVP.

Low-fidelity Wireframes

I conducted brainstorming sessions with the Product Manager to ideate the layout patterns that would be most suitable for the amount of data and content we were anticipating.

Mid-fidelity Wireframes

Once we had the flow and patterns in place, I designed mid-fidelity wireframes and prototyped them.

We tested these prototypes with some important stakeholders to catch process gaps early on.

Visual Design

Design System

I considered the brand guidelines for the parent bank and created the products palette and typography. product

I employed the atomic design system strategy - I set up the basics like grids, iconography, etc followed by molecular components like buttons and text fields. I then progressed toward creating structures like tables and sidebars.
Once these structures were in place, I created layout templates to standardize the page structures for different scenarios.

Accessibility

I created color swatches that were at least 4.5:1 in contrast. I also ensured all components designed followed Material UI guidelines and paradigms, since they have great accessibility support.

UI Design

After considering various options and UI patterns, the stakeholders chose the glass morphism trend.

Given the accessibility considerations, we chose to use it sparingly for decorative effect only.
Since the project is under an NDA, I can walk you through the designs in person or over a call.

Developer Handoff & Support

Accessibility Handoff

To convey tab orders, ARIA labels and alt texts within the design, I structured the Figma file and created documentation to standardize language and vocabulary for accessibility.

Accessibility Testing

As the product developed, I conducted accessibility testing using IBMs chrome plugin. I created a tracker to log bugs and their status.

Collateral360 is currently live with over 4000 users. The product received great appreciation from the the end users and continues to be refined with usage.

While specific metrics are pending, stakeholder appreciation and system integration mark early success indicators.

The design system I created for Collateral360 was adopted into many other digital products in the business lending division. Moreover, the product achieved a 100% compliance with WCAG 2.0 AA standards.

Let's explore how my expertise in design and strategic insight can unlock new possibilities for your team.