Role
This project was for a User Experience Certification course in which I was the sole UX and UI designer.
Timeframe
Completed during an 11 week UX course.
Tools
Figma, Zoom, Google Slides, Miro, Adobe InDesign and Illustrator.
Define the Challenge
While customers can be fanatical about Dutch Bros. coffee, they hate waiting in long lines. That coupled with contactless trends driven by the pandemic has led users to prefer mobile ordering and contactless pickup options. Adding mobile ordering to Dutch Bro’s existing app would better serve customers and help business thrive.
Empathize through research
In-depth Interviews
Interviews were conducted based off of an interview guide with five Dutch Bros customers. Results were compiled in an affinity map to produce insights.
5/5
Users don’t have time to wait for coffee
Have chosen a competitor’s coffee shop because the line at Dutch Bros was too long.
4/5
Users prefer mobile ordering
Said they’ve used mobile ordering to purchase coffee from competing coffee shops.
4/5
Users want to schedule their pickup and know when their coffee will be ready
Want to be able to schedule a preferred time to pick up their coffee.
“I like their coffee and it’s a good atmosphere, but I’ve driven by Dutch Bros many times because the line was too long.”
— Kevin / 35 / Phoenix, AZ
Personas
Henry Hurried, 33
Goals:
Wants to quickly pick up coffee for himself and his girlfriend on his lunch break
Wants to prepay and have his favorite drink and location saved
Likes to use the drive thru to pick up coffee
Pain points:
Hates long line at Dutch Bros
Doesn’t like a long, laborious process for mobile ordering coffee
Ava Efficient, 27
Goals:
Wants to treat herself to coffee on her way to run weekend errands with her husband
Wants to exclusively use mobile ordering to save time
Pain points:
Hates not knowing when her mobile order is ready
Is intimidated by Dutch Bros because its always so busy
Doesn’t like when she can’t modify her order
Competitive Analysis
✔ Drive thru or walk up option for mobile order pickup
✔ Curbside pickup
✔ Customize orders
✔ Favorite stores
✔ Favorite drinks
✔ Schedule pickup in advance
✔ Drive thru or walk up option for mobile order pickup
✔ Curbside pickup
✔ Customize orders
✔ Favorite stores
✔ Favorite drinks
X Schedule pickup in advance
✔ Drive thru or walk up option for mobile order pickup
X Curbside pickup
✔ Customize orders
✔ Favorite stores
✔ Favorite drinks
X Schedule pickup in advance
Ideate Strategy & Solutions
How might we improve the ordering experience at Dutch Bros. for rushed coffee drinkers?
Offer mobile ordering
Users don’t want to wait for coffee and feel the lines at Dutch Bros. are too long. We might help users skip the line and speed up their ordering and checkout process by offering mobile ordering.
Allow for easy customization
In-depth interviews showed users require the ability to customize their drinks. Including this option is a minimum table stake for mobile ordering coffee.
Provide saved favorites
Customers don’t want to re-enter their information and often order the same drinks. Providing saved favorites drinks and locations might help speed up their checkout process.
Offer contactless pickup
Contactless pickup grew in popularity during the pandemic. Offering this option might appeal to hurried customers who faster service and don’t mind forgoing human interaction.
User Flow
Based off of the personas, in-depth interviews, and competitive analysis, I built a user flow incorporating mobile ordering with saved favorites, customizable drinks, and contactless pickup options in as few clicks as possible.
Prototype, testing and iterations
Mobile Ordering
I began by sketching screens based off of the user flow, then created wireframes in Figma. In early testing, users did not use the coffee cup icon in the upper right corner to start their order.
Iteration: The coffee cup icon was removed and an “Order now” button was added to the home page and in the bottom navigation. In later user testing, the majority of users used the bottom navigation to begin their order.
Iteration: Testing found that users wanted to choose the time their order would be ready before committing to an order. Therefore the estimated pickup time was moved to the top of the home page, so it can be seen and adjusted earlier in the ordering process.
Saved Favorites
Users in multiple rounds of testing responded well to the location of the favorites page within the user flow. However, this process adds time, and a few screens, to their ordering process.
Iteration: An option to go directly to favorites was added to the bottom navigation. This allowed users to skip a few screens in their checkout process. 2 out of 3 users tested used the “faves” icon in the bottom navigation instead of navigating through the ordering process to the favorites page.
What would be next: Testing of 2 more users to see if the majority are using the favorites icon over the previous favorites navigation option.
Customizable Drinks
I began with a drink customization flow in which users could choose the type of customization in a dropdown and the amount of that customization in a right slider, much like Chipotle’s mobile ordering interactions.
User testing found the users were overwhelmed with having all their customizing options vertically on one screen and did not understand the 3-dot slider for drink customization.
Iteration: To solve for this, I divided the customization into multiple simple screens which users enjoyed more and navigated through more quickly in the next round of user testing.
Contactless Pickup
Users from early rounds of testing through high fidelity prototype testing understood the pickup options offered. I iterated after wireframing to change “pickup window” to “walk up window” to make an unfamilair process clearer for customers.
What would be next: If I were further iterating, I’d like to see if offering the pickup options earlier on the ordering process might be better for users.