UX DEsign

ME BAnk Digital

Helping all australians get ahead

Getting some ME time.

I joined ME Bank in June 2019 to join their existing UX team. ME was in a state of transition - most of the bank's technology was built on white-label solutions, limiting our ability to deliver modern, scalable experiences to our customers.

A big part of my remit coming into the business was to identify opportunities to transition the bank toward customizable experiences that could deliver greater value to their customers. This involved implementing a number of UX practices, as well as building and testing new products and features.

This case study is sorted chronologically, with my most recent work being listed first. You can skip to particular projects using the links below.

Projects included in this case study:

ME Mobile App

Galactic Design System

Home Loan Discovery

ME Bank Mobile App

Role:
Team:
Timeframe:
Status:
UX Designer
2 UX Designers, 1 UX Lead
Mar 2020 - Oct 2020
Deployed
In early 2020, the decision was made to overhaul our existing ME Bank mobile app to a new, upgraded version. The mobile app was built on a third-party white label solution, so the primary task of this overhaul was to assess the white label product for suitability, and then overhaul the look and feel to match ME's brand.

Gap Analysis

We began the process by painstakingly analysing the screens that the vendor had provided of their product. There were over 200 screens in the delivered file, and we compared each screen to the current state of our 'V1' application. We then listed every change to the user experience, from high-level changes such as completely different flows, down to changes in UI controls or information presentation.

Each of these flows was analyzed using the Jobs to be Done model, which allowed us to understand how these journeys would function both on a UI level, but also at a deep customer level. We would later take this information and use it to inform our design decisions.

Early user testing

It was important for us to identify any issues with the new user journeys as soon as possible, as well as start testing different UI implementations to measure the response from our customers. To do so, we used the vendor's brand style and asked customers to respond to different layouts.

We chose to use the vendor's brand instead of our own so that the users would not be influenced by the appearance of the current app. This allowed users to disengage from their expectations, and instead treat the app as something new entirely.

Look and Feel

With key areas of the app identified, and with some initial user feedback on preferred input methods and journey flows, we began overhauling the vendor app to fit with ME Bank's brand.

ME Bank has traditionally stuck to a black and white colour scheme, but many complaints from customers on the App Store and Play Store identified that they'd prefer more colour and excitement. This was a core focus for us as we moved through the screens - retaining our monochromatic look and feel, but injecting some vibrancy where we felt it had an impact.

We also made a conscious effort to maintain a modern, clean design. Our V1 app was cluttered and claustrophobic, and many users felt it was unpleasant and difficult to use. We wanted V2 to feel bright, open, and simple. Generous white space and strong typography were key in accomplishing this.

Screen Gallery

Consistent visual language was key in communicating the correct concepts to our customers. For example, using black screens for the end of a journey, or using our green colour only on interactive or positive elements, was something that assisted new users in understanding the UI.

Additional testing

To assist with testing, I constructed a high-fidelity prototype. This was used in both internal and external testing to test various user flows and design decisions.

In particular, the vendor solution included significant changes to the user journeys for transferring money and paying bills, and these needed to be extensively tested before we could be confident about deploying those changes.

You can try the prototype for yourself here.

Before and After

One of the primary goals of the app upgrade was to provide a brand new look and feel that uplifted the app, making it feel modern and efficient. The screens below demonstrate how each screen of the app was uplifted, and really showcases how much of a difference a simple facelift can make.

Design system

Role:
Team:
Timeframe:
Status:
UX Designer
Solo Project
Mid 2019
Complete

The importance of a design system

One of my early assignments at ME Bank was to design their first UX Design System. This system would be used across our digital platforms, and would allow designers to work quickly and efficiently while also maintaining consistency cross our platforms.

A unique challenge of implementing a design system at ME was the various platforms; ME used different back-end and front-end systems for all their products, including completely different CMS and development environments between the mobile app and website. The design system would have to be ubiquitous enough to cater to any platform, but still maintain design consistency.

To infinity and beyond

I nicknamed the design system 'Galactic', because I wanted a name that encompasses just how far reaching this design system would need to be in order for it to succeed - and, frankly, because I'm a space nerd.

The space theme continued throughout the design of the system, as I wanted a simple and easy to understand analogy that could be used when talking to people about the system. This is explained further below.

Design Hierarchy

We needed a hierarchy that reflected the diverse nature of ME Bank's platform and the business itself. To that end, I gave the system three distinct hierarchical levels; Elements, which would be each small component. Systems, which are encompassing libraries of components, and Planets, which collect entire collections of systems and elements at a platform-specific level.

