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].
iOS Webview -- Term Deposit consumer application. [Hover over to view annotations].
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.
Desktop -- 2-Factor Authentication. [Hover over to view annotations].
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.
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.
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.
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