Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×

Building an Order Ahead App

Role

Lead Designer


Project Description

A company goal in 2019, was to improve the overall guest experience. We heard feedback around the long waits some of our guests experienced at cafes. Blue Bottle wanted to create an app that embraced the slow pace of coffee breaks, which our guests mentioned enjoying, while allowing them to maximize the time spent enjoying a coffee together.

Project Goals

  1. Improve the overall guest experience by increasing the speed of service
  2. Increase transactions in cafes by 4% during peak hours
  3. Collect data to better understand customer behavior
  4. Drive cafe revenue
  5. 80k downloads in the first year

The Deliverables

For each screen, we explored countless concepts, flows and designs, until we created the simplest and most elegant solution for each view.

Cafe Menu

This was the page we wanted everyone to imagine when thinking about the Blue Bottle app. Our goal was to lead with delicious coffee imagery and not distract the guest with too many details. To do this we needed to create a visual menu of all the products we were going to offer in the app.

Our cafe menus were one of the more complex areas of the app, each cafe has a unique menu and can serve different coffees each day. Inventory was a challenge as well as our "deliciousness standards" around what drinks would be able to be ordered in the app.


Product Detail

On this screen we continued to champion the beautiful imagery we used on the menu screen, while limiting the amount of obstacles between the guest and their coffee. We created a simple design that allowed for customizations of their drinks, but not too many.


Custom Tab Icons

These icons needed to be simple, clear, and equally as important—on brand. After hundreds of icons and countless subtle tweaks I landed on three icons that I am very proud to be the anchor of the app.


Onboarding

This flow was originally the first experience a new user would have to the Blue Bottle brand. We wanted it to be simple and intuitive but elevated, what we strive for when a guest walks into any Blue Bottle cafe.

Pick Up Experience

We considered this screen the "digital handoff" of the app to the physical cafe. We wanted to lead with a visual cue of the cafe. We also needed to restate the "deliciousness standards" and also we begin and end with gratitude, so it was important to thank the guest.


Cafe Locator

Based on the user-interviews from the discovery phase of this project. 81% of guests mentioned they want to order from the nearest cafe. Other features they mentioned were: easily getting directions to the cafe they ordered from and seeing if a specific cafe was currently accepting mobile orders.


Order Summary

We didn't want to try and reinvent the wheel with this page, however, we needed to be crystal clear about when to pick up the order and what exactly your order included. Other key feature for this page was the ability to tip to a barista.


Account

The good ol' account page, we wanted this screen to feel familiar but also on-brand. Using lots of white space and clean, clear copy.


The Project Timeline

This app effected many teams and processes across the company—collaboration was key. It was essential to work closely with the Creative, Digital and Cafe Operations teams throughout this project. We also helped to create our "deliciousness standards" with the Quality team. This was put in place for drinks that were ready but the guest hadn't picked it up. These standards were integral to get buy-in from cafe teams around an order ahead app.

Discovery & Back of the House

We partnered with an agency from January to March in order to gather market research of what guests wanted from a Blue Bottle Coffee app. What wasn't clear for Blue Bottle app was whether it should focus on a loyalty program or order ahead. During our user interviews with guests and cafe teams, we gauged interest of features using a clickable prototype. We conducted a total of 51 interviews over a two week period and used a scoring system to synthesize the information from the interviews into actionable items.

"Getting coffee is like taking a smoking break. It's an opportunity to get out of the office."
— New York Guest

While collecting feedback, I also designed a tool for our cafe leads to manage the order throttling, menu updates and stock-outs. I created an initial design that was implemented to get feedback quickly. After the cafe teams used it for a couple weeks, they provided feedback and we updated the UI to better serve them.


MVP & Core Ordering Flow

From March to May we used findings from the user interviews and turned them into the MVP of our app. We used a mobile style guide and light design library I created from existing web styles plus some iOS specific components. I also interviewed and brought on a freelance designer during this time to help with designs and to ensure we were creating the best possible app. We collaborated everyday and pushed each other to do our best work in a tight deadline. Our main focus during this time was getting the core-ordering experience of the consumer-facing app to a 90% complete.


Feedback & Improvements

With the MVP of the app being shipped from May to September, we shifted our focus to adding key features outside of the core ordering flow, to bring the app closer to the caliber people expect from Blue Bottle. Some features included: loaders on slower pages, onboarding enhancements, universal alert modals (soft asks and announcements), cafe selector, Apple Pay, improved view current order button, and a few more miscellaneous improvements.


App Rollout

Starting with "stress tests" on select cafe teams and our app infrastructure, we rolled out to all Bay Area cafes in September. We wanted to test different menus and volumes of sales. We are following the Bay Area release with a National.