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.
UX Research, UX Design, UI DesignShow prototype Watch demo video
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.
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.
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 analysis
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 personas
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 journeys
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.”
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 flows
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 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 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 plan
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 results
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
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
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
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 budget
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