WalleyBank
A mobile and web platform that enables users to manage their savings and take charge of their finances.
Project Overview
This was a project I completed for my UI Design final assignment. The assignment is based on a fictitious brand, WalleyBank.
Banking is oftentimes a stressful and daunting experience. For many, the experience of wanting to do more with their finances and take charge of their savings is a complicated process.
The task is to create a banking experience (desktop and mobile website) that is easy to use and allows people to create savings accounts that help them save for small, fun items, such as a new phone or sunglasses, and large items, such as a house deposit.
Details
Role: UI Designer
Company: WalleyBank
Tools: Figma, Coolors.co, Canva, Miro
Objectives and Goals
Provide people with an automated process that assists them with saving money
The research found that a significant group of people have the desire to save, but have difficulty staying on budget. WalleyBank will separate the user’s money into buckets by a percentage set by the user. This gives the control of saving to the user and provides them more visibility around what they are spending.
Empowering users to take charge of their finances
Managing finances can be a daunting experience. In addition to having a user-friendly website, WalleyBank will aim to create an online environment that is calming, warm and encouraging.
The Task
Create a defined customer journey, branding assets (mood board and component library) and high-fidelity screens for both desktop and mobile of the banking website.
Design process
The Users
Define
The flow diagram here details the user's journey through the WalleyBank website from the point of logging into their account to access their desired activity which could be scheduling a payment, viewing their statements, creating a saving goal or getting help and support for their online banking.
The diagram also accounts for the error, loading, partial, empty and ideal UI states.
Branding
In creating WalleyBank's brand identity and mood board, I sought to create a brand that is trustworthy but undaunting to interact with. To counteract some of the negative emotions that some users might encounter when banking, the aim is to create a sense of calm with the colour palate and using illustrations that adds personality and a sense of warmth.
Brand voice: Trustworthy, Comforting, Empathetic, Guiding
Brand icon: In my mood board for WalleyBank, I took inspiration from a money tree for the brand's logo and icon. The leaves in the icon is an adaptation of the money tree's leaves, which symbolises strength, growth, stability and balance -- which are all of the characteristics of the WalleyBank brand.
Colour palette: The primary colours were also chosen to reflect those characteristics while inducing trust, calm, quiet strength and warmth. Secondary colors are used in conjunction without primary colors. We want to evoke warmth and guidance with them whilst also providing an option to have background colors and variety of sets that can come from this.
Typography: Pairing a contemporary sans serif typeface, Roboto, with a Latin serif IvyPresto Display used in our brand marque create a modern tension between ornament and utility.
Mid-Fidelity Screens: Iteration 1
Mid-Fidelity Screens: Iteration 2
Usability Testing
The mid-fidelity prototype was tested with three users.
Users were tasked with activities that brought them through the user flows of creating and editing their saving goals and payments, viewing their profile and help & support available and a browse through the entire website.
Users were asked about the overall layout, colour scheme, and design as well as how easy they found the tasks.
I've created a detailed affinity map after collating the results and observations made during the user interviews. After performing a series of 5 tasks, here are the overall feedback and synthesis from the findings.
Overall, the prototype was well received by the users.
They felt that the flow was smooth and they were able to perform all requested tasks relatively well.
Testing and User Insights
Affinity Mapping
Some notable quotes from the testing include:
"The name Savings Buckets seem unprofessional. It should just be goals."
"I really like the colour scheme of your app/website. The dark green reminds me of nature and is calming and relaxing compared to colours that banks usually use which feel sterile and harsh."
"With the exception of the Savings Buckets, everything else looks good. It’s making that page stand out even more because of how confusing it looks and the colour isn’t consistent."
Usability Testing and Synthesis: Iteration Process
High Fidelity Screens
