Getting students to care about banking
How hard can that be?
Pretty hard.
Once upon a time, I interned at TD's innovation lab. The lab's goal was to propel the bank towards the future of technology and banking. Turns out that a lot of that future relied on students, and we were tasked with building something amazing for students, by students.
So how might we increase TD’s engagement with undergraduate students to create a new product or service that would assist students with real issues?
What I designed
The goal was to solidify TD’s position as the student bank of choice and continue to build a reputation grounded in trust and reciprocity. I ended up designing a student budget calculator to help prepare students transitioning from high school to post secondary.
From idea to production
The Double Diamond Process
To build out this project, I followed the Double Diamond design process. I began by researching, analyzing and synthesizing my ideas to better define the problem statement. I then began the process to design, prototype and iterate continously.
Starting point
Initially, this problem statement was presented to a senior class of business analysts students at Wilfrid Laurier University by TD Bank. They uncovered some key findings from focus groups.
- Students no longer want to visit a branch
- Students trust banks and bank representative info over info found online
- Students want to become more financially literate
Focus group findings
- 67% of students have over $22,000 in post-education debt
- 25% realized too late that they should have avoided car/credit card debt
- Many students have regrets about not working earlier and saving money
Relevant research
Narrowing down the target audience
After analyzing the focus group findings further, my developer partner, Nhan Nyugen and I decided to focus on engaging students entering university, since we believed that this group best aligned with our problem statement.
Building Empathy
Common questions amongst users
- I don't know where to find information about my meal plan.
- How much do textbooks cost?
- Will I have to get a part time job to pay for tuition?
Customer Journey Map
I discovered several pain points around financing their education and where to go to get the inside information about university, for example, residence cost, as all of this data was scattered across the internet.
Insights
Pain Points
- Finding school specific information
- Budgeting for food and other small costs
- Overlooking large investments, like a car or a computer
Opportunities
- Gathering information into one place
- Giving recommendations for budgeting
- Creating a financial tool that will forecast future costs
TD's Current Solution
I discovered TD’s current budget calculator which was a list of over 30 input forms. The input fields were extremely intimidating to look at and were not designed with the user in mind. For example, there was a field for tuition in months, this and other expenses added difficulties to the user’s experience. This calculator was the exact opposite of a beneficial tool.
The Competition
I then did a competitive analysis and found that all the other major banks had a similar tool. These processes were lengthy and did not provide much help.
BMO
CIBC
Redefining the problem statement
How might we revitalize TD's student budget calculator into a beneficial tool?
Ideation
Where to start?
- School
- Housing
- Necessities
- Other costs
- Financial aid
- Income
- Other contribution
Questions to Consider
- What are students curious about?
- How can we build trust between students and TD?
- What is the best way to get this information?
- How can we make this process more engaging?
- How can we increase financial literacy?
Layout of Information
Once I reiterated and was satisfied with the result, I laid out the steps and designed a flow. I considered the hierarchy of the information and the relationships between them. For example, for the residence flow, the next logical step would be the meal plan, as the two are associated with each other. I also included a summary page after all of the costs to give the user a break from the input fields and act as an overview of their progress so far.
Initial Workflow
Refined Workflow
Visual Design
Low Fidelity Prototype
Layout Touchpoints
- Finding school specific information
- Budgeting for food and other small costs
- Overlooking large investments, like a car or a computer
Pain Points
- Gathering information into one place
- Giving recommendations for budgeting
- Creating a financial tool that will forecast future costs
Opportunities
Graph Evolution
In order to visualize the information, I looked into various styles like a piechart, a thermostat and eventually settled on two bar graphs. I realized that this was the best and most straightforward way to display the data. I decided to keep green as the primary colour and a variety of very bold colours for the category elements that contribute to the bar.
First Iteration
Hackathon Version
.svg)
.svg)
.svg)
The staff saw the applicable potential and we ended up winning the hackathon!
The designs I had created from the hackathon provided me with a very solid base for the next stage of revision. I asked fellow colleagues and interns to comment and critique my designs one by one as I presented my content to them. I received very critical feedback as to both the visual design of the calculator, and the user's experience.
The Next Prototype
Design is an iterative process
Key Revisions
- Changed current status from dots to bar ⟶ hides length of the process
- Removed gradient ⟶ difficult to read
- Added help feature ⟶ to further assist transitioning students
- Inverted colours ⟶ costs are red, contribution is green to create a stronger correlation
- Put next button in a consistent position ⟶ in order to improve consistency
Prototype walkthrough
Conclusion
This was the first big UX project I ever worked on from ideation to conception. I learned a lot about UX, and I learned a lot of tools and skills to add to my toolkit. I redefined the problem statement, worked alongside a developer and learned what it meant to build empathy for users.
I'd also like to take the time to thank David Janik Jones, my mentor at TD. I got to learn so much from him about user experience design and I'm so honoured that I had this opportunity. As the project continues into its next stages,
I will always be proud of my work on TD’s student budget calculator and will look out for when it rolls out into the market to help students just like me.
To view the live site check it out here
Or on TD Lab's website