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.
Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website.
Use of color as an Implicit Visual cue that brings a call to action.
Date Picker control is provided along with Date input control where users can select the required Date easily by navigating between days, months, and years.
Micro-interaction that indicates that the stage is completed.
Material Design Text field with Label and Placeholder coupled with micro-interactions.
Desktop -- Term Deposit consumer application. [Hover over to view annotations].
Breadcrumbs are an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website.
Use of color as an Implicit Visual cue that brings a call to action.
Micro-interaction that indicates that the stage is completed.
Action available to the user when an activity takes place on the page to save the session.
Dynamic alerts that hint the user to perform actions.
Question container to group similar elements.
Container box that holds similar elements together.
Desktop -- Term Deposit consumer application. [Hover over to view annotations].
A thoughtful hierarchical way for guiding users as their flow through the content.
Action available to the user when an activity takes place on the page to save the session.
Dynamic reveal of input text fields with micro-animations for users to enter information.
Grouping
elements in a container together for allowing ease of comprehension.
Call to action visual cue to indicate the user hasn't filled the page yet.
Triggers default ios Date picker to allow users to select options.
Dynamic reveal of text fields for entering more information.
Visual cue that unconsciously tells the user that the page is filled.
The button is activated revealing the call to action.
iOS Webview -- Term Deposit consumer application. [Hover over to view annotations].
Action available to the user when an activity takes place on the page to save the session.
Auto changing button label allows users to get a sense of completion stage.
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.
Sticky Toasts are lightweight notifications that display a message for a set amount of time-stamp reassuring the users after an action is performed.
Visual cue that allows users to perform a call to action once the input fields are filled.
Material Design Text field with Label and Placeholder coupled with micro-interactions.
Desktop -- 2-Factor Authentication. [Hover over to view annotations].
Sticky Toasts are lightweight notifications that display a message for a set amount of time-stamp reassuring the users after an action is performed.
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.
An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore. Without proper cues, people are confused about where to look for information on the site.
Visual indicators to differentiate items in a list through the use of icons.
I proposed simple navigation categories that must be descriptive, specific, and mutually exclusive so that users can navigate without hesitation.
Most dashboards use confusing menu labels. Such labels make it difficult for users to find what they’re looking for. I proposed to have simple phrases that reduce the cognitive load for the user rather than having the user decipher complex phrases.
I safely eliminated underlines for download links. Since the component design clearly indicated the area's function.
I directed to use show/hide content reveal so that the information on this page is digestible and not overwhelming to the user.
I used an indicator for a notification to communicate that an inbox needs attention.
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.
Sticky Toasts are lightweight notifications that display a message for a set amount of time-stamp reassuring the users after an action is performed.
Visual cue that allows users to perform a call to edit action item once the input fields are filled.
Question container to group similar elements.
Container box that holds similar elements together.
Grouping relevant information under similar categories to increase readability.
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.
Because hidden navigation is more common on mobile than on desktop, people may be more familiar with it and more likely to think of using it.
Green bubble hits call to action for the user to perform a task.
Dynamic reveal of fields with micro-animations for users to enter view more information.
Grouping
elements in a container together for allowing ease of comprehension.
Call to action visual cue to indicate that more information can be viewed over a finger tap.
Tap to action for revealing more information in the similar component.
Tap on the logo to reach on the top of the webpage. Giving users a sense of the default iOS interactions for faster scrolling to the top of the page.
Sticky Toast notification giving users visual feedback.
Dynamic reveal of input text fields with micro-animations for users to enter information.
I safely eliminated underlines for download links. Since the component design clearly indicated the area's function.
Sticky Header gives ease of navigation by floating across the webpage.
Grouping relevant information under similar categories to increase readability.
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
Next Project
