Redesigning Caribou Coffee’s
“order ahead” mobile app
Improving how customers can use the app to skip the line through easier menu navigation and drink customization
The Challenge
Caribou's mobile app (released in 2014), lacked modern features and the ability to release marketing messages systematically. The app also needed improvements in navigation including finding a drink and modifying it.
The Outcome
Complete redesign of an "order ahead" mobile app experience for iOS and Android used by over 2 million active users. The apps incorporated user feedback to create improved functionality and a brand refresh.
Background
We kicked off the project with a two day, in-person Design Sprint workshop. From there I led strategy, information architecture, prototyping, user testing and UI design. Beyond design, I owned the relationship with the client, defining the roadmap and project timeline, hiring additional design resources, and leading collaboration with and assigning work to the other designers.
Design Sprint
A “Design Sprint” is a multi-day workshop dedicated to answering critical business questions through problem framing, and ideation activities. In May 2021 we conducted Caribou’s first Design Sprint! Two days were devoted to identifying the biggest challenges and opportunities within Caribou’s current mobile app.
This work laid the foundation for the v5 redesign, ensuring the project focused on the right problems and took into account the perspectives and expertise brought by the multidisciplinary Design Sprint team.
Photos from Caribou’s 2-day Design Sprint in May 2021
Design Sprint outcomes
Caribou’s Design Sprint resulted in identifying v5’s top goal and most crucial obstacle. The goal and obstacle were rephrased as a question to be answered in the next phase of work, prototyping and testing.
Goal: Ordering in the app is as accommodating and more convenient than in-store.
Obstacle: We think customers know more about us than they do, e.g. drink terms, location features.
Question for prototype: Can ordering anything be easy for everyone?
Content Inventory
With our goal of ‘ordering in the app is as accommodating and more convenient than in-store” we needed to restructure the information architecture of how the drink menu was organized. To begin this process we did a content inventory, giving us an understanding of the categories of drinks and how they can be modified. We learned there are a LOT of possible variations, which means we need a well organized system so users can find and modify their favorite beverage.
An exercise to define all the variations on a single drink, in this case one of Caribou’s most popular drinks, “Campfire Mocha”. The artifact notes inconsistency in the way modification options are presented.
Wireframes
Beyond reorganizing the navigation we also needed to refresh the product presentation and improve the interface customers would use to customize their drinks. We created wireframes to diagram how the content could be displayed with two main goals 1) make it clear what ingredients are in the drink and 2) make it easy to modify the ingredients or add other ingredients.
Using “Campfire Mocha” as an example, the wireframes indicate how each of the four preparations could be laid out with easy access to switch among the preparations (from Nitro, to Hot, to Iced, etc). We also have section clarifying what’s in the drink and what can be added to the drink.
UI Design
The final design lets users easily customize drinks any way they choose. This prototype was ready to test!
“What’s in it” vs “Make it mine” labels to make ingredients vs add ons clearer.
Added ability to ‘save to favorites’.
Improved customization entry process through a pop-up interface rather than linking to another screen.
Consistent application of modification ui pattern to decrease cognitive load.
Save button to clarify how to commit desired customization.
Caribou’s design refresh including updated functionality and visual design
User Testing
We recruited participants in user testing through a screener on userinterviews.com. Our criteria were consumers who frequented coffee shops but were not Caribou customers because we wanted to make sure using the app was easy for people who are not familiar with Caribou’s menu.
5 Participants included a mix of ages, genders and geographical regions.
Users were asked to perform tasks such as “change the espresso to decaf” on a clickable prototype.
Results were tallied on a spreadsheet to find themes and determine any design revisions.
We created a clickable prototype to gather usability feedback from participants through moderated, task-based usability testing.
App Launch
The design team supported development efforts, remaining collaborative partners after handing of design files. After a few months of development the app launched for both iPhone and Android users.
