Website Redesign

The redesign of TD Bank’s website

Background

I did research on several financial websites and fintech websites/apps that I frequent, such as Wealthsimple, and Koho. These two fintech companies are popular amongst Canadians and becoming traditional banks’ biggest competitors. However, their target audience is towards millennials and the younger generations and their websites/apps greatly reflect. Wealthsimple and Koho’s interfaces are modern, colourful and less overwhelming to the everyday user. Finances are daunting and by making interfaces user-friendly, welcoming and modern is more enticing.

Objective

 decided to focus on TD, looking to modernize the interface, making it more enticing to a younger audience, and also to make it more easily digestible. The website is busy and has so many options that it can be overwhelming for the user. It will be a great challenge to design a user-friendly interface that cleans up everything on the website.

Research

I wanted to get inspiration from two modern financial institutions that target the younger generation - Wealthsimple and KOHO. I performed a competitor analysis on their websites.

  • Sleek and modern interface with eye-catching visuals

  • Strong branding

  • Trust-building and straight-forward copy

  • Many CTAs broken into digestible sections

  • Good use of visuals and whitespace

  • Relatable and personable branding

  • Easy-to-read plans and sections

  • Fun and bold visuals

  • Trustworthy brand

User Interviews

Alongside the competitor analysis, user interviews were also conducted to gain insights on users’ interactions with banking websites and pages that are frequented.

Website Usage

  • Overall, users visit their banking website several times a week to:

    • Check account balances and transactions

    • Manage my finances

    • Pay bills

    • Make transactions

App vs Website

  • 4/5 users prefer using the app over the website

  • Users noted the below reasons:

    • More convenient for quick transactions

    • More intuitive and responsive

    • Offers more features

  • One user noted that the website is preferred for access to all banking statements

Bank Pros

  • Strong branding

  • Positive experiences with customer service

  • Innovative approach to banking

  • Focus on digital solutions

  • Competitive rates

  • Strong security measures

  • Reputation

Pain Points

  • Website layout can be cluttered so it takes a while to find what I need

  • Website can be slow to load

  • Login process a bit cumbersome, like resetting a password

  • Interface is a bit outdated

What you want in a website

  • Modern, user-friendly interface

  • Budgeting and personal finance management tools

  • Real-time chat support

  • Transparency about security practices and how customers’ data is protected

  • Personalized recommendations

  • Interactive financial education resources

  • Personalized security alerts for unusual activity

The participants ranged amongst numerous banks and I wanted to see general pain points of using banks’ websites, as well as features they wanted to see on websites. The participants visit their banks’ websites fairly frequently (on average, a few times a week) to check their accounts, although many did also note that the app is more convenient and is quicker. There was a theme across the pain-points that bank websites are cluttered, making it difficult to navigate the interface to find what you need. Another note is that a user’s bank interface seemed to be outdated. Participants want user-friendly and modern interfaces, as well as more tools to assist with spending, savings and finance-tracking.

Define

User Persona

I compiled the research information from the primary and secondary research to create two user personas that would reflect the app that I am working towards. The first persona, Sara, is a Toronto-based Marketing Manager that uses her banking websites to check transactions and to pay bills. The second persona, Shirley, is a Toronto-based EA that uses her banking website to check her bank balances.

Ideation

Feature Set

After defining my target audience and understanding who I’m designing for, I created a Feature Set to visualize and organize the features that will be included in the website redesign. I prioritized the product features based on user’s needs and project timelines.

User Flows

After creating a Feature Set for the app, user flows were created to visualize how a user would go through the app’s functions and the intentions of the potential interface that I intend to design.

This is a simplified flow that starts on the home page and goes through the log in screen to the accounts page, as well as the Advice Hub page.

Design

Low-Fidelity Wireframes

Lo-fi wireframes provide me the ability of receiving quick user feedback and iteration before I go into the high-fidelity wireframes.

The below wireframes showcase (from left to right):

