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.
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.
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.
Visitors worldwide
Countries reached
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.
