top of page
coverPageTD.png

SimpleBank App

A mobile app that makes users feel secure and well-informed about their finances. The app’s easy to navigate interface makes it simple for users to find new features and feel in control of their money.

My Role

Ideation

Process

UX/UI Design

Usability Testing

Timeline

5 weeks

Tools Used

Figma

Whimsical

Usertesting.com

This is my redesign of TD Bank’s mobile app. The current app is rather poorly organized and tedious to navigate. There are a lot of features that are hidden away and hard to find.

I wanted to bring delight and discoverability to the experience of using the TD Mobile app by updating the sign-in process, adding a navigation bar, changing ad placement, and making account balances easier to access.

The Current Design

I did an analysis of the current design to demonstrate the ways in which I felt it failed to deliver a good user experience. I created a wireframe version of the current app, took screenshots and downloaded some images from the internet. 

Some problems with the app include an unclear login sequence. As you can see from the wireframe, on the first two screens there is no prompt to login. Instead, there is a glut of different options for the user to click on. Each of these link to a sign-in page that then takes you into the app. Inside the app, the financial information such as account balances don’t stand out from the rest of the screen, instead getting lost in a clutter of text.

TD Screenshots.png
TD WebScreenshots.png
TD WireframeAnalysis.png

I also created a flowchart to map out the information architecture, and to show how many steps it takes to get to a key piece of financial information, the checking account balance. It takes 3 or more steps to get there, which in my view is too many for the user who wants to get the information quickly.

Userflow of Easyweb App by TD.png

The User Story

As a budget-conscious consumer, I want to quickly access my banking information so that I can make financially responsible choices in my day to day life.

People Problem

The TD Banking app is very difficult to navigate. There are too many options on each screen and users get confused. Users want the app to be easier to understand and access.

How can the app be edited and rearranged to make its features more discoverable?

Competitive Analysis

I took a look at some of the competing mobile banking and finance apps to gain inspiration and get a sense of what industry standards look like. I found that many of them used color to create strong branding and display information on cards with options to expand. In terms of login screen, one of the chief pains with the TD mobile app; I learned that most apps started with a login page first.

Competitive Analysis (1).png

Sketches, Userflow and Wireframe

tdSketches1.jpg
tdSketches2.jpg
tdSketches3.jpg
SimpleBank Userflow.png
SimpleBank Wireframe.png

Usability Testing

Usability Testing

Some of the things I hoped to find out through user testing were:

  • Are the features of the app discoverable?

  • Are the screen designs logical and easy to follow?

  • Is the interaction easy, delightful and discoverable?

  • What are some of the pain points in navigating the app?

 

Because I was testing for discoverability, I kept my instructions very minimal and did not specify any specific areas to interact with. I just asked them to speak aloud as they explored the app and discovered it’s features.

 

My results showed that users were able to quickly figure out what to do and even learned how to logout a lot faster than I predicted. They also did not spend time exploring any of the links on the login screen, such as locations or contact us. They did comment that there were some glitches on the interface. They wanted more detail on the page that displayed spending history.

TestScript.png
UserTestingResults.png

Visual Design - Moodboard and Style Tile

MoodBoard.png
StyleTile.png

Designing For Discoverability

Some of the steps I took to make the app more discoverable:

  • Design a familiar interface - I created a login screen that looks very similar to other bank app login screens to make it easy to recognize.

  • Reduce visual clutter - It was difficult to know where to look in the old app, in my redesign, I tried to pare down features and limit items on each screen.

  • Prioritize Important Content - The first screen the user sees in my redesign is a summary of their account balances and activity. This puts the most pertinent information first

  • Reducing options - I pared down the number of options available per screen to simplify decision-making for the user.

The Final Prototype

screen1.png

The login screen. In my redesign it appears first. I've added fingerprint authentication and included some links to basic information that don't require login to view

screen2.png

The first screen the user sees upon logging is their bank balance and recent account activity.  Below, I've added a navigation bar to some features of the app. The AI assistant in the centre can guide the user to new features.

screen3.png
screen4.png

This is a spending tracker called "MySpend" I added it to the navigation bar so that users can easily access it and keep track of their finances

Another screen in the navigation bar is the transfers screen. I put in the most common transactions that I imagine customers will want to make.

bottom of page