This approach allowed us to have elements that were shared across different products, and elements that were not. When a designer is working on a feature or product, they simply need to ensure they're using the right 'Planet' library, rather than worry about analyzing at an element or system level. Likewise, it meant that we could use version control to scale the design system from the bottom up, so that elements become reusable, flexible assets across our business.

Examples

To make it clear how the design system works, I provided a number of real-life examples to showcase it's flexibility.

Practical Application

For our design teams, I also provided real life examples of how we might structure our files in order to fit the system, and provide the best level of flexibility. As ME Bank had not yet implemented any sort of version control within their design files, I also took this opportunity to propose that we implement version control in order to mature our thinking and ability to experiment.

At the time, the business also did not have design files that matched our production environments, so this was another element I proposed to implement.

Implementation of the Design System

I was moved to other projects before this system could be implemented. However, the structure of our files and the thinking that went into how we structure our design system was taken forward and used when a design system was finally implemented later in the year.

The theoretical work that went into designing this system, and the practical application of the system itself, allowed me to flex some creative muscle and elevate my thinking in terms of how a high-performing UX team operates.

Home Loan Analysis

Role:
Team:
Timeframe:
Status:
UX Designer
1 UX Designer, 1 Service Designer, 1 UX Lead
June 2019 - Dec 2019
Complete

Becoming a #1 bank for mortgage brokers

My team and I joined ME Bank with the mission statement to help the bank identify how to become a first-choice bank for mortgage brokers. We were given full creative control on how we accomplished this outcome, and so immediately began planning how we could execute the work. We knew that it would be vital to be able to communicate not just the outcomes, but also the journey of how we came to our conclusions. We also understood that there would likely be a number of complex solutions requiring coordination across the business.

UX Process

As this was my first project at ME Bank, and as part of a new team, it was important that we had a process that the team followed. I was asked to design a process to follow and create a document that we could use to walk stakeholders and collaborators through that process.

This document needed to be simple enough that anyone could understand what we're trying to achieve, while also give a clear picture of our process. I actually designed this for ME Bank before I joined the team, and thus the document doesn't follow their brand.

Project Poster

To help promote the goals of the project, and to share what we're working on with the wider team, we built a project poster following the Atlassian Project Poster model. I spruced up this artefact so that we could post it around the building, with the hopes of generating interest in what we were doing.

Customer Interviews

I felt that understanding the perspective of our customers - just like any other UX project - would be crucial for our success. In this case, we had multiple customers in the journey; the home buyer, the mortgage broker, and our internal teams that process the home loan applications. We scheduled interviews with all three of these groups, sitting down with them in face to face settings and walking through their home loan journey.

We discovered that each customer segment had completely different challenges. Customers were frustrated with the complex, slow experience. Brokers want as much information as possible to provide to their customers. Our internal teams want to meet their SLA's and work efficiently and easily.

As we moved forward in the project, these interviews became vital resources that we would return to almost everyday, keeping us as close to the customer as possible.

User Journeys

From these interviews, we created complex user journey maps. These maps also combined with some process and service mapping, giving us a holistic view of what's happening with the customer, broker, and ME Bank at any point in the process.

We broke these journey maps down by customer segment, and by phase of the journey. This gave us a detailed, easy to digest view of how the home loan process happens.

We also mapped every pain point we had discovered through our research. There were hundreds of these pain points, spread all across the journey. This allowed us to see where our pain points 'clustered', and therefore which parts of the journey are most fraught. This also allowed us to create a matrix of these pain points to understand the impact and feasibility of resolving them.

Journey Maps

For privacy reasons, I've removed most of the detail from these journey maps. If you're curious about this piece of work, feel free to get in touch!

Communicating to the wider business

Once we'd identified all our pain points, and the customer impacts of those pain points, we began formulating a future state for the business to aspire to.

With this future state developed and validated with our customers, the next challenge was to communicate it to the wider business. I set to work on creating a story-driven presentation that put our audience into the shoes of the various customer segments, and helped them understand how the changes we were proposing would significantly improve our customer experience.

Presentation

The presentation itself was a combination of ME Bank's brand look and feel, and my personal design style. I used basic illustrative assets to convey the story where possible, and paired these with simplified, quick language. The point of this presentation was not to convey the technical of logistical challenges, but simply to help our audience empathize with our customers.

Presentation Slides

These slides became another source of truth that our teams could point to as an aspiration point for their work. It created a shared understanding of what we were aspiring to do as a business.

Evergreen assets

This presentation became something we came back to again, and again, and again. It was a great tool to help business owners, developers, designers, and customer service staff understand the goals of the project

.While most of our recommendations to ME Bank will take years to complete, many of the ideas and solutions we created have since been implemented and ME Bank's home loan experience continues to evolve and improve.
Return to UX Case Studies