UX/UI PRODUCT DESIGN
CommBank Money Management
Company
Commonwealth Bank
My Deliverables
Research, Competitor Analysis, User Testing, Prototyping and Animation
Tools
Figma, After Effects, Photoshop and Illustrator
Year
2025
Team
UI Designer (me)
(Industrial design background)
UX Designer
(ICT background)
Product Owners x 2
(Architecture background)
Software Engineers x 8
(Interior design background)
The Problem Space
Australia’s most-used digital budgeting experience with over 3.4 million customers engaging monthly and the number keeps growing. However, its default budget cycle can be confusing and doesn't match customers mental model.
"How might we increase the relevancy of customers’ money insights across Money Management ecosystem?"
Solution
Introducing Predicted Pay Cycle with Dynamic Contextual Nudge helps increase the relevance and clarity of Money Management insights by aligning them with each customer’s actual budgeting rhythm. It drives deeper engagement and satisfaction for both customers and the business.
Impact
Engagement Boost
219
K
More than 210,000 customers set to the Predicted Pay Cycle and they see their Money insights automatically aligned to their actual pay cycle
Educational Impact
93
%
Most user testing participants find this new feature and its onboarding process intuitive and easy to understand
Enhanced Feature Adoption
Aligning insights with predicted pay cycles removes friction, encouraging more users to engage with Money Management tools such as Cash Flow View and Money Plan
Data Quality & Metric Uplift
Simplifying the UI and aligning insights to real-world pay cycles is expected to yield better quality engagement metrics, such as longer session durations and reduced bounce rates
DESIGN PROCESS
Design Thinking - Double Diamond Principles
To develop this feature, we followed the Double Diamond framework, which consists of four phases: Discover, Define, Design, and Deliver. I added quick indicators here to show how we (2 designers) collaborated. A red dot indicates a UX-led task, a blue dot indicates a UI-led task (me), and two dots together mean it was a collaborative task.
Discover
01
What was the Main Issue with the previous default cycle?
We began by gathering user feedback on the previous default cycle. Many customers felt their insights didn’t match their income rhythm, which made the tool feel irrelevant. As a result, they often had to manually adjust their budget cycle — adding friction, especially during onboarding. Interestingly, fortnightly was the most common pay cycle, yet those customers were the most likely to override the default — showing a deliberate effort to ‘fix’ the tool.
01
Confusion and disengagement
Users often saw insights that didn’t match their income rhythm, making the tool feel irrelevant or inaccurate.
02
Manual adjustments
Many users had to manually change their budget cycle to match their pay cycle, which added friction to onboarding and setup.
03
Behavioural mismatch
Despite fortnightly being the most common pay cycle, users in that group were also the most likely to choose a different budget cycle—indicating a deliberate attempt to correct the default
Supporing Data
The data backed this up: 43% of customers had a single regular pay cycle, and 63% aligned their budget cycle with their pay cycle. This highlighted a clear opportunity to take the effort off customers, and instead of relying on customers to set their budget cycle, we could predict and automatically suggest a cycle for them.
Competitor Analysis
For analysing industry trend and inspiration, we ran competitor analysis. Most local banks, like Westpac and UBank, made their budget cycle setup complicated, requiring too many steps. A standout example was one of the major banks in South Korea, which detects their customers’ income automatically and provides tailored insights and resources, leading to longer app usage. Their average session time was 3 minutes and 10 seconds — almost ten times higher than ours, which is just 20 seconds. This validated that automation could be a strong differentiator.
Define
02
Define Opportunities & Requirements
From these research insights, we identified key design opportunities and system requirements.
Design Opportunities
Increase engagement by automatically aligning users’ money insights according to their predicted pay cycle, and therefore mental model, without requiring extra effort.
.svg)
Increase awareness of the capability by providing clear visibility of the option to set a custom budget cycle and present customers with an active choice.
.svg)
Support the crew’s OKRs by driving customer adoption of the budget cycle feature.
System Requirements
.svg)
Automatically detect and match users’ pay cycles to reduce friction and increase relevancy.
.svg)
Allow users to easily change their budget cycle at any time.
.svg)
Present money insights in a way that matches users’ mental models.
.svg)
Provide clear, simple UX flow to educate users without overwhelming them.
Develop
03
Ideation Workshop
With these insights, we ran an intensive ideation sessions with the team and stakeholders. We generated a wide range of ideas, then narrowed them down through multiple critique and feedback sessions, refining them into a clear direction for the solution.
Iterate & Refine!
We decided to introduce a simple onboarding experience. For that, we explored both existing Design System components and creating new components. For inspiration, we also looked at apps like Instagram, TikTok, and even mobile games such as Marvel Snap, which are great at making onboarding experience easy, intuitive and fun!
Concept for Testing
After multiple iterations and sharing feedback, we landed on a contextual nudge & tooltip approach. When customers enter Money Plan for the first time, they see a banner explaining their budget cycle and can change it if needed. To support learning, we also added tooltips indicating like how to change their cycle and how their insights are calculated — so customers quickly understand the feature without heavy onboarding.
Deliver
04
User Testing
To validate this concept, we collaborated with researchers to run usability testing. We wrote test plan including task, hypothesis/success metric and questions to ask and also created high-fidelity prototypes.
We tested with 14 participants from diverse backgrounds and different levels of familiarity with money management tools. All sessions were conducted 1:1 via Microsoft Teams.
Further Refinement based on User Feedback
From the testing, all participants were able to locate and change their budget cycle, and they understood how to change it later through the date range. They also found the onboarding experience and tooltips clear, easy to follow, and helpful. But ironically, we also noticed that a lot of time they wouldn’t read through in detail.
KEy Insights from testing
01
Tooltips
Although users found tooltips helpful at first glance, most did not actually read the details. When asked, many couldn’t recall the specific content.
02
Accessibility issues
The tooltip component was not technically feasible for this use case. For example, users with dynamic text enabled on their devices couldn’t fully read the content.
03
Animation
Without tooltips, we needed another way to capture attention. Research shows that animations can significantly improve engagement and help highlight important information.
Let's Animate the Pictogram
Based on the key insights from user testing, we decided to remove the tooltip components and simplify the flows. But without tooltips, we needed another way to capture attention. After discussion, we decided to animate the pictogram within the banner as many research in behavioural science showed that animation can increase user engagement and interaction by 34%. We initially created 10 animations and narrowed them down going through multiple design crit sessions and chose the final option with the highest score. The animation were created alining with WCAG 2.2 and reviewed by accessibility team.
Design Critique & Specs
Once the design was refined, we went through mandatory design critiques and council for sign-off, including thorough accessibility reviews. We then prepared design specs covering UX flows, components, interactions, and light/dark mode, ensuring engineers had everything needed for a smooth handoff.
FINAL DESIGN
Scenario 01
Customers with predictable income now see a banner confirming their budget cycle is aligned to their pay cycle in Money Plan and Cash Flow View in CommBank App. They also can change their budget cycle manually anytime in settings when needed.
Scenario 02
For those with irregular income, the banner prompts them to choose their cycle. In both cases, the design makes it clear they can adjust it anytime in settings.
Results & Key Takeaways
Since launching this feature, over 219k customers have seamlessly adopted it, with positive feedback highlighting how much easier and more intuitive budgeting feels when aligned to their actual pay cycles. This not only reduced cognitive load but also built trust and engagement with Money Management tools, while delivering measurable business impact through stronger adoption, improved satisfaction, and fewer support queries.
01
219k customers onboarded
automatic alignment of insights to actual pay cycles boosted adoption at scale
02
Business uplift
improved adoption, stronger NPS, better engagement metrics, and fewer support queries
03
Reduced cognitive load
budgeting feels natural, aligned to how people actually get paid
04
Increased engagement & trust
deeper interaction with Money Management tools, addressing a major pain point
What next?
- Design doesn’t end at launch → continue iterating based on real user feedback to refine and improve the experience over time
- Early collaboration with engineering → address technical constraints upfront, reduce rework, and strengthen design strategy
- Explore further opportunities → build on this foundation to create more personalised, scalable, and engaging Money Management experiences for customers