WalleyBank
02
About
DELIVERABLES
Design system
End-to-end design process
Minimum viable product
INTROduction
The Mission:
Many people want to save money but research found that users find it difficult sticking to a budget without the right tools. WalleyBank’s vision was to empower users to set savings goals with clarity and ease, while feeling secure and in control of their finances.
The goals WalleyBank wanted to achieve…
01
Empower users to save confidently
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.
02
Streamline everyday financial tasks
Design a user experience that makes routine banking actions simple and intuitive through clear navigation, visible CTAs, and well-structured information. The interface should minimise friction and decision fatigue, enabling users to complete tasks quickly and confidently, without hesitation or confusion.
03
Establish a trustworthy and distinct visual identity
Create a visual language that reflects WalleyBank’s core values — approachable, secure, and forward-thinking. The UI should balance personality with professionalism, reinforcing user trust through consistent branding, thoughtful use of colour and typography, and a tone that feels both modern and human.
I took the reins on designing the UI, translating validated UX research into a high-fidelity interface that is sleek, responsive and designed to make money management feel empowering, not overwhelming.
Lets dive deeper into the problem space…
Starting with understanding who the users are.
01
Clear visual feedback during tasks
Users felt uncertain when performing key actions like transfers or edits, due to a lack of immediate visual confirmation.
02
Personalisation of savings goals
Users want the ability to customise the names, amounts and deduction frequency for each savings bucket to reflect their personal goals.
03
Digital card integration for payments and wallets
Several users assumed they’d be able to access or manage a digital debit card directly within the platform, and were surprised when this functionality was missing or unclear.
04
Visibility of upcoming or scheduled payments
Users found it useful to see what payments were coming up, but this wasn’t clearly displayed in the existing UI.
The wireframe handover
Following this comprehensive research, validated medium-fidelity wireframes were handed over from the completed UX workflow to guide the next phase of design. This included clear user flows and prioritised features, ensuring the UI design process had a strong foundation rooted in real user needs. With the groundwork in place, the focus shifted to translating functionality into a cohesive, responsive, and visually engaging interface.
The WalleyBank brand and UI needed to break away from the rigid, overly serious identity of traditional corporate banks. The goal was to introduce a fresh, lighthearted tone that still felt trustworthy but brought optimism, clarity, and a more relaxed, modern experience to everyday banking. Designed with the Australian user in mind, WalleyBank reimagines banking as something approachable, intuitive, and genuinely enjoyable. Let's start to put together the design elements to achieve this…
With a visual direction cemented, lets start creating the UI component library…
The WalleyBank design system was created using the Atomic Design Methodology developed by Brad Frost — a framework that breaks down interfaces into smaller, reusable components like atoms (buttons, inputs), molecules (form groups), organisms (feature blocks), and full templates. This modular approach promotes consistency, scalability, and efficiency, ensuring every element works harmoniously across the platform. For WalleyBank, it allowed me to rapidly prototype a clean, cohesive UI that aligned with the project’s goals of clarity, flexibility, and user trust.
From here, the pieces of the puzzle start to come together — beginning with the blueprint…
Now that the groundwork had been set, it was time to start constructing screens…
Multiple colour schemes were tested across the bento-style layout, following the Double Diamond model — using divergent thinking to explore a broad range of creative directions, then convergent thinking to refine and pinpoint the most effective solution. While all aligned with WalleyBank’s branding, one clearly stood out for its clarity, personality, and brand presence.
Four major refinements were made to these designs before user testing was conducted…
01
Simplify colour scheme & add header
Simplifying the colour scheme reduced visual clutter and improved hierarchy, while a consistent header enhanced navigation and orientation — resulting in a cleaner, more focused user experience.
02
Refinement of infographics
The infographics were updated with a circular progress bar, giving users a clearer, more motivating view of their savings progress through a simple, intuitive visual cue.
03
Button redesign
04
Icon redesign
3D icons were replaced with 2D versions to match the platform’s modern aesthetic, improving visual consistency and reinforcing a clean, trustworthy interface.
With these major design changes complete, the rest of WalleyBank was built in Figma. And from this, the first user prototype was ready for user testing…
High fidelity prototype: Version 1
It was time to turn to real users. Conducting interviews revealed how people navigated WalleyBank’s interface and highlighted how the current UI impacted their ability to complete key tasks. These sessions gave users the opportunity to identify and clearly communicate areas for immediate improvement.
The recommended changes…
01
Integrate a payments section in the home page
Consider integrating a dedicated tile on the homepage where users can easily make payments and manage scheduled transactions. Placing this functionality in a prominent, accessible location would streamline key tasks and enhance overall usability.
The solution:
To enhance usability, I added Pay and Card buttons to the homepage, putting WalleyBank’s key features front and centre based on user feedback.
02
Redesign the scheduling system
The solution:
03
Simplify the payment user flow
Remove the last step of the payment process where the user is required to press ‘pay now’. The user flow should end when ‘process payment’ is selected by the user.
The solution:
04
Reconsider the colour scheme
Remove the gradient used on the user interface tiles and reconsider the colour scheme to better represent professional financial banking themes.
The solution:
I refined the colour scheme by removing the gradient to reduce visual noise, but it quickly became evident that deeper adjustments were needed to truly elevate the interface. This is explored below.
I recorded customer satisfaction at this stage of the design process to establish a clear benchmark for measuring future improvement…
Customer satisfaction checkpoint
A customer satisfaction score of 73.3% indicates a strong foundation but also highlights clear opportunities for improvement. While users responded positively to the overall experience, feedback suggests there are areas where clarity, ease of use and colour scheme can be enhanced. Based on this, the next phase will focus on refining user flows, improving task guidance, and making small but impactful interface adjustments to elevate the experience and push satisfaction even higher.
With the new colour scheme finalised, it was time to give the original design a cohesive facelift — using the 60/30/10 rule to strategically guide colour application across the updated WalleyBank platform. This approach ensured visual balance, enhanced hierarchy, and reinforced brand identity throughout the interface.
I tested the new colour scheme…
Consumers responded positively!
With the colour scheme refined, I shifted focus to introducing new features aimed at enhancing the WalleyBank experience…
To stay competitive in the evolving digital banking landscape, WalleyBank has integrated an online card wallet system directly into the platform. This feature allows users to easily manage their card details and access essential functions, all from the convenience of their mobile device.
High fidelity prototype: Version 2
Usability testing: Round 2
01
Improve user flow when locating digital bank card
The solution:
02
Increase the number of payment options
The solution:
03
Increase website navigation points
Add familiar navigation patterns like a clickable logo for the homepage and a back arrow or swipe gesture to return to the previous page, supporting intuitive and seamless navigation.
The solution:
04
Reverse colour layer hierarchy
The solution:
High fidelity prototype: Version 3
The WalleyBank platform is approaching its final form as we enter the last round of user testing…
User testing: Round 3
This final phase was key to validating the refined design and ensuring it met user needs. Targeted testing provided insights to confirm improvements and guide final tweaks before launching the MVP.
01
Return to home page after completed payment
The solution:
02
Create a ‘savings bucket’ page
The solution:
03
Add a recurring payment option for every payment
After payment, users should return to the payment page to set up recurring payments, supporting flexibility and long-term financial planning.
The solution:
04
Revise the recurring deductions process
The solution:
Customer satisfaction checkpoint
A 96.7% customer satisfaction rate highlights the success of targeted improvements. These refinements make the WalleyBank MVP ready to launch in its most polished, user-focused form.
From process to the finished product…
Lets take a look at the finalised WalleyBank MVP.
Atomic design methodology
WalleyBank: Minimum viable product
With WalleyBank launched, I shifted focus to measuring its real-world impact. To evaluate success, I tracked a key usability metric recorded throughout the design process and gathered user feedback to quantify improvements in satisfaction.
Customer satisfaction scores
Success snapshot
Reflecting on the journey
What was the most important lesson you learned from this project?
The importance of designing for clarity. Real users don't prioritise grids or perfect alignment — they see and respond to functionality. The more I focused on simplifying the interface and aligning visual elements with user expectations, the more confident and successful the experience became.
How did you balance creativity with usability in your UI design?
I approached the design with a creative mindset, aiming to push boundaries through bold colour choices and distinctive branding. While this exploration was an endeavour in creativity, it revealed that overly expressive visuals can hinder usability if not grounded in purpose. Redefining the colour palette became a turning point—cementing the understanding that great digital products are built by prioritising usability, then using refined visual design to support and elevate it. From that moment on, every visual decision, whether colour, typography, or interaction, was made with clarity and function at the forefront. Creativity enhanced the experience, but usability led the way.
How did this project make you a better designer?
