Redesigning US Bank’s iOS App

Since I am a millennial and prone to use the most convenient technology available, I bank through my iPhone. US Bank’s app was given a major facelift in the past year or so, but a facelift doesn’t always make things better - rather this one complicated the app I had already learned and left behind signifiers in previous designs to create a more complex application.

When the application redesign was unveiled, I was more heavily into graphic design and branding than User Experience design. However as my skill base grew into new fields, I realized this would be a perfect project to step out of my comfort zone of graphic design and move into creating interactions. Let’s walk through my goals and what I believe could be streamlined by US Bank. (Don’t worry, I photoshopped my account numbers)

What’s Wrong?

Login Page:

  1. The TouchID popup covers the dropdown arrow for quick access to your account balance.
  2. The location search icon is placed under the login information and without explanation where it is not easily found.
  3. Once the TouchID popup is gone, it cannot be reopened. One must login through their username/password.
U.S. Bank’s original login screen

Navigation Menu:

  1. Transfers, Payments, Send Money, and Deposits have somewhat ambiguous names.
  2. Sub-menus share many options, creating clutter and confusion.
U.S. Bank’s original options screen
The cluttered options sub-menus

With these issues in mind, what are my goals?

  1. Streamline login process.
  2. Update design, improve readability/navigation on home screen.
  3. Simplify menu items into more manageable categories.

— And what do I want to begin to learn?

  1. How do you design for a wide audience with varied technological literacy?
  2. What makes an option’s purpose obvious?
  3. What does a user need from an app versus what does a user want from an app?

With my goals outlined, let’s get started.

Login

First off, let’s talk about the updated theme. The blue background of the app reminded me of older applications and webpages, so I updated it to a white/gray gradient with accents of color according to the US Bank brand.

One of my main gripes with the login screen was it’s prompting of TouchID as soon as a user opens the app, because if the popup was closed out of, the user could not get back to TouchID and would have to manually type in their login information. Thus, I added a TouchID activation button with a gradient of the US Bank colors, much like that of the redesigned Instagram and iTunes logos. I also removed the Location and Help buttons and replaced them with text links to minimize clutter and confusion on what the button’s functions are.

Episode IV: A New Home

In the previous homepage, metadata was scattered all over the screen and there was a mix of both buttons and text links. In the updated design, text links were turned into icons and the user’s accounts were turned into 3D buttons in a contrasting color. This caused the buttons to be even more noticeable by the user, an important factor for older and less technologically savvy users. In a similar fashion to apps nowadays (like Twitter), I added an optional Night Mode setting in the upper right-hand corner to reverse the bright white to an all-black theme for those with light-sensitivities and for use in darker settings.

Options

The previous Options menu was confusing to me. Transfers, Payments, and Send Money were all a bit ambiguous and each contained a History tab. To clean this up, I compiled all three of these into the catch-all Transactions tab and grouped their similar option into History. The middle screenshot shows my first idea for a design wherein I tried to remain consistent to the new My Accounts homepage, but the buttons looked out of place on the dark gradient when compared to the white homepage. I ended up adopting a similar look to the original Options tab, just replacing the iconography with updated filled icons and signifiers that each option had a sub-menu

The All-New Transactions Page

This is where the user is taken when they click on the Transactions tab. When I was first creating this screen, I wanted to integrate a ton of new apps and let it be a hub for money transferring. But, after talking to some peers to garner advice and critiques, my peers helped me realize that the user doesn’t care about all of this integration and collaboration. All they care about is the end product, “Can I use this to send my money?” With that critique in mind, I pared down my options list to four types of transactions: the three already in the original Options list, and US Bank’s partner for sending money, Western Union.

There was still some work to do though, how should I stay on-brand from the buttons I designed in earlier pages, but also make them different enough to make it seem like a different feature? I decided on using similar contrast colors as on My Accounts and the button style from the options menu to relay familiarity. I utilized the company logo on the top two options to show they are options for transactions within the bank, and the other two icons to show there are options for sending money outside of US Bank’s realm.

Thank you and I hope you enjoyed the read, stay in touch for more redesigns and original ideas! ~ Pari