Tools
UX Case Study
Walley Bank App
My role in this project was to:
-
Create a visual identity and a foundation for a design system for Walley Bank
-
Design a section in the app where saving is encouraged through big and small saving buckets.
-
Design new payment section
Problem Statement
Can a bank app help people to save money easier and faster?
Walley Bank is a dive in the UI Design workflow
Objectives
The objective of the project is to complete the UI design of the Walley Bank website based on the UX research conducted. The website should allow users to create savings accounts that help them save for both small and large items, such as a new phone or a house deposit. The design should be user-friendly, visually appealing, and reflect the brand's personality.
Our Process
The user interface design process is an iterative workflow that involves designers in several tasks to create prototypes for testing and development. The activities typically include developing a moodboard, creating a user flow, designing a library system for design elements, creating low-fidelity wireframes, conducting user testing, and producing high-fidelity and interactive prototypes. These prototypes are then delivered to the development team for implementation.
Our Target audience is the working population of age group 18-60
Product Users
Our Target audience is the working population of age group 18-60
Research
After conducting user research, two primary personas were identified: The Big Spender and The Organiser.
The Big Spender requires assistance in managing their savings, while The Organiser needs a comprehensive view of their savings and transactions.
The Organiser
The Big Spender
User Flow
Initially, I focused on conceptualising the most straightforward approach that a user could follow to accomplish their objective and identified the necessary content to include. Next, I created a rough outline of the primary menu and page flow. Lastly, I delved into defining various page states to enhance user experience and simplify their interactions. Ultimately, I arrived at a dynamic framework that encompasses all significant components and incorporates diverse page states.
Competitor Analysis
To differentiate Walley Bank from its competitors, I began by conducting a visual analysis of the competition. I scrutinised the appearance and impression of the six leading banks in Australia to gain an understanding of their design and overall vibe. Using this information, I then created a summary of their visual aesthetic to inform the development of Walley Bank's unique look and feel.
Moodboard
During the initial design phase, I commenced by crafting a logo that would represent the bank's identity. Subsequently, I decided on an appropriate colour scheme and fonts, which I integrated into a library in Figma for seamless accessibility. Furthermore, I established a collection of components, and their respective styles were included in the library to facilitate future use.
Component Library
Low-Fi Wireframes
The low-fidelity designs served as a foundation for the subsequent creation of high-fidelity designs.
User Testing
The designs were tested among 8 users and had to complete the following tasks:
-
Check how much available balance you have left in your savings to go out for dinner this month!
-
Can you walk me through the process of attempting to edit a pre-existing payment?
-
How would you go about adjusting the notification preferences from Walley Bank on your phone to address the issue of excessive notifications?
Feedback
‘Someone could be looking over my shoulder and see exactly what my balances are.’
Iteration
User found the account balances to be too large. It made them feel as if the website wasn’t as secure as they would like.
Provided the users with the option to control the visibility of their balance information
Problem
‘What if I don’t want Netflix anymore?’
How can I cancel that payment?
Iteration
Problem
Users were unsure how to edit a pre-existing payment. They thought this would need to be editable if they ever need to make changes.
Users are now given the option to modify or cancel payments through a menu accessible via three carousel dots.
Reflection
I recognized the value of obtaining feedback at different stages of the design process. By sharing my designs with stakeholders for a quick review, I ensured that any design issues or concerns were identified and addressed early on. Additionally, conducting usability testing allowed me to gain valuable insights from actual users, providing me with a valuable perspective and helping me refine and improve the user experience.
