Money done easy. With Wally.
In October 2020, as part of a 10 month course UX Design, I started designing an online banking app. This case study is showing all of the work I did over the course of six months. The final product is an interactive prototype including 125 screens.
responsibilities
UX Research, UX Design, UI Design
Show prototype Watch demo video
About wally
With the massive growth in online retail and transactions, people often end up using multiple different apps to manage their financials.
Wally bridges this gap by offering an online banking app to easily manage money, make and request payments and save across multiple savers.
The Problem
People don’t want to rely on having to carry their wallet around to make payments. They want to enjoy a smooth and secure payment process via their phone.
The Process
Competitive Analysis
To discover working strategies of existing competitors and opportunities to improve upon, two leading online payment platforms were investigated.
View competitive analysis
Interviews and Surveys
Qualitative and quantitative research was done through interviews and surveys to identify the problem users were currently experiencing around online payments.
The research data was analysed through affinity mapping.
View user research analysisUser Personas
Based on the research findings, two different user personas were created.
These user personas, Sam and Meghan, were referenced throughout different stages of the design process to build empathy and keep their needs front of mind.
View user personasUser Journeys
User journeys were created based on the Nielsen Norman model. This ensured a user-centric approach was applied.
By looking at the different touch points between the user and product over a period of time, user journeys turned out to be a valuable tool to discover new ways of solving the user problem.
View user journeysUser Stories
To break the scope of work into manageable tasks, user stories were created for each of the app’s high-level requirements.
View user stories“As a user, I want to move money between different groups so that I can save for particular goals.”
“As a user, I want to set budgets for different categories, so that I am less likely to spend too much.”
“As a user, I want to search for a particular transaction, so that I can split this payment with other people.”
User Flows
Once a clear understanding of the user was established, user flows were the first step towards designing a solution. Through user flows, a rough idea of the required screens was developed before continuing to site mapping.
View user flowsSite Map
A card sort was conducted with potential users to discover the most logical way of grouping elements from a user perspective
This information was used during the site map creation in which the app structure was further laid out.
Wireframes
Wireframes were created in different fidelities for both mobile and desktop.
Using pen and paper, low-fidelity wireframes allowed for quick iterations.
Mid-fidelity and high-fidelity wireframes were created in Figma and a high fidelity prototype for mobile was used for usability testing.
View wireframes
Usability Testing
Usability testing was conducted with six participants. The test results were analysed through affinity mapping and a rainbow spreadsheet.
Results showed hesitance towards making a saving goal and discomfort around payment reminders due to a lack of personalisation.
Various iterations were made based on the rest results to improve to the app's usability.
View usability test planPreference Testing
Preference testing was conducted to test the visual designs of the budget feature. Results revealed the user’s preferred visualisation, and gave insights into how users interpreted the goal of the budget feature based on each design.
View test resultsThe Result
Interactive Prototype
Once iterations were implemented, UI was applied to all screens.
The finalised wireframes were then turned into an interactive prototype consisting of 125 screens.
Show prototype
Feature 01
Split Payments
Want to request money back from friends? Create a request, send them a link or simply head to a previous transaction and split it with anyone you fancy.
Try payment requests
Feature 02
Savers
No need to save all your money in one place. Create as many savers as you want to keep a clear overview.
Need a little help to save? Set deadlines, create automated deposits or add a lock to your saver to stop yourself from taking money out.
Try savers
Feature 03
Payment Reminders
We all have that one friend who always owes someone money. No need for those awkward conversations anymore.
Go to a specific payment request and simply send them a reminder to pay. You can even add a message to make it more personable.
Try payment reminders
Feature 04
Budget
It’s nice to feel like you actually control your spending habbits. With budgetting you can dedice how much you want to spend and keep track of your behaviour.
Want to get uber organised? Adding categories will do just that for you.
Try budgetStyle Guide
A custom style guide was created including logo, colours, UI elements, tone of voice, typography, grids and lay outs and more. Special attention was given to make the app accessible to all audiences, including those with vision and hearing impairments.
View style guide