Case study: Blue Bottle sprints with GV
We helped Blue Bottle Coffee design a new website that boosted sales and time on site.
Blue Bottle has developed a cult following for their beautiful cafes and exquisite coffee. But their website didn’t represent the brand well, and web sales made up only 10% of their revenue.
THE CHALLENGE
Translate the hospitality and quality of Blue Bottle to the web. Demystify the process of buying coffee and help people find select coffee they will love.
WHAT WE DID
Before any design work, we interviewed coffee drinkers about how they shop for coffee on the web. Then we ran a one-week design sprint with Blue Bottle and Dynamo, a design agency. During the sprint, we uncovered goals and opportunities, generated possible solutions, and tested those solutions with actual coffee customers. We coached Blue Bottle and Dynamo through detailed design and development of the new website.
HERE’S HOW WE DID IT.
BEFORE THE SPRINT: INTERVIEWED COFFEE DRINKERS
We needed to understand how people shopped for coffee on the web, so we planned a research study and talked with potential Blue Bottle customers. Based on the interviews, we developed the “coffee buyer’s funnel,” which kept our design decisions grounded in the real world.
DAY 1: UNDERSTANDING THE ONLINE COFFEE SHOPPER
We combined our research findings with knowledge from the Blue Bottle team to understand how people shop for coffee online. During the first day, we captured ideas and opportunities on Post-It Notes, and sorted the best ones to the top. This gave everyone a shared base to work from.
We categorized and sorted the best ideas and opportunities.
Jake sketched a few stories showing how people interact with the Blue Bottle website.
DAY 2: SKETCHING POSSIBLE SOLUTIONS
Using everything we learned the first day, we sketched possible solutions. We focused on each user story, one at a time, so we generated ideas that fit the way people really shop for coffee.
DAY 3: DECIDING WHICH SOLUTIONS TO PROTOTYPE
We extracted the best ideas from our sketches and wrote them down, to make sure our prototypes reflected the range of possibilities.
We created a huge storyboard of the user experience we’re designing. This helps us make quick decisions when we’re building our prototypes and provides a script for user interviews.
DAY 4: PROTOTYPING
We created three separate high-fidelity clickable prototypes in Keynote. Each prototype was used to test a different approach to shopping for coffee and a different visual style.
DAY 5: TESTING OUR PROTOTYPES WITH REAL USERS
We recruited 5 coffee lovers to come into the office and try our prototypes. We summarized our findings in real time by writing observations on the whiteboard.
AFTER THE SPRINT:
COACHING BLUE BOTTLE AND DYNAMO
We met with Blue Bottle and Dynamo every couple of weeks to help coach them through detailed design and development of the website. In addition to feedback and advice, we created wireframes to summarize and communicate the most important content on each page.
THE NEW WEBSITE LAUNCHED IN JUNE 2013. SALES GROWTH AND TIME ON SITE BOTH DOUBLED.
READ MORE ABOUT THE PROJECT ON THE NEXT WEB
“Blue Bottle Coffee’s end results are carefully tailored to guide users through the buying process… Most importantly, the new site brings Blue Bottle’s online presence inline with its in-store experience, making it possible for the company to encourage consumer passion in their products.”
