Starbucks iPhone 6 App Redesign

In this article I critique the Starbucks iPhone 6 app and provide a design tweak specifically for adding a gift card.

iPhone 6 App Review

Overall I like the app. It has a nice, clean visual language and is easy to use. However, I found that adding a gift card was particularly hard to do. In fact, it was impossible to figure out, based on my coworkers experience. He literally couldn’t figure it out! He swore there was no way to add more than one card to the app. He argued that you could only add a second card on their website. My wife also struggled with adding a card for the longest time (tried multiple times) and I was in total agreement! It wasn’t possible!

However, After a few attempts and an argument or two with my coworker and wife, I was able to figure out how to add multiple cards.

Hypothesis: Users do not understand and have a hard time figuring out how to add multiple gift cards to the app.

Screens

IMG_0973

The landing page is nice and clean. It’s easy to use and I don’t have any problems with the page in terms of layout or interaction.

The only problem I have with the screen is the lack of clarity on which option will allow me to add a gift card. Which option do you think you’d use to add another card? Maybe Gift since I have a gift card, that makes sense, right?

IMG_0983

Nope, I quickly realized this isn’t the place to add a card, but rather where I’d buy a new card. I also tried Stores, but that didn’t get me to where I needed to be either. I also tried Menu, thinking this was a typical app menu, but its actually their food and drink menu, so that didn’t work. Ok, I’m stumped. I guess my only other option is Pay.

IMG_0974

Since you’re looking at a static screen the option might jump out at you, but it didn’t jump out at me at all. It also didn’t jump out to the people I talked to. I see 3 main calls to action. Pay, Reload, Manage, as well as the ability to see the balance of my card, but nothing that let’s me add a card.

Again, I tried every option. Pay took me to a screen where I could obviously use the card to pay for an item. That didn’t work. So, maybe I could Reload the card with the physical card I was holding in my hand? That didn’t seem to work either. I also tried to Manage my cards, but that didn’t work either.

So, how would you add another card?

Did you notice the tiny plus sign under the card?

IMG_0974_sm

Yep, that’s it. That’s your indication that another card can be added. Quite subtle, no? A little too subtle, YES! You can also swipe the card to the right to add a gift card (which is actually how I figured it out). I’m all for gestural based interactions, but when you know people who failed repeatedly, and you too have failed at a task, it’s time to find a better solution.

Enhancement

Here are a couple small changes that would make this a better design, more intuitive and an overall better interaction.

Add a Card - Version 1
Add a Card – Version 1
Add a Card - Version 2
Add a Card – Version 2

Like I said, it isn’t much of a change, but I bet it would make a world of difference. The user now has a visible cue on how to add the gift card. I’d also argue to keep the swipe feature enabled. Don’t take that away from the user, but do give the user a little more of a hint that they can take a particular action to add a gift card.

It’s subtle, but I’m sure it would work wonders for the app!

USAA Mobile Deposit Redesign: Part 2

In my last article I posted an overview of the existing (August, 2015) iPhone 6 app for USAA mobile check deposit. In this article I’ll show you some preliminary sketches for a redesign.

I always start my user flows and designs on whiteboard or pencil and paper. This is true for anything new I’m creating or for a redesign like the USAA mobile check deposit flow.

Here are some initial sketches for my redesign.

Landing page
Landing page & Image Capture
Image Capture
Landing page & Image Capture
IMG_0862
Image Capture
Account and Amount
Account & Amount Selection
Account and Amount
Account & Amount Selection
Landing Page after Capturing a Check Image
Landing Page after Capturing Multiple Check Images

I will typically iterate on the design and come up with alternate versions of each possible scenario and page. In these early sketches I’m trying to find the best layout as well as minimize pages and actions.

I first sketch out everything by memory and add as many options and versions as I can think of. Once I’ve expanded the design I will then start to narrow down the options and come up with a final first draft of all the best designs.

First Draft
First Draft

At this early stage of the process I’m really just looking to make sure I’ve included everything and that the entire flow has been considered. I want to make sure the design provides the user with full functionality, but also provides the user with the easiest to use and intuitive design.

In my next article I’ll take these sketches and apply a new visual language to give the app an updated and fresh look.

