TD Bank app redesign: wireframes

Last week, we redesigned the concept models for our personal banking app.

This week, we moved to wireframing. We began by writing scenarios and storyboards for each “flow” — i.e., the most common types of user actions.

Then, we built “wireframes” — visual representations of how a digital product will work. The challenge of wireframes is to capture every possible interaction users might have with each screen, to show how they will move through the app.

The TD app is already very user-friendly — I didn’t see any major redesign features necessary. But there were way too many menu options, which all largely pointed to the same function. So, my redesign is less “dramatically reworking user interface” and more “eliminating superfluous menu buttons.”

You can see the change in homescreens, for example, here:

Homescreen, TD Bank app
Existing homescreen, TD Bank app
My redesigned homescreen
My redesigned homescreen, TD Bank app

For wireframe flows, I chose to redesign the two functions I most frequently use in my own app: Checking my account, and depositing a check.

The original app displayed the menu before the login screen, which created anxiety [“Have I been logged in this whole time? Can anyone who picks up my phone have access to my bank account?”] and then frustration [“Oh…I *do* still have to log in before I check my account, that’s annoying.”] I redesigned the homescreen to show the login first, then menu options.

I also reimagined the menu as a series of round buttons. The round-button-menu theme shows up in other parts of the original app, but not the homescreen. I liked this aesthetic, and wanted to make it consistent. The menu screen now introduces those visual elements upfront—and dramatically streamlines the number of clickable menu options on the very first screen.

Checking your account is largely “non-functional”—that is, there aren’t many actions you can take on these screens. Clicking on Accounts will show you your balance, activity, account details, and statements. I wanted to continue the active menu options, too, to provide prompts to further action. Here is the redesign for the Accounts flow:

Checking account: Flow
Checking account: Flow

This Deposit Money flow is largely unchanged from the original TD Bank app. The progression is systematic, and the interface is intuitive. Here is the redesign of the Deposit flow:

Depositing a check: Flow

Depositing a check: Flow

A good way to tell if a flow is successful is whether the user experiences any confusion in navigating from one screen to another, or whether the user takes the wrong action to get to a goal. Tonight, we’ll be testing our first round of wireframes with classmates and class visitors. Many iterations to come…