Starbucks  June 2021

Starbucks Farm

Coffee Experience

Starbucks  June 2021

Starbucks Farm

Coffee Experience

Starbucks  June 2021

Starbucks Farm

Coffee Experience

Starbucks  June 2021

Starbucks Farm

Coffee Experience

Starbucks  June 2021

Starbucks Farm

Coffee Experience

Company

Starbucks/Avenue Code

My Role

Lead Designer

Timeline

4 months

Responsabilities

Design Direction

Research

Interaction Design

Visual Design

Prototyping

Overview

When the pandemic disrupted in-person visits to Starbucks' Coffee Farm visitor center in Costa Rica, our challenge was to create an immersive online alternative accessible from anywhere in the world.


Collaborating with Matterport, renowned for its 3D space technology, we tailored their platform to craft a virtual journey through Hacienda Alsacia. Led by a dedicated team, we aimed to capture the essence of Starbucks' coffee journey, from soil to cup, while aligning with their branding and Hacienda Alsacia's personality.


Through research, innovative design, and trust-building prototypes, we transformed adversity into an opportunity to bring Starbucks' coffee craftsmanship closer to partners and customers alike.

High Level Goals

01

Enable global virtual access to Starbucks' Coffee Farm, overcoming pandemic-related limitations.

02

Convey Starbucks' essence by showcasing the care in every coffee cup through the virtual journey.

Initial Challenges

I led the design and collaborated with a cross-functional team, including a Product Manager, three Engineers, and a Motion Designer. Upon joining the project, I faced the challenge of quickly demonstrating our capabilities to the Starbucks team, who entrusted us with a tight one-week timeline.

Research & Brand Immersion

My initial focus involved extensive research to gather inspiration from existing virtual experiences to identify best practices and potential achievements. Simultaneously, I immersed myself in the Starbucks branding, with a particular emphasis on the unique personality of Hacienda Alsacia. Collaborating with the engineers, we explored Matterport's technology, evaluating which features to utilize, discard, or develop independently.

Trust Building Strategy

Recognizing the Starbucks team's previous difficulties with wireframes, I adopted a strategic approach by creating a high-fidelity prototype with a landing page and video mockup. This decision was pivotal in gaining their trust and provided opportunities for deeper exploration and discovery.


The effectiveness of this strategy became evident after the presentation meeting, as it fostered trust within the Starbucks team. This newfound trust allowed me to delve further into the project's objectives. They facilitated connections with internal stakeholders, provided additional content, and aided in organizing user testing sessions involving eight key Starbucks partners worldwide.

I watched a lot of Youtube vlogs to see how in-person visitation looked like

Inspirations and Starbucks Branding

I conducted thorough research into both direct and indirect references of VR experiences, with a keen focus on comprehending the nuances of Starbucks branding. My secondary research encompassed diverse resources, including YouTube vlogs by tourists.

I watched a lot of YouTube vlogs to see what in-person visitation looked like…

Inspirations and Starbucks Branding

I conducted thorough research into both direct and indirect references of VR experiences, with a keen focus on comprehending the nuances of Starbucks branding. My secondary research encompassed diverse resources, including YouTube vlogs by tourists.

I watched a lot of Youtube vlogs to see how in-person visitation looked like

Inspirations and Starbucks Branding

I conducted thorough research into both direct and indirect references of VR experiences, with a keen focus on comprehending the nuances of Starbucks branding. My secondary research encompassed diverse resources, including YouTube vlogs by tourists.

Style-tiles mood boards are very effective in showing where a design came from

Crafting the Style Mood Board

Recognizing the brand's exacting standards, I designed a style mood board to effectively communicate my design process to the Starbucks Team.

Style-tiles mood boards are very effective in showing where a design came from.

Crafting the Style Mood Board

Recognizing the brand's exacting standards, I designed a style mood board to effectively communicate my design process to the Starbucks Team.

Style-tiles mood boards are very effective in showing where a design came from

Crafting the Style Mood Board

Recognizing the brand's exacting standards, I designed a style mood board to effectively communicate my design process to the Starbucks Team.

User flows were helpful to kickstart the story with the team

Creating User Flows

With the initial concept gaining approval, I crafted user flows to provide a holistic view of the project's flow. This exercise revealed disparities in the original concept, prompting the alignment of the virtual experience with the real guided tour's fixed path.

Eventually, we've removed a few steps...

Creating User Flows

With the initial concept gaining approval, I crafted user flows to provide a holistic view of the project's flow. This exercise revealed disparities in the original concept, prompting the alignment of the virtual experience with the real guided tour's fixed path.

I watched a lot of Youtube vlogs to see how in-person visitation looked like

