TIMELINE:

Approx. 70 Hours

TOOLS:

Figma, Whimsical, Invision, Maze

MY ROLES:

End-to-end Product Designer

PROJECT TYPE:

Added feature for android devices

Project Background

As one of the largest banks in the U.S., serving many of America’s households, TD wants to use its reach to improve the financial health of its customers. Their current mobile app is very well rated but very basic in functionality. The features they are offering focus primarily on spending and making payments. TD would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances. The proposed idea is a system where customers can set up budgets based on previous month’s expenditures, and then have the funds that they save automatically transferred into a savings account with high-interest returns.

Challenges

The current design of the TD bank app feels clunky and tiresome. Limited use of color and poor use of typography lead to an okay design which is definitely not great or memorable. While TD prides itself on having amazing customer support, their user experience is just not there yet.

Throughout the design process, I kept on turning to back to the following three questions:

How can we design this feature so that its interface and functionality resemble the current app, but the experience is significantly increased?

How can we use effective communication to create a low learning curve for potential users?

What can we do to help motivate TD customers to use this feature and begin budgeting?

Phases of Research

In an ideal world, research would be carried out over the course of a few months by combining Behavioral and Attitudinal research. This would be useful because we’d be able to see the difference between what people think about budgeting vs. how they actually implement it.
‍
The next best options are to perform qualitative research by interviewing 4 participants to find out if/how/why they budget. During the interview, we’d also find out preferences of budgeting apps and try to gain a better understanding of who uses what app, why they use it, what features they love and what their pain points are.
‍
Based on the information that is provided to us by the research participants, we can move on to secondary research. A starting point for this research would be to look into the budgeting apps that the participants mentioned as well as other similar ones and complete full competitor analysis.
‍
After this, a macro-level research approach will be taken by analyzing millennial banking and budgeting trends throughout the world. This will help us better understand general trends and give us a wider product scope.
See the full research plan here.

Competitor Analysis

Taking a look at other budgeting tools on the market, I was able to learn the strengths and weaknesses of each of them. I then identified potential threats and opportunities that the TD feature offers.

Persona Development

I then created two personas based on the types of millennial money spenders that I uncovered during the research phase. When going forward with the design process, I constantly thought about Nathan and Jody, trying to get into their heads and understanding how they would use the feature being developed.

Nathan represents the money conscious user who knows that he needs to invest but is having difficulty doing so.

Jody represents the free-spirited millennial who doesn’t like budgeting and needs to be motivated.

User Journey Map

Using Nathan's persona, I went ahead and created a Journey Map so that I could watch him as he attempts to budget his money. I was able to get a glimpse into the pain points that he experiences. This helped me discover opportunities to help improve his life and our feature.

UI Requirements Document

With the research complete, it was time to prioritize and understand exactly what I would need to be designing. I created a UI requirements document to guide me throughout the ideation process. The chart below shows the relationship between each user task and the basic requirements for each page that needs to be designed.

Product and Feature Map

Now that I know which pages I'd be designing, I went ahead and mapped them out within the major screens of the current app. This helped me gain a sense of perspective in understanding how users would access the feature and where it would be in relation to the other app features.

User Flows

In the next step, I created a user flow which would serve as a visual representation of the feature set-up as well as how a user would navigate throughout the screens once a budget is set up. In the flow, you'll see that an emphasis was placed on customization to better enhance the user experience throughout the set-up process.

Wireframes

For this project, the wireframes that I designed were of higher fidelity than usual because I needed to make sure that I understood the design of the current app. To help me with this, I went ahead and designed the 4 main screens of the TD app exactly the way they are. From there I continued to design the Budget set up flow as similar as possible to the actual app design.

UI Design

In order to ensure a seamless design experience, I took the liberty of creating a design system that closely resembled the one that TD currently uses. Because I had taken a lot of time making sure I got the design details right in the wireframes, creating a UI kit for this feature was a bit easier than usual.
The most significant changes were both to the font and design colors. I adjusted the font from an Arial type to open sans because it had a larger font-weight selection which would come in handy for this feature which included quite a bit of copy. I also was required to introduce more color to help identify the purchase categories.
While creating the UI, I needed to ensure that I was following the original as closely as possible. This meant, keeping a rather outdated looking UI design.

Understanding the Design

The last step that I took before I began to prototype was to design a copy of all the pages that are part of the existing app. By doing this, I was able to become more familiar with the flow of the design.

Usability Testing: Objective Tasks

The main goals of usability testing were to analyze how users interacted with the feature and discover how much they understood about the way it worked.
‍
Two participants tested the feature on-site. Although this was a bit more quantitative in nature, I recorded their screens and reviewed them so I could analyze their clicking hot spots.

The next phase of usability testing was completed using Maze. 11 participants completed a series of small tasks and questions.

Key Findings

Discoverability:
Participants were asked to access the feature from the home screen of the app. 100% of the participants were able to do so without issue.
‍
Understandability:
In the early phases of the design process, I was faced with a question of how much of the current UI should I include, even when the predicted usability was low. An example of this was on the welcome screen of the feature which explained how it worked. This page included a large amount of copy, which I was certain that users would not read. This was confirmed when in the first round of testing, users only spent an average of 4 seconds on the page. In the second round of testing, participants were asked if they read the information presented on the page. 14% said yes, 43% skimmed through it, 14% read the titles only, and 29% didn’t read it at all.

Navigation:
Users were requested to complete the various tasks in the prototype and were able to do so with ease:
- Adjust savings and APY amount
‍
- Adjust budget category limit
‍
- View spending by category
‍
- View transaction details and edit spending categories.

Positive Tester Quotes:
‍"Everything is in one app it's so it's easy."

"User friendly and presents the information in a simple manner."
‍
“I loved the simplicity of it, I can definitely see myself using something like this."

Pain Points:
"The beginning. Trying to find the smart budget feature. It wasn't specifically called out"

"It seemed like there could've been less copy on the page. Too many words made it unclear as to what action was needed on some pages."

Summary

SUMMARY:
While this design may not have the most beautiful UI (thanks TD), it most certainly is functional. Based on all the research that was conducted, I believe that users would be quick to use a feature that is simple.

CONCERNS:
I do believe it's possible that users may not read the welcome screen and assume that this is just another average budgeting app. This may result in them getting confused and not understanding the savings account feature. While this hypothesis was only partially tested, further usability testing is required.
The goal of this feature is to help TD customers better budget their money. Testing proved that users can navigate through the feature with ease but still has yet to confirm whether this app can change spending habits.

Next Steps

More Testing: The welcome screen needs to be tested further to gain further insight as to whether users understand this feature and the way it works. In previous rounds of testing, participants stated that they were confused at times.

More Design: Some of the more complex screens such as "savings account with budgeted funds"

Even More Testing: Being that this feature is habit-forming, we'd need to continue to test this feature to conclude whether or not this feature can have long term effects on user spending.

Final Thoughts

Designing a feature within a preexisting app proved to be interesting and challenging at times. I particularly enjoyed the fact that I had to constantly think about the design in the context of what already existed. I approached designing this feature with "Green Glasses" as I constantly thought about how the designers at TD would implement this. Designing like this also proved to be challenging because of the limitations that were involved. Even when I thought of a solution for various issues, I had to stay within the frame of the current design which made it difficult to implement the idea.

View More of My Work

TD Smart Budget

Project Background

Challenges

Phases of Research

Competitor Analysis

Persona Development

User Journey Map

UI Requirements Document

Product and Feature Map

User Flows

Wireframes

UI Design

Understanding the Design

Prototype

Usability Testing: Objective Tasks

Key Findings

Summary

Next Steps

Final Thoughts