YASMINE EVJEN: No matter where you
go, when you walk into a Starbucks,
you know you're going to be greeted
by the same experience-- a friendly barista waiting
to give you a cup of coffee.
And we're here in Seattle to talk with their team
to hear how they're bringing that into the digital world.
[MUSIC PLAYING]
I spoke to Ryan, the director of emerging technology
at Starbucks, to hear how they're
including the personalized barista experience
into the Google Assistant.
RYAN BRUELS: One of the opportunities
that we have with Google Assistant
and with the voice assistants in the home
is, how do we bring that personal connection that you
might have with a barista into your home?
And what we are not trying to do is pretend
that we're going to replace that barista
or try to remove the barista from the experience
when they arrive at the store.
But what we do want is that same feeling of, oh, Starbucks
knows where I'm at, Starbucks knows what I want.
YASMINE EVJEN: I think my favorite part of the Assistant
app is that it knows your usual.
So you can actually ask the Assistant, hey, Google,
ask Starbucks to order my usual.
So it really makes me feel like I have just walked
into the store, I've talked to the barista, they know me,
and they're like, hey, you want your usual today?
RYAN BRUELS: Absolutely.
Mine is a tall triple shot blonde flat white
with one pump of vanilla, and if I
had to order that every morning, I'd
be wasting hours and hours of my life here.
YASMINE EVJEN: What were some of the learnings
that you had when building the Assistant?
RYAN BRUELS: One of the examples that comes to mind
is as we were thinking about recommendations.
Every customer has their own need states
at certain times of the day, but it could be based off
the weather, it could be based off the mood
that they're in that day.
And so what we try to design that for is really
around what do we know about our customer needs at the time
that they're coming to the Assistant.
So we try to take in as much context as we can,
we try to use their order history.
And I guess just in designing that, don't
design for marketing, but wait until you're
really able to, with some confidence,
understand what the customer needs and deliver that to them.
YASMINE EVJEN: What are some of the other ways
that you're exploring bringing the barista
experience to digital space?
RYAN BRUELS: Mobile Order and Pay
we launched a number of years ago,
and again, it's been successful.
But recently, we launched the Progressive Web App, so
App.Starbucks.com, which is a completely web-accessible,
no-app-needed way in to Mobile Order and Pay,
as well as the rest of our rewards program.
YASMINE EVJEN: Ryan, thanks so much for chatting with me.
It's been a pleasure.
[MUSIC PLAYING]
I'm ready for a pick-me-up, and the great thing
about the Progressive Web App is I can order ahead
and the coffee will be ready for me
to go when I get to the store.
I'm going to go here and place an order,
and I'm presented with all of their different menu options.
As I'm looking through the different options,
I'm going to go for my favorite, the pumpkin spice latte.
Add to order.
And now I am ready to check out.
I need to select a store.
Thankfully, there's one that's really close by.
And since all of my payments are already in the app,
I can just use my rewards card, and I'll be ready to go.
I'm going to submit the order, and now it's good.
Now that the order has been submitted,
I'm going to go head over to Starbucks
and pick up my coffee.
[MUSIC PLAYING]
SPEAKER 1: I have a mobile order for Yasmine.
Hey, how are you?
YASMINE EVJEN: Nice.
Thank you.
SPEAKER 1: Yeah, thank you.
RAMKI VAIDYANATHAN: The Starbucks loyalty program
is a key driver for customers to really earn stars, redeem
those stars for free food or drinks.
And we were able to really simplify the rewards process
by helping customers become a digital [INAUDIBLE] members.
And we are seeing a significant uptick
in numbers since the launch of Progressive Web App.
[MUSIC PLAYING]
YASMINE EVJEN: Now that I'm here,
I kind of want a cake pop.
And the cool thing about the Progressive Web App
is I can use it to pay, and I don't even have to be online.
And I have a reward, so I'm going
to use it to get a cake pop.
SPEAKER 1: Hey, how's it going?
YASMINE EVJEN: Good.
Can I redeem my reward for a birthday cake pop?
SPEAKER 1: Yeah, totally.
Let me go grab that for you.
YASMINE EVJEN: Thank you.
SPEAKER 1: Yeah.
Here you go.
Go ahead and scan.
Perfect.
YASMINE EVJEN: Awesome.
Thank you.
SPEAKER 1: Yeah.
[MUSIC PLAYING]
YASMINE EVJEN: This is really good.
CHRISTOPHER COX: One of the crucial ways that a user is
going to interact with our PWA is they walk into a store
and they're going to pull their phone out of their pocket,
and they want to be able to pay when they get up
to the register.
With a service worker involved, we don't even
need a network connection.
We just have all of the JavaScript,
CSS available, and we're able to,
as soon as they click on it, boom, you're in the Web App
right away.
The first thing you see is that Pay button.
Now you can walk up and scan with your phone.
YASMINE EVJEN: Starbucks designed a Progressive Web
App that adapts to user context and screen size.
Carlyn, a senior product designer,
showed me how they achieved this.
CARLYN LEVY: So on the left here,
we have our content focus crate, and this
is going to mimic a greeting as if the customer was
walking into the store, how a barista would greet them.
So we have Good Morning, Carlyn.
And then in the right crate here, this
is going to be where more of our interactive content
is going to be.
So they can focus on any transactionary things
here in the right crate.
And then as we shift and it responds
to a mobile breakpoint, the focused content crate
comes to the top and our right crate goes below it.
Again, with the Floating Responsive Action Pill
or FRAP, which is our take on the FAB.
We love it.
YASMINE EVJEN: I absolutely love that.
That's probably my favorite thing that you--
CARLYN LEVY: It's our favorite, too, trust us.
YASMINE EVJEN: And they can quickly start an order right
from the home screen.
CARLYN LEVY: Yeah, exactly.
So on desktop, the FRAP shows Start an Order as the main CTA.
And as the breakpoint goes towards tablet and mobile,
the FRAP will change to Pay, which is the bigger use
case for when customers walk in, and they're
able to pay with their mobile app in the store.
YASMINE EVJEN: And actually, really smart because you're
focusing on building an experience that
is catered to wherever they will be, whether if they're mobile,
they're more likely to be in the store,
versus if they're on desktop, they
might be submitting an order for themselves
or maybe probably a group order when they're in the office.
CARLYN LEVY: Exactly.
YASMINE EVJEN: Can we start an order?
And just walk me through that process.
CARLYN LEVY: Sure, I'd love to.
What would you like to order?
YASMINE EVJEN: Caramel frappuccino
I think is-- it's where it's at for me.
CARLYN LEVY: Awesome.
YASMINE EVJEN: Let's add it to the order.
I think that we've got it customized the way we want it.
CARLYN LEVY: This is my favorite animation.
That teardrop animation is so great.
YASMINE EVJEN: My favorite part of the entire animation
is that you actually grab an image of whatever menu
item, whether it's a coffee drink, hot drink,
or frappuccino, and you're seeing it represented
in the bag, which is really a smart way to let the user
know that that specific item was added to that.
CARLYN LEVY: Yeah, the dual confirmation
with the [INAUDIBLE, and then also the product image.
YASMINE EVJEN: And then we can easily confirm a store.
CARLYN LEVY: Mm-hm.
Right here in headquarters.
YASMINE EVJEN: [LAUGHS]
Thank you so much for chatting with me.
[MUSIC PLAYING]
I've had a great time here in Seattle
talking with the Starbucks team and hearing
how they're making it really easy for customers
to order their cup of coffee, whether it's
using the Assistant experience or the Progressive Web App.
And I kind of want a cup of coffee right now.
Hey, Google, ask Starbucks to order my usual.
[DIGITAL BEEPING]
SPEAKER 2: Hi, Yasmine.
Welcome back to Starbucks.
That's a tall pumpkin spice latte.
Anything else?
[DIGITAL BEEP]
YASMINE EVJEN: No, thanks.
SPEAKER 2: You usually pick up at the 7th and Westlake Seattle
Starbucks.
Do you want to pick it up there?
[DIGITAL BEEP]
YASMINE EVJEN: Yes.
SPEAKER 2: Here's your order summary.
Your total is $4.90.
Ready to place the order?
[DIGITAL BEEP]
YASMINE EVJEN: Yes, please.
SPEAKER 2: Great.
I put your order in.
We'll see you soon.
YASMINE EVJEN: It'll be ready by the time I get there.
Until next time, see ya.
[MUSIC PLAYING]