Architecting a B2B Online Shopping Experience for a Coffee Giant

Nestlé Starbucks

On August 28th, 2018, Nestlé and Starbucks Corporation announced the closing of the $7.2B deal granting Nestlé the perpetual rights to market Starbucks Consumer Packaged Goods and Foodservice products globally.

With the deal closing, came a pressing need for a rebranded B2B website that would deliver a personalized customer-centric experience along with multiple new back-end integrations.

The current business site is very confusing.

CHALLENGE

Deeper Relationships with Business Customers

With the recency of an acquisition of this magnitude, the client still had a lot of unresolved questions involving their merging business strategies, the extent of re-branding they were undertaking, changing roles of the stakeholders on both Starbucks and Nestle sides, etc. Essentially, we were prepared to be unconventional, versatile and ready to turn on a dime in everything we were proposing. Bringing everyone together in one room for a discovery workshop to gather insights from all sides, and clarify everyone’s points of view, interests, goals, and fears, seemed like a natural choice for alignment and trust building.

PROCESS

Planning It All Out

My Role

Since the beginning of the project, I was in charge of all UX deliverables and activities during the Discovery stage, and later on, led the transition into the Design & Build.

CUSTOMER INSIGHTS & IDEATION

I partnered with the client stakeholders from both Starbucks and Nestle sides to uncover insights about the customers, and translate them into a unified vision that would address customer behaviors and motivations.

EXPERIENCE STRATEGY & VISION

I created frameworks and prototypes to share vision, best UX practices, and recommendations. This helped deepen the alignment within the internal team and with the client, and speed up decision making.

PLANNING & SCOPE DEFINITION

Together with the project manager, design director, and tech leads, we prioritized two separate customer-centric feature sets – one for the “Phase 1″/MVP launch, and “Phase X”/”Wishlist”  based on the balance between business goals and feasibility of their execution.

KICKING THE PROJECT OFF

Two-Day Discovery Workshop

We held face-to-face workshops with stakeholders where we gathered detailed notes and ran activities to generate ideas centered around the customers, which help us arrive at a shared understanding around what was going to be built, for whom, and the best way to build it.

A few photos from the workshop

WORKSHOP INSIGHTS
Key Takeaways & Expectations

The client was expecting us to bring to life a best-in-class B2B e-commerce platform that would feel like B2C. Foundationally, the e-commerce platform would need to be modular and flexible, allowing for self-publishing and management from the business side of the company. It would need to provide a personalized experience for authenticated users on multiple levels, i.e. personalized content, training, personalization based on location and account level. It was expected to integrate significantly more public content, tailored to the specific business segments. The platform would need to remedy long-standing customers issues such as inability to track orders or re-order from past orders, or even easily browse the product catalog to name a few. Overall, the client was looking forward to the improved UX combined with exceptional storytelling style. From the branding perspective, it was still unclear how the merge is going to be reflected visually. But it would be important to keep the Starbucks brand alive and to leverage brand heritage.

POST-WORKSHOP RESEARCH

Baseline Analytics

We conducted some baseline analytics research to get a better quantitative feel of the audience segmentation and purchasing patterns, and to contribute to persona creation. 

The data in this sample was collected between March 1, 2018, and March 1, 2019.

Gender & Demographics

Almost two-thirds of the visitors to the Starbucks Branded Solutions site are between the ages of 18 and 34 with a slight predominance of male customers.

Devices & Search

The site is primarily accessed via desktop computers. The in-site search – being hidden in the sliding sidebar – is barely used by the visitors. Search queries primarily revolve around product related keywords and order history.

EMPATHY MAPS & PROTO-PERSONAS
Creating a Positive Customer Experience

Customer engagement plays a huge role in positive customer experience. In the past, brand awareness and success meant a one-way B2C broadcast. Today it is all about customer engagement. The importance of personal relationships with two-way communication, dialogue, and social conversations is essential for brand awareness and success.

Developing personas was an essential part of our goal-directed design process. Each group of users researched is represented by a persona, which in turn is represented by the individual persona “documents” below.

A Closer Look at Personas

Primary persona for Phase 1 – “Responsible Ralph”

Supporting personas for Phase 1

From this point forward, we used these personas throughout the creative process to help us all in building empathy with users and making decisions.

CUSTOMER JOURNEYS

From Pain Points to Opportunities

To visualize personas’ relationships with the brand over time and across multiple channels, we created the customer journey maps. First – in the discovery workshop, and later on, refined them during the later stages of the project.

We approach customer journey maps as the underlying structure of the customer experience strategy, that offers a clear view of customer interactions as they navigate throughout the brand. The key to developing an accurate map of those interactions, and therefore a single view of your customers’ experiences, is not only obtaining the customer’s perspective of that journey but building it using input from the various departments across your company that affect the customer experience.

The goal-oriented journey maps helped us better understand milestones a customer should achieve in certain stages of the process and the context from a customer’s perspective – where, when and how it’s happening.

We have identified the following high-level goals for the users to visit the Branded Solutions site, and created a journey map associated with each:

  1. Shopping
  2. Training
  3. “Tracking”

Once we identified the key moments in the user’s emotional experience, we were ready to craft intuitive moments which would respond to their emotional highs and lows.

Based on our research and findings, we have delivered to the clients a recommendations document below.

Personalization

The best personalization requires the least amount of customer effort. Ideally, no additional work should be involved. To create truly personalized experiences, we needed to analyze customer data and predict the most appropriate products, advertising and merchandising. When a customer’s information, transaction history, and clickstream data are dynamically matched with available inventory and product information, personalized customer experience will emerge.

Customer information and business content are combined to create unique, relevant shopping options

ITERATIVE WIREFRAMING & PROTOTYPING

Early Sketches

Initial “concept wireframes”–

Through many iterations and refinements, we arrived at the two experiences – public and authenticated user – that served user needs the best while promising to positively affect the business bottom line.

Final thoughts

The users welcomed the changes, especially new personalization features. The personalized notifications panel, real-time order tracking, and the quick re-ordering options showed the highest level of user engagement. But those are just the interim results. The project is not finished yet…to be continued!