td-cover

Improving TD MySpend Analytics

Team.                                                           Hossein Boroji, Shaina Danzinger

Product                                                                                TD MySpend App

Timeline                                                                                                  5 Days

Role                                                        Researcher, UX/UI Designer, UX Writer

Tools                                                       Figma, Balsamiq, invision, Pen & Paper

Analytics for thought

What do we know about the current state of the app? How many users use it? What's the demographic?

hotel_class_24dp_FILL1_wght400_GRAD0_opsz24-1

Millenials' Reliance on Mobile Banking

Much of the feedback revolved around wanting new features or other bug-related issues.

query_stats_24dp_FILL1_wght400_GRAD0_opsz24

TD MySpend App Rating

The current rating of the TD MySpend app (iOS) lies at 2.6.

smartphone_24dp_FILL1_wght400_GRAD0_opsz24

Millenial Usage of Banking Apps

More than one-third (36 %) of Millennials are mainly using banking apps

Problem

TD MySpend app users struggle to access and navigate their spending history, hindering their ability to make informed financial decisions and plan effectively.

Target User

Understanding that Millennials are more likely to be using the TD MySpend app, we created a persona. We merged our findings to represent what we felt best personified the "sticky,"  or returning user. Including ‘Catherine’s’ pain points and struggles ensured that we would keep our design entirely human-centered.

PERSONA-1

Opportunities

monitoring_40dp_FILL1_wght400_GRAD0_opsz40

Get visual aid to understand spending habits and history

payments_40dp_FILL1_wght400_GRAD0_opsz40

Get a clearer understanding of where money was spent
 

thumb_up_40dp_FILL1_wght400_GRAD0_opsz40

Improve navigation so all kinds of users can feel comfortable using the app
 

Task Prioritization

Because the TD MySpend app has various features, we chose to work on redesigning the features that would:

  • Meet customer expectations 
  • Generate satisfaction 

We mapped out the various tasks a user may journey through, and prioritized from there.
 

task-prioritization-1

TD MySpend Current Information Architecture


By analyzing the existing layout—how the menus are structured and how different features are categorized—we could pinpoint areas where users might experience friction or confusion. For instance, understanding the logical grouping of features like "Spending Insights" and "Transaction History" allowed us to assess whether users can intuitively navigate through the app to find the information they need without assistance.

my-spend-2

Journey Mapping

Creating a journey map gave us the opportunity to gain a more robust understanding of our target user and how they’d be interacting with the app. We understood pivotal moments of design intervention and used them as the groundwork for building our redesign. 

journey-map-1

Affinity Mapping

We went on to categorize our user’s challenges, motivations, and tasks - again, helping us pick apart our target users and relate to them completely. We realized that some of the charts and graphics were doing more harm than good, because of the lack of clarity. The categories tab seemed ambiguous and messy. We wrote these down to organize and be able to refer to as we make our changes.

affinity-mapping-1

Task Flow

Using Balsamiq to break down the existing pages of TD My Spend App. Collaborating with Hossein and Shaina, we came up with an easier way to use the navigational flow.

task-list

Iteration 1

Simplified Insights & Analytics

Using all the groundwork we had established, we began redesigning the screens. We kept in mind that our user is a busy millennial, pressed for time, and perhaps not the most financially literate.

We prioritized changing the look of the transaction history to make the cards clean and much easier to reference. 

before

ITERATION 1

We decided to change the donut graph to a bar graph for clearer and more accessible spending insights. This change ensures that users can interpret their data faster, with less cognitive effort, leading to a more intuitive and efficient financial tracking experience.

after

FINAL

Displaying previous and next month labels eliminates guesswork, enabling users to make immediate, informed selections, reducing cognitive load and improving user experience. Changing the donut graph to a bar graph reflected the user’s spending in a more accurate, intelligible way. We also redesigned the categories and menu to allow easier navigation for the users.

Iteration 2

Transaction History

One significant change was removing the category section and replacing it with an option to sort transactions by the earliest or latest within the selected month. This refinement makes it easier for users to quickly locate transactions in a chronological flow, giving them a better understanding of their financial activity over time.

Additionally, we incorporated a navigation menu at the bottom of the screen to provide quicker access to essential features like filters, user profiles, and the main menu. This intuitive layout ensures that all critical tools are readily available, streamlining navigation and reducing the steps required to reach different parts of the app.

before-1

ITERATION 1

after-1

FINAL

Final Redesign

Using all the groundwork we had established, we began redesigning the screens. We kept in mind that our user is a busy millennial, pressed for time, and perhaps not the most financially literate.

We prioritized changing the look of the transaction history to make the cards clean and much easier to reference. Changing the donut graph to a bar graph reflected the user’s spending in a more accurate, intelligible way. We also redesigned the categories and menu to allow easier navigation for the users.

mock
mock-1
mock-2
mock-3
mock-4
mock-5

Measuring Success & Effectiveness

Here is how we would measure KPI's in this project if it were shipped:

  1. Time to First Interaction: The average time it takes for users to interact with the insights or history features after launching the app.
  2. Navigation Path Efficiency: The number of clicks or steps users take to access their desired insights or transaction data.
  3. Repeat Usage Rate: The number of users who return to use these features multiple times, indicating perceived value.

Lessons Learnt

1. Testing early and often

After redesigning, we conducted usability tests to ensure our redesigns were intuitive, effective, and delightful. 

Although we gathered insights towards some small details (hierarchy, etc), for the most part our redesign was well-received. People found it natural and easy to follow. Being that we limited our sprint to 1 week, we did not iterate on our feedback, but if we had the time we would have charted our feedback and prioritized which changes to make.

2. Building on feedback for enhanced design

Due to the nature of this Design Challenge, this project was completed in less than a week. As a result we were not given the chance to iterate our screens based on the feedback we received in our Usability testing. Going forward, I’d love to make the changes charted from our feedback and improve certain features of the screens.

Empathy in Every Pixel

© Created by Vanessa Tan 2024

Vanessatan.vht@gmail.com

UX/UI DESIGN • PRODUCT DESIGN • USER RESEARCH • PROTOTYPINGUX/UI DESIGN • PRODUCT DESIGN • USER RESEARCH • PROTOTYPINGUX/UI DESIGN • PRODUCT DESIGN • USER RESEARCH • PROTOTYPING