Overview

Walley Bank allows people to create a savings account and utilise tools to have a better overview of their cashflow and financial activity. 

This mobile web project was created as part of my UI Design course at RMITO University, with the goal to come up with practical decisions for UI design based on research and testing.

Role: UI Designer, Research, Prototyping, Testing.
Duration: 6 weeks.

Process

Working with the brief, personas and attached wireframes provided. The aim was to explore the next iteration which include research, user testing and iterations leading to a high-fidelity prototype.

Visual Direction

Reviewing the personas, revealed that our audience will feel more confident with budget visibility and control. 

I brainstormed the brand and mood board based on the target audience. Choosing tones of blue for trust and communication. The focus was to present information and finances clearly. A legible font choice for text and numbers for easy reading on any device size. Appropriate information hierarchy and graphics charts for financial metrics at glance. Icons styles* are minimal as the focus is about the numbers and tools. 

Based on the audience’s needs, I came up with an idea to add a Monthly Activities page to for customers to keep track of their cash flow. The page presents an overview of monthly money movements that are incoming and outgoing. You will see this later in the designs and in the prototype.

User Flow

This is the user flow of the main areas of the webpage. Areas include: Savings buckets, monthly activities, payments and viewing statements. 

While mapping the UI states, I had the following thoughts: 

• What states might appear?
• What it could look like?
• How this is communicated when a user encounters that state?

Visual Theme

With visual direction in mind, I explored theme options that could align with information clarity. Finding a style that could easily communicate financial metrics, numbers and all visually clear at glance. 

I choose the third theme because it best represents the research and goal of Walley bank. 

Components

Components were created after choosing a theme. Updates were made throughout the project as iterations and feedback from usability testing.

UI States

Different UI states were iterated while considering how these get communicated to users and serve as a guide for development.

Responsive Design

These responsive concepts give us an idea of what the users see when they use the website on different screen size. This also acts as a guide for breakpoints and development.

Usability Testing

To validate my designs, I conducted in-person usability tests with participants who have accessed online banking on their mobile devices. With a written plan, I introduced the format of the test session, asked for consent, gave context on the product and encouraged individuals to think out loud as there are no right or wrong answers.

I gave participants a scenario, followed by prompt tasks to test and observed on the following:

• Tested two features from task prompts: Savings buckets and Monthly activities.
• Observations: recorded any confusion, frustrations, behaviours and actions.
• Asking post-task questions for other feedback.

The mid-fidelity concept which was tested with participants

Affinity Mapping and Synthesis

After reviewing the recorded sessions and adding notes from participants’ thoughts, behaviour, confusions and feedback, I grouped them into themes and relevant areas of issue. 

Insights and Recommendations

Insights from testing and participant’s feedback helped me explore the following recommendations to improve clarity and communication: 

• Change the Monthly activities chart to show income and expenses separately
• Add a confirmation prompt whenever there is any money movement like “add funds”
• Remove one of the duplicate income information because that is confusing.

The feedback was overall positive and everything was easily understood.

Iterations

Before:

After: Income and expenses are separated to display cash in and out.

Added an extra confirmation step whenever there are money movements involved.

Designs

Mobile size

Tablet size

Takeaways

• Creating a comfortable setting for participants brings out more organic and natural behaviour in user testing. When they feel comfortable, it makes for a better experience too!
• Staying up to date with new technology and designing with people helps improve better UI designs.
• User testing reminded me to be aware of my own bias. It would benefit to do further testing and even with more participants to iterate on Walley Bank.