USAA Mobile Deposit Redesign: Part 1

This article provides a review of the USAA mobile check deposit design. I’ve included a walkthrough of the existing (July 2015) mobile design experience and a page by page analysis of the app using an iPhone 6.

In my next post, I’ll look at ways to improve the overall layout, organization, and fix some of the interactions of the mobile deposit function for the USAA app.

Existing Deposit Mobile Design

Let’s take a look at the existing mobile deposit experience. Here is a quick walkthrough of the existing USAA Mobile Deposit flow on an iPhone 6.

Let’s look at each page and break down the design. I see a few problems with the Deposit@Mobile initial page (Figure 1). I don’t understand why there are so many options. Also, the call to action isn’t strong enough, for me. The “See my account…” link is distracting and the “Clear” and “Deposit” buttons aren’t necessary until after the user adds a check, so I don’t want to see them until they provide value. The three options at the bottom toolbar (Wallet, Logo, & Help) are also not necessary and should be a part of the “Menu” or not available at all.

Deposit @ Mobile
Figure 1

One thing the “Capture Check 1” (Figure 2) page does well is provide the user with where to position the check for snapping the image. I don’t like how the options button has as much affordance as the camera button and the muted colors of the other options (Cancel, Retake, Done). It’s hard to tell which of these options are available and which are disabled. There are other visual design elements similar to this on the first page that need to be improved.

IMG_0763
Figure 2

The Check details page (Figure 3) doesn’t provide a very intuitive flow. The options are mixed together and it’s just plain broken. The options and overall layout are confusing and doesn’t make it easy to complete based on the existing interaction pattern.

IMG_0765
Figure 3

Entering the check amount was easy to do and works well. I probably won’t change much on this page. Overall, the interaction and flow works for the function the user is performing.

IMG_0766
Figure 4

Now that we’ve added a check we are back to the initial page in the flow. Again, there is too much going on with this page. The overall flow of the page and layout needs to be improved and should provide a smoother and natural page visual conversation.

IMG_0767
Figure 5

Summary

The overall flow and interactions aren’t great and can be improved with some simple changes. There are too many options and the layout needs to be changed to help the overall flow of the check deposit function.

See my next article on how I’d redesign the mobile deposit flow for the USAA iPhone app!

James

Great User Experiences

Great user experiences don’t just happen by chance; they happen when you involve your users and review the entire experience from beginning to end.

To be an interaction designer you must understand some basic design principles and rules, but to create great user experiences you must understand your user.

I’ve thought a lot about great user experiences and have always tried to create great experiences in every one of my designs.

Unfortunately, I’ve failed and I’ll be the first to admit it!

Creating great designs every time is impossible. We all like to think we do it, but we don’t. It’s not that we are bad designers. It’s not that we don’t try really hard. It’s not that our team has let us down or that we’ve let them down. It’s not that the stakeholder doesn’t understand what they want or need. And it’s not that we don’t always understand our users.

I won’t try to speak for anyone else, but I’ve failed because I’m not applying UX methods throughout the entire process. I’d like to think it’s the process that’s failing me, the final design, or sadly the user, but can I really blame the process, whether it’s waterfall, agile or wagilefall? No matter which method the team chooses it’s our job to make the process work. It’s the UX teams job to fit every aspect of UX; including research, early concept design, usability testing, and iterations of each, into the process.

Don’t get me wrong. This isn’t an easy task. It will be even harder if you’re a UX team of 1. In fact, it’s probably not possible to hit every aspect of the user centered design process, but try to consider each step and to plan for each step prior to getting to far into the project. One of the greatest points I can make is to quit worrying about dates.

I can’t stress this enough. Dates suck! Dates promote quantity, not quality.

A date is a great way to tell you’re employees that they have just stepped into a room with a bomb and if they are not done before it gets to zero, they are inadequate in more than one way.

Employees rush and try to piece together the conversation without really taking a step back and looking at it in multiple ways. Like I said, a design is typically never correct or optimal the first time, so, we need to iterate and conceptualize multiple approaches and test with users multiple times.

Conceptualizing and testing multiple times is the only way…again, the only way…to get to a great design.