Starbucks App Redesign

I recently worked on a Starbucks app redesign.

At the time, the app required three clicks to get to the pay screen. Or, as I discovered on accident, shaking your phone fast-tracked you to the pay screen. (Since we all want to be in line at Starbucks shaking our phone?)

After surveying about 50 users (as well as a few current baristas) I discovered a lot of people disliked the app. At my Starbuck’s location, the baristas told me that none of them use the app and that they all hate it. They were quite passionate about it!

Even the occasional power-user would praise certain aspects but still have strong negative feelings about other aspects.

It is my opinion that no app that is used for paying should require more than one click to get to the payment screen.

There is an anxiety surrounding those little moments at the register — with a line behind you and an exhausted barista/cashier/etc. in front of you — that amplifies any frustrations that a payment app may cause.

While working on the design, the team isn’t exposing themselves to that exact stress. They can do as much user-testing as they want, but the decisions I made surrounding my redesign focused on my feelings at that moment.

  • The very specific feeling of opening the Starbucks app
  • Clicking pay (at the top left of the screen, unreachable with one hand for most users)
  • Selecting the card you want to use to pay (Or preparing to pick multiple)
  • Navigating to the pay screen
  • Getting bored in line
  • Debating whether you have enough time to look at something else on your phone
  • Exiting the app
  • Getting to the front of the line
  • Realizing you’re soooooo many steps from the pay screen
  • Giving up
  • Getting out your credit card
  • Being annoyed at your failure and regretting the missed chance for points

This might be a more extreme version of what could happen, but I know it’s possible because it’s happened to me more than once. With the Starbuck’s app in particular.

The primary features I changed were:

  • Adding a “swipe up to pay” feature to every. single. page.
  • Making the option to combine funds from different cards more obvious
  • The landing page is the pay screen with a “swipe down to access everything else” feature

“Swipe up to pay”

Image for post
Image for post
Swipe Up to Pay

Since my redesign, Starbucks has gone through their own redesign — and opted for a floating “Push to pay” button. I consider this an equal or better solution to mine. Swipe up to pay does have the risk of frustrating the iOs user who’s swipe up may close the app.

I think the “Push to pay” button would benefit from the ability to be moved around on the screen by the user. It currently sits exactly where I begin scrolling. So when I go to look down the page, my swipe starts on the button which means no scroll and no pay. Nothing changes. I’d love to be able to just drag that button up half an inch to make room for my thumb to swipe where is always does.

Combining Funds

Image for post
Image for post
Combine by clicking the cards in the top right and pressing combine!

Apparently buried deep in the app was the ability to combine funds from different cards. However, it was too deep to do on the fly — and would’ve required the sort of preparation that most people don’t dedicate to their Starbuck’s apps.

What this meant for me was: Getting up to the counter and ordering a $5.40 drink. Paying with the app using $.40 from one card, $1.23 from another card, $.06 from a third card and my credit card for the remainder. This also involved scanning the app three times and still dealing with a credit card transaction. Again, this may be a more extreme example, but it happened to me more than once. So I added a combine button directly to the pay screen, where you can easily select cards, press combine, and have enough to pay for your drink in one action (can you imagine!).

Landing Page is Pay Screen

Image for post
Image for post
Landing page for new user — still focused on paying!

Okay, there’s no getting around it — most people use the Starbuck’s app to pay, order online or track points. Anyone of these can be the landing page and I’ll be okay. But the idea that there is an abundance of people going on the Starbucks app to look at the latest Starbucks news, or listen to the Spotify playlists seems ridiculous to me.

Now for the (very good) argument of “Starbucks is trying to push X.”

I definitely understand that. But inspired by Nir Eyal’s, “Hooked,” I believe that getting more user’s to use the app regularly and incorporating easy ways to explore other areas of the app will be more successful than forcing the user to push through your chosen “landing page.” Especially when so many users are going through this frustration at the register.

Conclusion

I think that successful apps don’t try to push anything by making it harder to accomplish the more important tasks. Always put the functionality and the UX above business desires. And then, once the app is functional and has a positive UX, find creative ways to encourage the user to do the other things you want them to. Starbuck’s most recent redesign of their app brings them a step closer to this and I’m thankful for that. I hope that all companies incorporating payment/reward app learn from Starbuck’s mistakes, and from their improvements.

I’m a Product Designer at Grubhub working on the LevelUp Team to create branded apps for restaurants.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store