Redesign of personal banking and internal dashboard for the web and mobile interface of Judo Bank, an Australian based SME Bank.

Judo Bank

 

My Role 

Hi-fi Mockups, Interaction Design, Design System, Information Architecture, UX Design, Project Management

Tools

Figma, Zeplin, Adobe XD, HTML, CSS, Javascript (study and understand the feasibility of certain widget interactions)

Duration

7 months

Team Size

6 members

Company/Client

Aspire Systems/Judo Bank

Year

2018-2019

Overview

Revising the customer experience of personal banking across Web and Mobile.

Here I was a lead designer in a team of 6 people
(1 Primary Manager, 2 Backend Developers, 1 Front-end Developer,
1 Graphic Designer, and
myself -- UX Design Engineer). 

Apart from UX Design and shipping products live, I spent most
parts of my day in communication with Managers, Developers, and

Alex Twigg -- Chief Information Officer for Judo Bank.

Impact 

35K users

Judo Bank is an Australian Challenger Bank focused on small and medium-sized enterprise lending. As of May 2020 Judo Bank has raised $230 million in fresh equity at a post-money valuation north of $1 billion, from existing investors.

Product Highlight

This video gives you an overview of the product that I enjoyed working and showcases my work.

$1.1bn

Term Deposits Funded *

6,704

Term Deposit Customers *

* As of FY 2019 Australia

Process

I worked alongside my manager to establish our process as a team and crafted visuals for the development teams to build the core experience we needed to deliver for our users.

Expanding Design System

I worked with our frontend developer and graphics designer to craft a style guide for Judo Bank, which contains the library of common components used in the product and expands out to design guidelines for the development team to follow, as well as UX guidance on usage and implementation for every piece used in the product, from elements to typography and entire screen configurations.

 

The style guide was vital for both our developers and our graphics designers, giving us a shared kit of parts to work from and ensures consistency within our designs. This framework was adopted by additional pipelines in the line of Judo products used across multiple teams at the company today.

Color Palette and CSS properties

Text Styles and Components with CSS properties

Deployment 1.0

Product Refresh

In 2018, Judo bank decided to re-launch with its fresh identity. The refreshed identity, included a new design system, was a reflection of Judo Capital's promise to its stakeholders — digital, robust, and reliable. As a design owner for Judo's online Banking and Finance experience across Desktop and iOS Webview, I was responsible for the end-to-end experience for 35K customers across several product features. I executed the UI mockups for the Term-Deposit experience, 2FA (2-Factor Authentication), Internet Banking, and independently managed the iOS Webview redesign from its primal state to shipping with revamped features.

Desktop -- Term Deposit consumer application. [Hover over to view annotations].

Desktop -- Term Deposit consumer application. [Hover over to view annotations].

Judo-TD-mobile-1.png
Judo-TD-mobile-2.png

iOS Webview -- Term Deposit consumer application. [Hover over to view annotations].

Judo-TD-mobile-3.png

iOS Webview -- Term Deposit consumer application. [Hover over to view annotations].

Deployment 2.0

Feature Improvements

Our scope was to bring design parity across different aspects of the product. Once the Term Deposit workflow had been revised, it was time to focus on the cross-device 2FA (2-Factor Authentication) features and Internet Banking dashboard. Since the majority of our users were on the Web, I took a Web-first approach to explore the next set of improvements. I reorganized the content and made structural improvements to the Internet Banking page and high-level navigation.

2FA (2-Factor Authentication)

While working on 2FA (2-Factor Authentication) page, I prioritized information based on business goals and what's critical for the user to access their application.

Judo-2FA-1.png

Desktop -- 2-Factor Authentication. [Hover over to view annotations].

Judo-2FA-mobile-1.png

Micro-animation highlighting the placeholder and label to make it clearly visible. Error message uses a similar scheme color to bring the field in attention to the user.

iOS Webview -- 2-Factor Authentication. [Hover over to view annotations].

Internet Banking

While working on Internet Banking page, implementing the right information architecture (IA) and using appropriate navigation elements are essential to a successful dashboard and a good user experience. The biggest change lies in the navigational design elements used, not in the topics presented in the main menu. I proposed a collection of improvements to present information more explicit from the time user logs into the internet banking portal to performing a set of tasks and actions.

Judo-IB-1.png

Desktop -- Internet Banking [Hover over to view annotations].

In order to minimize the feeling of being overwhelmed with tons of information, I followed the accordion menu and clustering labels where users can click to reveal or hide content associated with them. In a way to expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later.

Judo-IB-2.png

Desktop -- Internet Banking [Hover over to view annotations].

While working on the Webview version of the Internet Banking page, implementing the information architecture (IA) for mobile with infinite scrolling was essential to a good user experience. The most important challenge is the visual layout of information on smaller screen devices or how the user will assess meaning and direction given the information presented to them. 

Judo-IB-mobile-1.png
Judo-IB-mobile-2.png

iOS Webview -- Internet Banking application. [Hover over to view annotations].

Impact & Reflections

I tracked development progress on a daily basis and prioritized design features by taking a phased approach. My work on Term Deposit scope alone led to a higher user adoption rate from 1.3K to 6.7K users. Currently, there's been an overall impact of 35K users across Term Deposit and Internet Banking.

My work done on this project for Judo Bank resulted in having good recognition. In addition, I was also responsible at the end to notify other teams on the UX overhaul so they could utilize most of the common elements for different parts of the Judo product lineup.

5.2x 

1.3K to 6.7K increase in user adoption

Previous Project

Infinite-Transit-cover.png

Next Project

Vault-cover.png