Your daily dose of coffee: how might we design a recurring delivery feature for the Starbucks app?
My team created an intuitive delivery experience for Starbucks' mobile application and designed five new delivery features. As the Visual Design Lead, Interaction Design Lead, and Copywriting Lead, I spearheaded the design process, wrote the copy, consolidated our screens, and made our visual journey – from sketch to wireframe to hifi mockup – seamlessly cohesive.
Starbucks is an innovative pacemaker that provides quality food and drink. Currently, the app only offers in-store pickup, leaving Starbucks unable to compete with other third party delivery services. We were tasked with introducing a delivery feature that allows customers to order at their convenience.
My team created s features, includin an intuitive scheduled delivery and recurring delivery feature for the
Team – 3 people
Target Device – Mobile (iOS Application)
Tools – Sketch, InVision, Photoshop, Pen & Paper!
Copywriting, Interaction Design, and Visual Design Lead. I wrote the copy and spearheaded the visual design process, nailing down our style guide and a number of screens. I also consolidated our screens and made them cohesive. Sketch Cloud and impeccable communication were my best friends during this process!
I was also involved in: User Interviews, Affinity Diagramming, Data Synthesis, Ideating, Design Studio, Usability Testing, Wireframing, and Prototyping.
My team created an intuitive delivery experience for Starbucks' mobile application and designed five new delivery features. As the Visual Design Lead, Interaction Design Lead, and Copywriting Lead, I spearheaded the design process, wrote the copy, consolidated our screens, and made our visual journey – from sketch to wireframe to hifi mockup – seamlessly cohesive.
As part of a General Assembly class project, we were told Starbucks would be deploying an in-house delivery service team. Starbucks currently only offers in-store pick up for mobile app users, so how might we design a mobile delivery experience for Starbucks customers?
Our research showed that we needed to reward customer behavior. So, we created 3 features and integrated them into Starbucks' existing rewards program:
Visual Design
Interaction design
wireframing
copywriting
In my team of three, I led the design process, wrote the copy, and made our visual journey cohesive.
I was also involved in: User interviews / research synthesis, IA, ideating, usability testing, wireframing, and prototyping
2 weeks
Clickable prototype
(iOS app)
Sketch + Sketch Cloud, InVision
Starbucks is already renown for its charming brand and iconic logo, but before we set out to research its background, we had no idea just how much of a pacemaker it actually is within the food and drink industry.
We were amazed to find that Starbucks has a staggering 1.2 billion dollars loaded onto it, a sum greater than what some financial institutions have in their accounts!
This showed us how loyal Starbucks customers truly are, but to create the best solution, we needed to understand why. To do so, we looked at their business model to understand how they cultivated such incredible success.
Job seekers reach a one-page form by clicking the Job Seeker button on the homepage. Once a job seeker submits the form, they wait to be matched with a job opportunity. They receive information about the position, as well as potential interview times, via text notification.
Current Crewcollar homepage and submission form
Starbucks' reward system
So how does it work? Starbucks requires its mobile users to load money directly onto their app. To encourage users to do this, they offer incentives within their mobile rewards program.
The stats were telling — this works, and it works well. Therefore, we knew we needed to create a user experience that incorporated Starbucks’ highly successful rewards program.
Our team set out to interview 14 delivery app users to gain insight on how they approach the process of ordering delivery. We focused on Starbucks customer behavior as a secondary aspect of our research.
1) Why do you use app delivery services?
2) Within the last month, how often have you used these services?
3) What are some of your biggest frustrations with these apps?
1) How do you usually order from Starbucks?
2) What do you usually order?
3) Within the last month, how often did you order?
We compiled our interviews onto post-it notes in an affinity diagram of our findings.
We spent a whole day synthesizing our data to identify pain points and common data trends. We were then able to create a primary persona to guide our design decisions, and also started to identify our secondary users.
We investigated a number of delivery apps to better understand the market. We pinpointed a few industry standards that we needed to include in our solution, as well as windows of opportunity for Starbucks to stand out from the rest.
Competitive analysis
I analyzed delivery apps such as Uber Eats and Door Dash to understand their UX/UI. I wanted to ensure our users would encounter an interface they were familiar with when they ordered with Starbucks.
Recurring delivery was an idea that first came to us from research, when we found an overwhelming user trend where Starbucks customers had a routine for when and what they ordered. While we thought the idea of an order that's automatically delivered to you was cool, there were too many logistical issues — but then we found an existing feature in the app that actually supported its implementation.
Starbucks' existing auto reload feature
Auto-reload is an existing feature in the app that automatically deposits money whenever the account balance falls below a certain amount.
This opened up so many possibilities! If paired with our recurring order idea, this feature can supply an endless loop of payment — thereby increasing revenue for the company, and also providing a convenient solution for time-starved users who stick to their coffee routines. Thus, the idea stuck, and we began to brainstorm ways to implement it.
Our team used the Design Studio methodology to rapidly ideate. Afterwards, we regrouped to combine our design ideas.
Final Design Studio sketch flow
Our team needed a way for users to schedule their order — what time they want their coffee, and on what days. So, to make sure we were on the right track, I took a look at a number of scheduling apps like Calendly for inspiration.
We also needed to brainstorm logistics. How can users view the orders they've scheduled? How do we explain how payment works? And how can we alert users to incoming deliveries, so that coffee doesn't randomly show up if they've forgotten? I brainstormed different ways to address this, and also drafted some copy.
I led the wireframing stage. After consolidating my teammates’ wireframes and making sure they were consistent, I then created a clickable InVision prototype.
We tested our prototype on 5 users in order to check for gaps in our solution. I asked them to carry out the following tasks:
With our insights, we were able to make a number of iterations to improve the friction of our initial designs.
The evolution of the preorder page
The evolution of the recurring delivery page
Moving the recurring order path to the checkout flow
The recurring delivery feature was originally located in the Previous orders tab instead of the checkout flow. Understandably, this caused a lot of confusion!
I took a step back and revisited our user flow to reassess. In the end, I settled on three pathways users could select depending on their delivery choice: As soon as possible for quick delivery, Later for preorder, and Often for recurring.
Because Starbucks' style guide didn't have any specifics for iOS, I analyzed the mobile app and created an iOS style guide for my teammates to follow.
Graphics for delivery and recurring order
Starbucks has a distinct style for its graphics. In order to match this style, I created custom graphics for our new delivery features and recurring order feature.
iOS style guide I created after analyzing the headings + text colors
Starbucks mobile uses Avenir. I analyzed all the text colors and traced all headings in the iOS app to come up with the sizing for each one. Because the app is so typography-heavy, for our visual design it was critical that we were conscious about our spacing and line-height.
The app also has very stylized floating buttons, known as FRAPs (Floating Resizable Action Pills) in order to make every action clear and unambigous. We used these buttons on our new screens to stay consistent.
Because multiple people were creating hifi mockups, I made sure our entire design was cohesive. I also designed the onboarding, nailed down a number of other screens, and wrote the copy. Here are just a few snapshots from the final mockup.
This project was a great example of how fluid the UX process is. We never anticipated that we'd design a scheduling component in a delivery design, but it was a fun and unique challenge. I learned a lot in terms of intuitive UI.
An intuitive scheduling system is a challenging UX problem, and it took us several tries to get right! Also, since we all wireframed and created mockups, leading my team through this stage was a challenge because consistency was key. Ultimately, I'm proud of my organization and communication to accomplish this.
While recurring delivery is a fun idea, it's definitely less feasible for your average user, especially for something as cheap (and small) as one cup of coffee. Therefore, recurring orders on a larger scale – such as corporate integration and a subscribe and save feature for companies – would be interesting to explore.
