Four to One

Along with the proliferation of the internet and its myriad websites, so did the number of channel-specific sites under the Starbucks brand. Five such Starbucks properties, all living under the foodservice umbrella included Starbucks Foodservice, Starbucks Office Coffee Solutions, Starbucks Licensed Stores, and Seattles Best Coffee.

Consolidating these sites into one cohesive branded experience takes planning. As such, the site was broken out into three distinct phases: 1. Public Facing Content & Customer Conversion; 2. Segmented Promotion & Ecommerce Purchasing; 3. Starbucks Partner & Associate Training.

Each phase tackled content and design through five incremental steps: User Stories, Content Mapping, Site Mapping, Wireframing, and Visual Design.

User Stories

Providing engaging content that in turn drives meaningful action is the aim of sites small or enterprise. The Starbucks Branded Solutions site’s underlying goal was to make this exchange simple, and leaning on a user’s story was key.

User Stories are a tool to reveal the many different ways expected users of a site seek information and the tools they need to discover it. Defining what content each user type is looking for and where that content might be found is the foundation for building an intuitive user interface. The User Story guides content and design, informing an elegant and intuitive User Experience (UX).

Content Mapping

The cliché content is king holds true, cliché or not. Designing a site without developing content is akin to designing a car and ignoring the motor.

After a series of User Story exercises that revealed the content our audience sought and how they expected to find it, we built out a content map that was structured to both reflect where content lived, and how the site should be structured to make the content discoverable.

Content was mapped with the second and third phase in mind. The holes in the map were signposts directing us how to structure future content in both its relation to the existing content and how navigation would make it all easy to find.

Site Mapping

Many are familiar with site maps and how they represent the structure of a website. But too often this tool is thought of as the first thing to do when organinizing a site’s structure. In fact, it should be built alongside user stories and the content those stories inspire.

Wireframes informed by user stories and how they drive content decisions makes site organization easy to follow and easier to add on to. With two additional and complex phases in front of us, this approach was invaluable.

Wireframing

After we understood our users and defined the content they expected to find, bringing the Starbucks Branded Solutions site to life started with abstract Wireframing. We took this approach to avoid anything that might be interpreted as final design which allowed the client to focus on content, where it lives in relation to other content, and the navigation path to find it.

Visual Design

So often in a mad rush to have a thing to show, the visual design of a website precedes all else—strategy, user insights, even content.

With the right path taken and a foundation built around user expectations, we explored several distinct visual interpretations of the site, its navigation, and most importantly, its content. The final solution married the first phase strategy of customer conversion against the benefit of being a Starbucks customer—their coffee.

Conversion

A key indicator of success for the new Branded Solutions site was a measure of the overall Starbucks customer base pre- and post-launch. Converting traditional offline customers to online ordering from their previous route to fulfillment demanded a user experience that was equally intuitive as it was visually engaging.

Customers with an existing verified account number were walked through a straight forward account signup process creating an authenticated user profile that ultimately served the strategic goals of Starbucks account-type segmentation.

Public Facing

Reflecting all segments Starbucks Branded Solutions serves, the public facing site content covers customer opportunities such as College & Universities, Hotels & Lodging, Government & Military, and Healthcare among other channels in the Starbucks go-to-market portfolio. The Branded Solutions site also provided a home for Licensed Stores, Starbucks most popular and most public business inquiry.

Segmented Programs

Starbucks Branded Solutions partners fall into one of eight segmented account types, each having a specific product and promotion mix designed to facilitate their unique operation.

After sign-in, each segment is presented an account-driven dashboard of products, recipes, promotions, and information tailored to help best serve the customers of each segmented operator type.

Ecommerce Purchasing

Among the first in foodservice to offer ecommerce fulfillment, the Starbucks Branded Solutions site set out to supply operators with everything from back- to front-of-house, providing a seamless branded experience between their popular retail stores and their independent retail partners.

Working closely with both the front and backend dev team, I designed an ecommerce shopping experience centered around a modular system that allowed for easy product additions over the life of the Branded Solutions site.

Starbucks Recipes

Starbucks legendary beverage recipes are beloved by customers, sought after by imitators, and invaluable to Branded Solutions operators. Like the rest of the site’s segmented content, each operator type is presented only the recipes their operation serves.

With hundreds of tried and tested Starbucks’ beverages, this was the first online catalog easily accessible to Starbucks’ valued operators enabling turnkey training supporting new and experienced baristas alike.

Partner & Solutions University

Segmented between Branded Solutions operators and Starbucks’ partners, the two portals were built to facilitate comprehensive online training to all of Starbucks valued employees and independent operators.

Solutions University Course Builder tool allows managers to login to the platform, add employees, and customize a training program from a series of pre-built modules tailored specifically for the role each employee plays in the success of Starbucks.

Supplemental Training

Built to serve the many professional disciplines within the Starbucks enterprise, supplemental training modules were designed to deliver best practices regardless of where an associate is located, through written and video course materials.

Among the many course offerings, NextTalk was a series of sales focused testimonials from some of Starbucks most successful partners.

A Templated Approach

To make this lovely site lovely across all devices, we developed a flexible tiered templating approach utilizing simple band stacking to make it seamlessly responsive and easily constructed.

Providing several templated options helped Starbucks budget for new content creation and guided both visual design and coded development.

Digital Documentation

Documentation through Style Tiles and a Promo Digital Guidelines helped ground and guide the design and development of this years-long project.

These comprehensive guides were created to ensure the agency, agency partners, and our Starbucks client were all working from the same playbook.

A Singular Branded Experience

The Starbucks Branded Solutions site was a years-long project that consolidated numerous Starbucks online properties into a single comprehensive branded experience.

For the first time Starbucks’ customers had one source for Starbucks’ account management, brand portfolio information, the channels it serves, segmented programs, ecommerce shopping, plus operator and partner training.

Best of all, it’s worked. Really well. Starbucks has led the way in B2B ecommerce product fulfillment and continues to do so in a way that serves operators successfully for every sip and season.