Home page

  • Hero image and CTA

  • Search bar

  • Products section

  • Tools

  • Education

  • Customer service

Login screen

  • The left side is for users to log in

  • The right side is for users to create an account if they don’t already have one

  • Once logged in, the user is taken to their account page

Account page

  • The user is able to access their account balances and transactions

Tools page

  • Users can see the various financial tools that TD has to offer

Prototype & Test

High-Fidelity Prototype

Building on the low-fi wireframes and by utilizing the existing TD UI kit, I developed the hi-fi prototype for three main screens:

Recreation of home screen

I adjusted the layout and the sections on the main page based on what is currently on the TD home page and user interviews.

I kept the login section as the hero as users usually went on the website to sign in and to look at their finances.

Users have noted that it’s difficult to navigate the web pages so I added a search bar as the next CTA.

I grouped the products section into different cards so that it doesn’t overwhelm the user but will also provide them enough info if they’re interested.

Over 60% of TD users use the app regularly and with more people using mobile devices, I added the app section for easy download.

Users added that they would enjoy educational tools so I added two sections for tools based on user needs.

I ended the home page screen with useful links to get in touch with customer service.

Account page

I wanted everything laid out openly so the user has access to all of the info they need and visual graphs to show how their accounts are doing.

Advice Hub page

Users noted that they value educational articles and tools. I sectioned the advice page into organized sections for users to read through what they are interested in.

Usability Testing

With a functioning prototype, I had five participants for user testing of the website redesign. This was conducted virtually on Google Meets with the ‘Broadcast’/’Start Sharing’ functions that allowed users to share their computer screens with me. This allowed me to see their facial expressions whilst also observing any micro-interactions. A challenge in this was trying to monitor both facial expressions and the virtual interactions at the same time without missing an observation whilst taking notes.

I received some great insight and questions from the participants that I’ll be taking into consideration when making adjustments to my wireframes.

On average, the participants:

  • Took around 10 minutes on average to complete the three flows

  • Encountered on average one error. Errors include:

    • Issues with scrolling through carousels - whether it was to drag or click or hover

The users were generally satisfied with the feature, with an average rating of 8.

Iteration

I made the following iterations based on the usability testing:

  • Reducing some text sizes

  • Reducing some of the card sizes

  • Adding more whitespace between sections

The next steps will be continuous iteration and testing of the app to continue improvement amongst the app.

Reflection

Unlike the adding feature project, redesigning the website includes larger screen sizes and more sections and features with the increased space. The website is also a lot more detailed and resourceful so there were a lot of aspects to consider. I had to really stick to the branding but also opted to add in my own colours and text styles.

 I enjoyed that for this project, I was able to use more creative ways to incorporate designs into the pages. With mobile and apps, I was more limited so it was nice to exercise design through this website redesign. For the previous projects, I spent so much time trying to come up with brand kit that I felt like it took away from the actual project itself. It somewhat hindered my design capabilities, so it was nice not to overthink that portion and use a brand kit that’s already established. I enjoyed creating the high-fidelity wireframes and creating prototypes. It really brings the project to life and allows me to immerse myself in the usability of it.

The main challenges I encountered during this process was thinking of the flows and logic. There were many iterations between the mentor calls, group critiques and usability tests. Many people had great suggestions and areas for me to think deeper into; however, it started getting slightly convoluted when conflicting suggestions started arising. That’s when I had to re-evaluate and use my own intuition to determine what I thought was best. I had analysis paralysis into what I wanted to include on the homepage and how I wanted the hierarchy to look like so it took me a while to finish.

I ensured my design solutions aligned with user needs and goals as I revisited my initial user interviews and really revolved my designs around that. I walked through my own designs many a times to create the most logical flow I could. Key takeaways I gained from this is to think more deeply into exit points for users and accessibility. I oftentimes forget exit points until it’s pointed out. I’m still balancing out accessibility versus simplicity as sometimes I feel like extra verbiage or icons can be counterintuitive.