Ditch the lineups. Starbucks brings mobile pay and coffee together.
Mmm. It’s the start of our day. Our fix. Our mid-afternoon lazy, sleepy pick-me-up. Our excuse to take a break. Our reason to meet friends. And for many of us, it’s integral to our day-to-day existence. Pretty powerful stuff if you ask me.
As a UI/UX designer, I’m always looking for that hit. That slap in the face. That cold bucket of water over my head that wakes me up. I want something that gets me to think, “Wow that’s different and meaningful” when exploring applications and websites. And for the most part, I was thinking just that with the Starbucks mobile app.
Go with the user flow.
Lately our team has been spending a lot of time in the mobile payments space. Being inspired by recent projects, we went for a walk to the Starbucks near our office with the intention of testing out their new mobile pay and pre-order app. Created in December of 2014 and test-launched in Portland, Oregon, it’s great to see Starbucks—a leader in the competitive coffee space—trying to engage its customers (now users) with an app to alleviate pain points using current tech trends (e.g. mobile payments, specifically in-app payments). Whether I’m walking to work or on the go, I typically have my phone in my hand anyway. Why not use it to find the nearest Starbucks and order a coffee on my way to my next destination? Avoid the lines and get my coffee in my hands as soon as I walk into the store. It’s forward-thinking and combines one of the oldest commodities around with one of the newest tech innovations. We like innovation, so naturally we were intrigued.
So does it really work?
We tested the app 3.2.1 using the latest iOS on an iPhone 6s. An Android version is coming soon.
Download the app, fill out your info, add your Starbucks card, order a coffee and the app does the rest. Perfect. Well almost.
To clarify, the Starbucks app doesn’t allow you to pay directly using your Apple Wallet. We’ll get into the reasons behind this later. But you can link a debit card or an American Express credit card (currently the only credit card supported by Apple Pay in Canada) to your app to reload your existing or new digital Starbucks card. The app also allows you to link a PayPal account to do the same. This seems redundant and counterintuitive. Why not use my native payment app to purchase? Starbucks understands a lot of Canadians carry iPhones with very limited payment options using the native Apple iOS payment UI, so the workaround is the Starbucks card. Link your preferred credit card, PayPal account or debit card in-app manually and reload your Starbucks card when you need to. Or even allow the app to automatically reload it with the account you set up using the payment preferences feature. Nifty.
“Starbucks understands a lot of Canadians carry iPhones with very limited payment options using the native payment UI…”
Create a meaningful UX through a rewards system that actually rewards.
You still may be thinking, “Why is Starbucks building this beautiful new app, allowing me to link my Apple Wallet or a credit-debit card, but still requiring me to pay with my Starbucks card?” It makes no sense, or does it? There are a couple of things I think are going on here. First, some insights from Starbucks CEO Howard Schultz on the hugely successful card in Q1:
“Our Starbucks card is more popular than ever today, accounting for 25% of U.S. tender, and an increasing portion of Starbucks card transactions and sales are being paid by using our mobile payment apps, with mobile payments now accounting for nearly 20% of overall card transactions…”
So you can see why Starbucks would want to keep it. The card combined with mobile payment seems to be working well. They complement one another and allow Canadian users to get around the restrictions of the native Apple Wallet card options. But wait, there’s more.
Who doesn’t love free coffee? Starbucks makes a sincere effort into letting its customers know they’re not just numbers. Using the Starbucks card to pay allows them to track your purchasing history in-app and notify you when you’re getting close to your free cuppa’. But it comes at a cost. A big cost. In Canada, users will soon have to spend $62.50 (which is about 125 stars) in single-star earned purchases to get a freebie, with each dollar you spend being worth 2 stars.
Someone who gets a large latte for $4.45 currently spends around $53.40 over a dozen visits before getting a free item.
Wow, that’s a lot for a free $5.00 coffee. Users are rewarded one star per purchase. One barista we talked to about the rewards program said customers were buying more than one item, a coffee and a breakfast sandwich to earn more points. To get the most out of the loyalty program you need to spend more during each visit. It seems to be working, though. Starbucks said it had 11.1 million loyalty program members in the U.S., up 23 per cent from the previous year. It seems no matter the incentive or pay ratio, people like free stuff.
The UX: it’s all in the details.
At first glance, I was impressed. The Starbucks app is branded well, has a clean look to it and smartly utilizes Apple’s impressive native UI elements with it’s own. Great start. Superficial elements aside, it’s all about the seamless integration between the UI and the UX (user experience).
Does this app create the seamless integration of major UX sell-points like adding a card, biometric authorization, gifting and rewards that users are now coming to expect from mobile pay applications?
Getting started was pretty simple, with minimal pain points I’ll address later. First, you must own an Apple device to download the app. You’re then asked to enter the usual account setup information: email, location, password, birthday (they send you a gift on your birthday—nice work Starbucks!). Next, you’re asked to manually link a credit/debit card or a Starbucks card you already own. If you don’t own a card, no problem. Starbucks considered this and allows you to add a digital card which is stored in the app.
Our team noticed that an aspect of the app that could use major improvements was is the addition of a card UI flow and an authentication flow. Since iOS supports an amazing biometrics authentication process, why am I forced to just use a passcode within the app? Given that passcodes are reliable and universally accepted on all devices, why is it that in this day and age where Touch ID and photo card readers such as the one the native Apple Wallet uses, aren’t incorporated into the natural flow within the app? Something that should only take a minute, now takes a lot longer. I’m forced to manually input the information. If I’m on the go and want to use this app, all these manual input metrics may actually put me off using the app – or recommending it to a friend.
Okay, we’re all set. You can now open the app and place your order. The navigation system is concise and simple, as it should be. We are ordering coffee and maybe a pre-made sandwich here. We’ll keep it simple.
Users are greeted with an intuitive layout and rich design. The major functions are displayed up top and secondary elements like messages and account history are at the bottom. Looks good to me. Adding my Starbucks card was a manual process. After adding all of my account information to get setup, I was tired and needed a coffee more than ever to stay awake through the first-time user flow. Starbucks also allows you to add a digital card if you don’t have an existing physical card.
Starbucks also pulls in Google Maps to give you the nearest stores using geolocation if you don’t want to use the app to purchase.
The gift of giving. It’s a great feature and it’s one of my favourites. Send a Starbucks gift card with a personalized message, select your artwork, how you want to pay with your registered payment options in the app and BOOM! You are now someone’s best friend. Simple, easy and super fast. This is the type of UX customers are used to and expect nowadays.
Down to business, let’s see how fast this really is.
Once you tap ORDER, you’re good to go. Users are immediately greeted with a nicely laid out list UI and thumb of each drink type. Scroll through the barrage of delicious drinks and select your fave, add a sandwich and now you have a super fast breakfast lineup-free experience. Well played Starbucks. I can’t say no (insert more rewards points here).
By continuing through this flow and using your selected travel metric with Google Maps, in our case, walk, Starbucks pulls up the closest location walking distance and estimates your pickup time. Select the recommended store and the app gives you a summary of your selection, pickup time, travel method time, purchase total and pay method. When we walked up to the set location, our goods were ready to go. However, we didn’t know this at first, which interrupted our giddy coffe-junkie excitement. The app didn’t really tell us what to do and where to go. So by default, based on a typical Starbucks order experience, we stood in line. What’s the point of having a pre-paid app that allows you to ditch lineups if the app doesn’t effectively educate the user on where to pickup their items? First impressions are invaluable to an app’s growth rate.
Adding a card manually?
Currently, Starbucks’ cards do not support a photo reader format because they do not display the institute issuing numbers on the front like a conventional credit card—rather they are on the back. Starbucks could easily get around this by switching the physical card format to match this, as their gift cards even have a security number. This in conjunction with the digital cards and the fact that the app communicates with your wallet to add your credit-debit card, would make this whole process fast and seamless.
Using the iPhone’s native card reader through the Wallet app to add your Starbucks card would be a huge value to the seamless user experience.
Go with the flow.
When you start the payment flow, a nice screen comes up with an educational video that tells you how to use the app. It informs the user to not wait in line, but to go directly to the pickup location. If I feel like watching an instructional video before placing my order, it disrupts the potentially amazing ordering experience. Starbucks is also assuming all customers will watch the video. Sure after the first time standing in line and asking the barista what we should do, we got it. Our hot beverage and sandwich were there, but even when we got to the counter we still had to say, “Hey I’m here to pick up an order for Matt,” while waiting for a busy barista to check everything. A simple and more intuitive solution to this would be on the purchase confirmation screen, to display a simple line of text that prominently shows itself, instructing you to go to the pickup area and say your name. If Starbucks wanted to enhance the adoption rate, they could add a hanging sign that says “Mobile Pickup” right over the pickup area. Starbucks has a lot of signs for the new app promoting it, but none to educate the users once they have the app and are returning to the same location with a conventional purchase thought process. Sure the app can do this, as long as it’s done well.
It would greatly improve the learning curve of the app if Starbucks began retrofitting their stores with way-finding material that accommodates and enhances the new app and new type of customer.
So does it really work?
Yes, it does. I enjoyed the experience, but with a few fixes, Starbucks could really nail this app and set the standard.
How to make it better:
- Use iOS biometrics to confirm purchases, place orders and unlock the app
- Set a default drink and/or food item list set in your preferences so you can just place your order with one tap
- Use the iOS native photo card reader to quickly add your cards
- Educate new users as to how to pick up their coffee after purchase confirmation via the app
- Use in-store signage to show app users where to pick up coffee in conjunction with all of the marketing material
Be a leader not a follower.
Have you ever looked at an app or heard your friends bragging about one and wondered if you should try it? Get on the bandwagon, perhaps? Well overall, you should try the Starbucks mobile pay and pre-order app. If you’re a coffee lover and have a smartphone, get on it. It will change the way you look at mobile payments and how they can be used for a legitimate reason. This app uses technology to get a product to the customer faster and more efficiently—the way they want it!
UI/UX Lead at Aequilibrium Software