What if saving money felt as good as spending it?
I set out to flip the script on banking. WalleyBank is a bold new banking experience that makes saving simple, satisfying, and genuinely motivating. Whether it’s stashing cash for the small delights or your first home deposit, WalleyBank helps users take control with smart automation, crystal-clear savings buckets, and a UI that actually wants you to succeed.
What if saving money felt as good as spending it?
I set out to flip the script on banking. WalleyBank is a bold new banking experience that makes saving simple, satisfying, and genuinely motivating. Whether it’s stashing cash for the small delights or your first home deposit, WalleyBank helps users take control with smart automation, crystal-clear savings buckets, and a UI that actually wants you to succeed.
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…
The goals WalleyBank wanted to achieve…
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.
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.
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.
Lets dive deeper into the problem space…
Starting with understanding who the users are.
Let's look at what users want out of WalleyBank…
Here are the top four points.
Let's look at what users want out of WalleyBank… Here are the top four points.
And what the users want out of WalleyBank…
Lets look at the top four points.
Clear visual feedback during tasks
Users felt uncertain when performing key actions like transfers or edits, due to a lack of immediate visual confirmation.
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.
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.
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 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.
From the wireframes, the UI design process begins…
Let's start with defining the tone.
From the wireframes, the UI design process begins… Let's start with defining the tone.
From the wireframes the UI design process begins… Lets start with defining the tone.
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…
The moodboard sets the tone for a bold departure from traditional banking aesthetics — most notably through a refined monochromatic green palette, symbolising prosperity, growth, luck, and balance. This is paired with a clean, traditional sans serif typeface that grounds the brand and provides contrast to the more expressive, characterful heading style. Together, these elements lay the foundation for WalleyBank’s distinct visual identity: modern, approachable, and purposefully designed.
With a visual direction cemented, lets start creating the UI component library…
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…
From here, the pieces of the puzzle start to come together — beginning with the blueprint…
UI Flow: Create new payment
UI Flow: Create new payment
The user flow was designed to be fast, intuitive, and reassuring — offering clear feedback while minimising friction. UI design should feel invisible, enabling users to complete tasks with ease and confidence. This principle guided my approach to crafting a seamless and straightforward user experience.
Now that the groundwork had been set, it was time to start constructing screens…
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…
Four major refinements were made to these designs before user testing was conducted…
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.
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.
Button redesign
The savings bucket buttons were redesigned for clearer, more intuitive interactions, making actions easier to understand and reducing cognitive load.
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 first user prototype was ready for user testing…
With these major design changes complete, the first user prototype was ready for user testing…
High fidelity prototype: Version 1
Usability testing: Round 1
Usability testing: Round 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.
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.
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.
Redesign the scheduling system
Enhance scheduling for savings buckets and payments to simplify flows, making it easier for users to manage their finances confidently and effortlessly.
The solution:
The savings bucket recurring deduction setup process was redesigned with clearer instructions and options, reducing ambiguity and boosting user confidence.
The solution:
The savings bucket recurring deduction setup process was redesigned with clearer instructions and options, reducing ambiguity and boosting user confidence.
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:
The original payment process was streamlined to include only essential steps, reducing cognitive load and time on task to create a smoother, more efficient user experience.
The solution:
The original payment process was streamlined to include only essential steps, reducing cognitive load and time on task to create a smoother, more efficient user experience.
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.
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.
Customer satisfaction checkpoint
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.
I started with redesigning the underperforming colour scheme…
It was time to hit the drawing board again.
I started with redesigning the underperforming colour scheme… It was time to hit the drawing board again.
I began by listening to users to uncover the root of the issue. The existing colour scheme created confusion, lacking the clarity and trust typically associated with effective banking interfaces. Users expressed a clear preference for blue, a colour widely recognised for its association with reliability, professionalism, and financial security — making it a stronger fit for WalleyBank’s brand goals.
A new colour scheme refinement process began…
With a positive new outcome achieved.
A new colour scheme refinement process began… With a positive new outcome achieved.
A new colour scheme refinement process began… With a positive new outcome achieved.
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 used an 8-column grid for tablet and a 12-column grid for desktop to build a flexible, responsive layout. This approach ensured visual consistency, clear alignment, and balanced spacing, making complex information easier to scan, understand, and interact with across devices.
I tested the new colour scheme…
Consumers responded positively!
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…
With the colour scheme refined, I shifted focus to introducing new features aimed at enhancing the WalleyBank experience…
New feature: Digital card wallet
New feature: Digital card wallet
New feature:
Digital card wallet
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
High fidelity prototype: Version 2
Usability testing: Round 2
With a refined colour scheme, smoother flows, and clearer structure, it was time to validate the latest design improvements and highlight areas for continual improvements.
Usability testing: Round 2
With a refined colour scheme, smoother flows, and clearer structure, it was time to validate the latest design improvements and highlight areas for continual improvements.
Improve user flow when locating digital bank card
Introduce a clear, intuitive visual cue that guides users effortlessly to their digital WalleyCard, ensuring quick access without confusion or unnecessary navigation.
The solution:
A brief animation was added to the WalleyCard page to guide users in accessing their cards, improving clarity and making the experience more intuitive.
The solution:
A brief animation was added to the WalleyCard page to guide users in accessing their cards, improving clarity and making the experience more intuitive.
Increase the number of payment options
Enable users to add a custom payee directly within the payment window, with the flexibility to choose their preferred payment method — including BPay, PayID, or standard bank transfer — streamlining the process and enhancing convenience.
The solution:
Payee and payment options were expanded to support modern methods, giving users more flexibility and control over their finances.
The solution:
Payee and payment options were expanded to support modern methods, giving users more flexibility and control over their finances.
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:
Directional navigation buttons were added to streamline movement and help users navigate more easily and confidently throughout WalleyBank.
The solution:
Directional navigation buttons were added to streamline movement and help users navigate more easily and confidently throughout WalleyBank.
Reverse colour layer hierarchy
Apply better colour hierarchy principles by placing darker tones at the bottom and lighter tones at the top to enhance depth, guide focus, in an effort to improve accessibility in line with WCAG guidelines.
The solution:
The colour hierarchy was reversed, with the lightest tones now used to highlight key information — enhancing visual clarity, depth, and overall readability across the interface.
The solution:
The colour hierarchy was reversed, with the lightest tones now used to highlight key information — enhancing visual clarity, depth, and overall readability across the interface.
High fidelity prototype: Version 3
High fidelity prototype: Version 3
The WalleyBank platform is approaching its final form as we enter the last round of user testing…
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.
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.
Return to home page after completed payment
After payment, redirect users to the home or transaction page to clearly show the fund deduction, confirming success and providing transaction closure.
After payment, redirect users to the home or transaction page to clearly show the fund deduction, confirming success and providing transaction closure.
The solution:
Users are redirected to their transaction log after purchase, providing clear, real-time confirmation and reinforcing trust.
The solution:
Users are redirected to their transaction log after purchase, providing clear, real-time confirmation and reinforcing trust.
Create a ‘savings bucket’ page
Create a page where users can easily manage buckets with intuitive controls, customisation, and clear progress indicators to achieve financial goals confidently.
The solution:
A dedicated 'savings bucket' page gives users greater visibility, control, and customisation — reinforcing WalleyBank as a truly customer-centric savings platform.
The solution:
A dedicated 'savings bucket' page gives users greater visibility, control, and customisation — reinforcing WalleyBank as a truly customer-centric savings platform.
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:
After adding a payee, users return to the payment page with an option to set up recurring payments, ensuring a smooth, flexible experience aligned with WalleyBank’s user focus.
The solution:
After adding a payee, users return to the payment page with an option to set up recurring payments, ensuring a smooth, flexible experience aligned with WalleyBank’s user focus.
Revise the recurring deductions process
Align task instructions closely with relevant interface elements using proximity, visuals, or microcopy to improve clarity and user understanding.
The solution:
I improved the recurring payment instructions by integrating more prominent copy to instruct users through the payment process.
The solution:
I improved the recurring payment instructions by integrating more prominent copy to instruct users through the payment process.
Customer satisfaction checkpoint
Customer satisfaction checkpoint
A 96.7% customer satisfaction rate highlights the success of targeted improvements and confirms the WalleyBank MVP is ready to launch.
From process to the finished product…
Lets take a look at the finalised WalleyBank MVP.
From process to the finished product…
Lets take a look at the finalised WalleyBank MVP.
Atomic design methodology
Atomic design methodology
With WalleyBank launched, I shifted focus to measuring its real-world impact. The success of WalleyBank was measured by how effectively the design converted complex financial tasks into intuitive user wins. The following success snapshots and satisfaction scores provide a look at how the platform resonated with users.
Customer satisfaction scores
Customer satisfaction scores
Performance Validation & Benchmarking
Performance Validation & Benchmarking
To quantitatively validate the WalleyBank ecosystem, I benchmarked the digital card retrieval flow to provide empirical proof that the interface successfully balances security protocols with a frictionless, high-performance user journey.
Maze was used to capture quantitative performance metrics and heat-maps. This allowed me to pressure-test the information architecture and validate that users could navigate through sensitive authentication layers to retrieve credentials without external assistance.
Maze was used to capture quantitative performance metrics and heatmaps. This allowed me to pressure-test the Information Architecture and validate that users could navigate through sensitive authentication layers to retrieve credentials without external assistance.
5 participants were used to gather high-impact insights and identify critical friction points. This aligns with industry benchmarks that suggest this sample size uncovers approximately 85% of core usability issues.
5 participants were used to gather high-impact insights and identify critical friction points. This aligns with industry benchmarks that suggest this sample size uncovers approximately 85% of core usability issues.
Key Performance Indicators
Key Performance Indicators
The Goal: As a new customer, the user was required to navigate the platform to find their new digital WalleyCard, authenticate their identity, and successfully copy the card number for an online transaction.
The Goal: Users were tasked with navigating a high-stakes scenario: engaging a Quell following an industrial scandal. The objective was to move from the home page to the contact page to initiate a professional consultation.
The Result: The study yielded a 100% success rate with a 0% drop-off rate. Despite the multi-layered nature of accessing financial credentials, the average completion time of 57.3 seconds confirms a highly optimised path from login to conversion.
The Insight: A 9.2% misclick rate remains below the critical 10% benchmark for primary navigation. This validates that the visual signifiers were precise enough to guide users through security layers without causing "choice paralysis" often seen in older banking applications.
The Insight: A 9.2% misclick rate remains below the critical 10% benchmark for primary navigation. This validates that the visual signifiers were precise enough to guide users through security layers without causing "choice paralysis" often seen in older banking applications.
Heatmap analysis reveals surgical precision throughout the interaction pattern concentrated on the card management and details buttons. The 9.2% misclick rate confirms that the information architecture aligns with user mental models, ensuring that sensitive card data is accessible and exactly where users expect it to be.
Heat-map analysis reveals a dense interaction cluster around the primary navigation and central CTA, confirming that the visual hierarchy successfully funneled English-speaking users toward the final objective. The 11% mis-click rate primarily reflected users wanting to populate the form, proving that the information architecture communicated intent even when the copy was non-native.
Heat-map analysis reveals a dense interaction cluster around the primary navigation and central CTA, confirming that the visual hierarchy successfully funneled English-speaking users toward the final objective. The 11% mis-click rate primarily reflected users wanting to populate the form, proving that the information architecture communicated intent even when the copy was non-native.
"I was actually surprised at how quick it was to get my card details. Usually, banking apps make you jump through a million hoops, but with WalleyBank, everything was right where I thought it would be." - Grace Wright
"I was actually surprised at how quick it was to get my card details. Usually, banking apps make you jump through a million hoops, but with WalleyBank, everything was right where I thought it would be." - Grace Wright
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?
This project significantly deepened my skills as both a Product Designer, enhancing my ability to bridge strategic thinking with practical execution. From early research and wireframing to high-fidelity design and usability testing, I built confidence in owning the full design lifecycle — shaping a product from concept through to a refined, testable MVP. WalleyBank challenged me to think critically at every stage, balance user needs with business goals, and make intentional design decisions grounded in clarity, accessibility, and emotional resonance. It also reinforced the impact of high-quality interface design in delivering meaningful user experiences and sharpened my instincts as a user-centred problem solver. I now feel fully equipped to contribute to end-to-end product design in a way that’s both creatively thoughtful and functionally robust.
I’m currently open to Product Design opportunities.
I’m currently open to
Product Design opportunities.
I’m currently open to Product Design opportunities.
I can help bridge the gap between user needs and business strategy. If you’re looking for a designer who balances technical UX with strong visual logic to deliver high-performance solutions, let’s have a chat.
I can help bridge the gap between user needs and business strategy. If you’re looking for a designer who balances technical UX with strong visual logic to deliver high-performance solutions, let’s have a chat.
I can help bridge the gap between user needs and business strategy. If you’re looking for a designer who balances technical UX with strong visual logic to deliver high-performance solutions, let’s have a chat.
ethanjohnsondesign@gmail.com
ethanjohnsondesign@gmail.com
