Starbucks coffee
journey from seed to cup
The
Challenge
Starbucks had recently opened its first Starbucks Coffee Farm visitor center in Costa Rica, where visitors and business partners worldwide will see and experience coffee throughout its journey from soil to cup.
Unfortunately, after the pandemic hit, in-person visitation was not an option. How could Starbucks Coffee Education make visitation achievable again? Our challenge was to create an online virtual experience in an all-new, immersive way from any part of the globe.
Avenue Code had partnered with Matterport, a 3D space technology primarily used in the real estate and architecture industries. Their built-in interface wouldn't fit this particular use case, so we had to figure out how to add an extra layer of interaction to their technology, adapting it to this specific experience.
.jpeg)
The
Process
I led Product Design and collaborated with a Product Manager, three Engineers, and a Motion Designer on this project. When I joined, one of my first challenges was to show the Starbucks team we had what it takes to do the work. Time was not on our side, and I had one week to turn the game around.
My first focus was to start researching for inspiration from other virtual experiences to understand best practices and what we could potentially achieve. I also studied Starbucks branding thoroughly. Hacienda Alsacia had its own branding personality, so I had to consider that too.
The engineers and I also dug into the Matterport tech to determine which features we could use, dismiss, or what we would implement ourselves.
Since the Starbucks team was having a hard time working with wireframes in previous conversations, my strategy was to design a high-fidelity prototype of a landing page and a video mockup to gain their trust. This would allow me to dive into more discovery work later.
Turns out it was a great call. After the presentation meeting, we had the Starbucks team's trust, allowing me to ask more questions and go deeper into the project's purpose. They connected me with internal staff, provided more content, and helped me set up user testing sessions with 8 different key Starbucks partners around the globe.
Since I couldn't do an in-person visit, I went through tons of different youtube videos and vlogs of people who had visited the farm to empathize and try to capture the feeling of being there.
The first
concept
Following my strategy to show the Starbucks team we could deliver the experience they expected, I went the extra mile. I threw in little special moments like a soundtrack, background video, and ambient sounds. Some of these efforts were changed or removed in the final experience. But they were essential to building the trust we needed within the project.
Welcome to
Hacienda Alsacia
The all-new virtual experience invites partners and customers to the Starbucks Costa Rica-based coffee farm and the global research and development hub. Choose your guide, go at your own pace and learn more about 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. It's designed for two main reasons: ensuring we provide the proper context to new users and show educational content about Starbucks' efforts around the farm. Additionally, since modern browsers block videos from being auto-played, a call to action was required so we could play the intro video when the experience started.
Choose your guide and explore the world of coffee
A quick tutorial shows visitors how to navigate the experience when they get inside. Floating 3d hotspots show them where you should go next, indicating the type of content with an icon. If visitors can't find the next hotspot or are in a rush, the wayfinding feature provides extra help, allowing you to quickly jump straight to the hotspot. By choosing Josh or Meli as their guide, they will follow visitors throughout the experience.
Explore the farm and unlock extra content
When visitors go to Costa Rica and visit the farm, they get a custom field journal with educational content. To replicate that experience in the virtual experience, visitors can unlock new chapters of the journal by exploring all the hotspots on the farm. This mini-game instigates visitors' curiosity, making them wish to unlock the next step. The journal was translated into 10 different languages. Visitors can also quickly navigate through the chapters by clicking on the Map icon.
The Impact
This project was featured in the Starbucks Stories blog worldwide and was translated into multiple languages. It received lots of positive feedback from key business partners worldwide.
The base UI components and interactions we created in this project were used to kickstart a new business opportunity for Matterport and Avenue Code to provide virtual experiences for Nasdaq and Tory Burch.
Key learnings
- Context is everything. Wireframes are helpful, especially in early iterations and when everyone involved understands their purpose. But in this case, the high-fidelity prototype helped me get the client's trust. Because of that, I was able to take a step back and take my time doing more discovery work. Learning how to adapt to my environment was vital.
- Know how to pick your battles. It's essential to learn when to do a tradeoff or when to double-down on something vital to the experience. Especially when working with an external client and your tech team.
- Be prepared & adapt. During user testing sessions, a participant used a laptop with touch-screen instead of a mouse or trackpad. I wasn't expecting that, and the prototype in Figma wasn't working properly. It's something I should consider going forward.
- Representing VR in Figma is tough. I tried a combination of videos and GIFs with Smart Animations to best represent the final experience. It served its purpose, but I would research for a better tool stack for these projects.
