ASB bank currently offers a web-based day-to-day spend tracking tool known as ‘Track My Spend’. However, the application has become outdated in terms of user experience and user interface. To address this issue, the product team initiated a project to integrate the spend-tracking experience into their mobile banking app. The project aims to improve the user experience by providing a seamless and modern way of tracking expenses. The ASB product team conducted research into competing banks’ spend tracking integrations & gathered insights into customer needs. I worked on this project with another designer from Purple Shirt, along with a product team from ASB. The projected is currently in development stage with beta testing commencing in Q4 of 2023.
Initial Discovery
User Research
Information Architecture
UX/UI Design
User Testing Facilitation
Together with the product team, we examined ways of integrating the spend tracker feature into the existing app without disrupting the mobile experience. Our focus was on three key areas: identifying user entry points, minimising the impact on the existing app experience, and encouraging user adoption of the feature. We decided to implement a notification pop-up that informs users of the new feature and allows them to explore the spend tracker or access their bank accounts. We also integrated the spend tracker within the financial wellbeing hub and as a widget on the home screen to provide unobtrusive ways for users to access the feature and ensure they don't forget about it.
Before moving to Hi-Fi, we created wireframes to test and validate with users, taking advantage of ASB's design system to ensure functionality. Testing the prototype highlighted some issues: users couldn't easily identify clickable transactions without the function icon, which is critical to changing transaction categories when machine learning fails to categorise correctly.
AWe used ASB's HIVE design system to build the UI, including bespoke components that were added to the HIVE library after collaboration with engineers. We took care to visually align the bespoke components with the legacy components, paying particular attention to color application to ensure adherence to guidelines while maximizing contrast and legibility. Following a final round of user testing, minor tweaks were made based on insights gleaned from user feedback.
