Starbucks Site Design

Overview

This is one of those projects that sticks with you. The project began with a mad-dash to create interesting site concepts to only have the client pushing to see more out-there explorations. It ended with the design phase of the project being removed, with the UX phase left to finish on its own. I am unclear as to the status of the project, but hope to wake up one day to find my designs brought to life.

Starbucks is a magical brand to work on, the brand loyalty is through the roof & the internal teams push to innovate and change. They came to Sapient in 2014 with a responsive site and mobile app that many considered best in class. The ask was to create a website that was years ahead of any other competitor while still driving to stores, online sales and encouraging more loyalty.

Role:
Freelance UX Lead
Date:
2015
Agency:
Sapient
Client:
Starbucks

The Challenge

Our goal was to push boundaries, get uncomfortable and create thoughtful and game-changing work. We focused on the emotional, tactical and strategic to create designs that would not just sell coffee, but go beyond what the expected was.

The Solution

The design phase of the project had two distinct chapters. The first chapter focused on creative exploration & concept development – namely, unique approaches to navigation and content exploration. The second, longer, chapter focused on the creation of assets - wireframes, page diagrams, sitemaps & flows.

//a.storyblok.com/f/64126/1786x1086/ebd0780424/sbx-solution.png
//a.storyblok.com/f/64126/1919x1286/2fb34425d2/sbx-feature-exploration.jpg
Feature:

Creative Exploration

With most redesigns of this scale, you expect to be pushed back by the client. After the initial presentation of wireframe and design explorations, we were pushed forward. From there we concepted several unique approaches to content and navigation.

“Dig Dug” (shown) was a design where all elements were shown in a priority ranking on the homepage & to dig into deeper content you filtered the results. The selected option “Stacker” put the focus on moving both vertically & horizontally through the site.

Feature:

Stacker Page Navigation

The Stacker navigation model was slightly tamer than some of our initial sketches. It allowed users to navigate traditionally through a site using links and the back button. However, it also contained the ability to navigate horizontally across sections (from coffee to tea, or from dark roast to light roast) or vertically to deeper content. This navigational construct was the key concept of the site from which all decisions were made.

//a.storyblok.com/f/64126/2448x3264/fe04f88cb6/sbx-feature-stacker.jpg
//a.storyblok.com/f/64126/3264x2448/2608725953/sbx-feature-ecommerce.jpg
Feature:

Combining Sales & Marketing

The existing Starbucks website was siloed between the eCommerce experience (get coffee mugs delivered to your house) and the marketing/in-store experience (find your closest Starbucks). A lot of effort was put into understanding the eCommerce platform and how to streamline product sales. At the same time, we had to not drive users away that were simply looking for store hours or their rewards points balance.

Feature:

Sprint Based Design

Once a concept was chosen, we had to create a plan to implement and refine. We developed a sitemap, and from the sitemap, we created user stories to ensure our design met all of the criteria. Though we were not partnered with an agile development team, the agile approach allowed us to move fast and have built-in validation.

//a.storyblok.com/f/64126/1790x1112/7ab3b7428f/sbx-feature-stories.png
//a.storyblok.com/f/64126/1827x1126/8c81cca84d/sbx-feature-store.png
Feature:

Store Finder

Designing a store finder for Starbucks is akin to designing Yelp. We needed to come up with a solution that worked across a variety of cases. If you were trying to find a Reserve location in an urban center, to a drive-through store in the suburbs, or just wanted to see the nearest open location, the store finder had to work quickly and effectively. With all the primary information available directly from the search screen, we wanted to make it as fast as possible to get to your cup of coffee.

For those looking for a little bit more, we treated the individual store pages as destinations in their own right. In addition to hours and an address, we featured content from what beans were being featured this month to what track is currently playing. Adding more of a community coffee shop vibe, we designed an optional Community Board that could be moderated by a store manager.

My Role

I started on the project shortly after the discovery/research phase had completed. The team was very bare bones for a project this size and consisted of a producer, CD, UXD and UX lead (myself). I managed the day-to-day and presentations of the UX portion of the project, collaborating frequently with the creative team & junior designers.