Hello. Hey. >> Hi.
>> How's it going, everybody? >> getting good food to eat?
>> I'm josh williams. I'm a product manager at str
Bucks. >> And i'm cher, and i am a
Technical lead. >> So today we're going to be
Talking about our new progressive web app.
So let's get going. So we wanted to talk first about
Why we at starbucks like progressive web apps.
And again, as a product manager, i always use all these busy
Terms and what not. They are marketable --
>> That's not a word. >> Marketable is a word.
>> Made up. >> The reason they are
Marketable is because they are able to be sold by customers.
Some reasons they are marketable because they are easily
Accessible. You put a device with a browser
Can use a pwa. Old,
New, bad connectivity. It is easy to get and use this
Product. And it also has a consistent ux
Across all those devices as well. Very desirable.
Both on customer perspective and intern
Al perspective, building an application across so many
Different venuees. >> If you're at home or office
You can place an order on, you know, your desktop computer or
Be on the go on the mobile device and not have any
Surprises. >> Yep. Also, because it is web,
Accessibility is just as easy as it is with other web
Technologies. So there is such a great
Expansive knowledge around accessibility for web.
>> Worldwide consortium. >> That's it. >> Showing age by its imnam.
>> O native perspective, we always encounter some challenges.
Ios comes with a strong offering in terms of accessibility tools
Where adds android is just getting to the field and
Learning how to do this from scalable standpoint. So it is known with engineers
Who know how to build for accessibility and so that's
Really awesome. And one of our core values as
Company. Also pwas, while they are the
Ones -- they aren't what brought about mobiles.
They are app like performance, app like ux.
So it is really helped us figuring out our vision for what
Even web is going to look like as a company to nail that user
Transitional, and not financial oing throughout daily life.
>> And it is not just about mobile is so easy on the go, but
It is about the experience. And we work hard to make sure we
Bring that back to the desktop website as well.
>> Yeah. Lastly for anyone dealing with
Dev ops and general operations in release management, web is
Really easy for ops management. If you break something can you
Fix it minutes later. If you are trying to release a
New feature, can you do it so much easier --
>> Like without your product manager's consent.
>> They do it all the time. >> I know.
>> Crazy. Sometimes rerelease up to ten
Times a difor web. Where as mobile we don't
Generally release more often than once a month.
Sometimes faster than that. But lots of benefits as it
Relates to ops. So who here already uses the
Starbucks app? anyone?
>> Hecko. Heck yeah.
>> O even if you're not familiar with the gift card use and it
Was developed with the rewards program and so when we actually
Had, when we brought the physical gift cards into the
Digital experience, this is how customers walk into a store, pay
For coffee and also get their stars that they earn for their
Transaction and redeem that for free stuff later on.
So with pwa, this introduces a al
Advances to make that possible on the web.
So the basic things that we use are client side cashing, service
Worker and reacting and this gives us bar code pay.
We tend to assume that everyone has a terribly unreliable
Internet connection and this is especially true for customers
That are going from wifi point to wifi point.
Different cell phone towers and some are better than others.
And typically we have air handler code. And their connection is bad and
We can't get them anything and we show a blank page and some
Kind of error. But we started to think like is
That really necessary? do we need to tell them that
They don't have a connection? d at is
Perfectly good data and it is what they are looking for.
So we found it is way better to show the user the last thing
They looked at and keep trying to fetch new data as necessary
Hidden in the back behind the scenes.
I and so, the way we do that is by creating resilient reactive
Programming and it is also called switchy programming.
>> I know a little bit about switchys. >> That's not about --
>> Like excel? >> yes, like excel.
But in wait when you change a cell in a spread sheet that cell
Doesn't call all of the other cells and tell is it that it
Changed. Instead it is the other way
Around where the other cells reference that result and if
They need to change then they do.
This is also called the propagation of change.
So we can write a dwrait data str ucture that acts in response as it
Searches for equilibrium to make sure the two sides are the same.
And we do this using data streams and as job programmers
Especially we are used to writing listening to data
Streams like clicks and hovers and we can also do that with
Anything because anything can become a data structure that can
Be observed and reacted to. In our app specifically we use
React and reducts and reducers and selectors and we really like
Reducts because it really does give us that resilient data
Structure and resilient handling of that complex data.
So we have a code example as far as fetching data as a last
Resort. We only fetch data when this
Returns true. What this is saying is that
Basically any time data is missing when the two streams are
Compared or older than five minutes or you are on the home
Page then it refreshes and tries to get that data.
And if you as developer try to write code that does that same
Thing, without these complex state management systems, it is
Just dozens and dozens of properties that you have to keep
Track of and it is too difficult. It is easy to make a mistake and
Use track of failure and get back to the blank page state
That we don't want to show the user.
So we use our cell reducers to test that hard stuff and once we
Allow this type of state management without exposing ourselves to mistakes.
We can take a snapshot of the entire reduct state any time and
It will just cascade down from that point.
So when we look at the cash, if the user needs to be updated,
Then it will. And we persist things and read
Them from cash so we get to this point where it doesn't matter in
The user is currently in the store trying to connect to a
Wifi point, the bar code pay will work.
>> Yeah. Also one of the features we
Brought to the web for the first time was order ahead.
This is a feature that took mobile pay on native to the next
Level and enabling customers to place an order ahead of time and
Getting to the store. Now can you do that on the web
Without having to have the native app installed.
Can you do it on your mobile device, desktop.
We have seen quite high usage on desktop. Even though overall volume of
Customers is lower we get a lot of mobile traffic.
Transaction rate on desktop is significantly higher than we
Even expected when we first released it.
Then also, in general, i know that there are some technical
Considerations as to where pwas make our ordering feature
Much more resilient and reliable.
>> We do use the same technology that we use for everywhere else.
That's one of the benefits of building a pwa with component
Type system. We can use it anywhere in the same app.
Use this technology outside of the app.
That same kind of thing. So with that, an early read to
Share, especially if ux focus, we didn't want it focus on
Really the financial performance, we wanted to focus
On what customers are telling us from usability perspective.
So one of the metrics we use a lot is stickiness.
>> Like stick sners. >> Little different from
Stickers. >> People like stickers.
>> I know. I grabbed some.
>> You get one for me? >> can you have some. >> Cool.
>> So the stickiness i'm talking about is daily active users
Divided into monthly active users. So customers coming every single
Month, how many of them come back everyday?
So you know that calculation, you get a better understanding
Of how useful your tool is. How useful your app is.
This is something that, you know, you might not have really
High traffic because you're not a huge retail company but when
You focus on the ratio of taily to monthly, you can start to
Understand the daily application.
So important to focus on there. The next one is system usability score.
The sus. >> Another acronym for some
Reason. >> I didn't make this one up, though.
>> Okay. >> Yeah.
Sus is great because it is an overall score for how easy is it
To use an application. How familiar is the application
When you revisit it. How is navigation struck steurs.
Structures. And we saw 19 increase on
Mobile. Compared to previous
Application. And so pretty big performance
Jumps as it relates to system usability.
So good stuff we have seen. Exciting. Ready to take it to the next
Level too as we develop more and more features for pwa.
And that's all we have. Thank you you for coming and
Listening in. >> Yeah, thank you.
Ct-[ applause ]