Creating User Flows

With the initial concept gaining approval, I crafted user flows to provide a holistic view of the project's flow. This exercise revealed disparities in the original concept, prompting the alignment of the virtual experience with the real guided tour's fixed path.

I tested with 8 users across all continents

User Testing

Through user testing sessions, we discovered that users could navigate the experience with ease. However, feedback highlighted areas for improvement, particularly in refining the home page copy and section order, addressing user confusion regarding the page's purpose before the experience.

I tested with 8 users across all continents.

User Testing

Through user testing sessions, we discovered that users could navigate the experience with ease. However, feedback highlighted areas for improvement, particularly in refining the home page copy and section order, addressing user confusion regarding the page's purpose before the experience.

I tested with 8 users across all continents

User Testing

Through user testing sessions, we discovered that users could navigate the experience with ease. However, feedback highlighted areas for improvement, particularly in refining the home page copy and section order, addressing user confusion regarding the page's purpose before the experience.

The First Concept

To present the first concept, I went the extra mile to prove our capability to deliver the experience Starbucks expected. I designed a landing page that introduced unique elements such as a soundtrack, background video, and ambient sounds, some of which were adjusted or removed in the final experience. However, these elements were essential in establishing our trust in the project.

#1 Landing Page Concept

#1 Landing Page Concept

Using online footage, I created an edited video concept for the page.

Using online footage, I created an edited video concept for the page.

Using online footage, I created an edited video concept for the page.

Welcome to

Welcome to

Welcome to

Welcome to

Welcome to

Hacienda Alsacia

Hacienda Alsacia

Hacienda Alsacia

Hacienda Alsacia

Hacienda Alsacia

The resulting virtual experience invites partners and customers to explore the Starbucks Costa Rica-based coffee farm and the global research and development hub. Visitors can choose their guide, move at their own pace, and delve deeper into the coffee journey from seed to cup.

Get ready for your coffee journey

Before entering the virtual environment, users are presented with a landing page. This page serves two primary purposes: providing context to newcomers and delivering educational content about Starbucks' initiatives at the farm. Additionally, since modern browsers block videos from auto-playing, a call to action was implemented to initiate the intro video when the experience begins.

Choose your guide & explore the world of coffee

A brief tutorial guides visitors on how to navigate the experience. Floating hotspots indicate the next step and the type of content using icons. If visitors can't locate the next hotspot or are in a hurry, the wayfinding feature offers additional assistance, enabling users to jump directly to the next hotspot. Users can explore the farm alongside their companion by choosing either Josh or Meli as their guide.

Explore the farm
& unlock extra content

Visitors who have experienced the farm in person receive a custom field journal filled with educational content. To replicate this experience in the virtual realm, visitors can unlock new chapters of the journal by exploring all the hotspots on the farm. This gamified approach sparks curiosity, motivating users to unlock the next chapter. The journal was translated into ten different languages, and users can quickly navigate through chapters by clicking on the Map icon.

The Impact

This project garnered recognition in the Starbucks Stories blog worldwide and was translated into multiple languages. It also received positive feedback from key business partners across the globe.

The base UI components and interactions we developed during this project laid the foundation for a new business opportunity for Matterport and Avenue Code. This opportunity led to new virtual experience projects for Nasdaq, Tory Burch, and others.

+k

+k

+k

Visitors worldwide

+

+

+

Countries reached

projects

projects

projects

Were later based on this foundation

Integrated into Starbucks Training

The Virtual Origin Experience is now an integral part of Starbucks' shift supervisor fundamental training, enhancing the learning process for the next level of leadership.

Part of the Rewards Program

Starbucks Rewards members had the opportunity to earn NFTs by engaging with the experience, adding a unique incentive to the Rewards program and boosting member participation.

Key Learnings

My journey through this project provided several key insights.

Gaining Trust with High-Fidelity

While wireframes are valuable, in this case, a high-fidelity prototype proved indispensable in gaining the client's trust. This trust, in turn, allowed for deeper discovery work and adaptation to the project's unique needs.

Pick Your Battles Wisely

Knowing when to make trade-offs and when to prioritize critical elements is essential, especially when collaborating with external clients and your tech team.

Representing VR in Figma is Challenging

In an attempt to represent the final experience, a combination of videos and GIFs with Smart Animations was employed. While it served its purpose, exploring a more suitable tool stack for similar projects is a consideration for the future.

Be Prepared to Adapt

User testing can present surprising challenges, emphasizing the need for adaptability and quick adjustments when an unexpected situation happen.

Next Project

Shaping a Tokenization Platform for Developers

Next Project

Shaping a Tokenization Platform for Developers