Massive congratulations to MediaMonks for winning SOTM February with Umami Land, thanks to everyone who tweeted and voted, the winner of the pro plan in our directory is at the end of the article.
With the aim of introducing people to the delightful diversity of Japanese food and its philosophy, we created a virtual theme park that educates people on Japanese dishes that go beyond sushi and ramen. The free-roaming WebGL experience features culinary attractions that showcase Japanese cuisine—with links to Google Search results that give users the lowdown on which local restaurants might serve it.
The Moment
With Google Trends showing a global rise in searches for Japanese food and takeaway orders, Google saw an opportunity to introduce people to the tasty universe of Japan’s food culture, known as washoku. But while the initial idea was based on attracting tourists in the Land of the Rising Sun, the pandemic and its effects on international travel presented an unforeseeable challenge that prompted us to come up with a new alternative.
Reshaping the original concept, Umami Land was born as a free-roaming WebGL experience that features craftily illustrated and animated artwork and drives Google Searches in APAC while also being accessible from anywhere in the world—helping users learn about and taste Japanese cuisine.
Users tap on the hotspot to choose the search option and find out more about the dishes.
As a bonus, being available on both mobile and desktop and in multiple languages not only expanded our reach, but also helped support a larger group of local takeaway restaurants that users were directed to via Google Search.
To help visitors remember the many dishes that they find in the park, they're given a downloadable guide.
We put so much love and attention into every single square centimeter of our theme park to make sure every landscape, every attraction that we're bringing to our visitors is really authentic to washoku traditions.
Maria Biryukova, Sr. Creative at MediaMonks
Crafting the World of Umami
Much like with any in-person theme park, we started with the park’s design. First, we collected a list of the best, most delicious dishes and researched their authentic look and feel, as well as the philosophy behind them.
Then, we materialized our learnings by turning each food selection into a different area within the park. The landscapes were inspired by food, with deliciously designed constructions and architecture that showcase different washoku dishes. Each environment is tailored to build interest in discovering which dish is represented in each attraction.
For instance, Main Rice Street became the main lane because it was inspired by the core ingredients of Japanese cuisine: rice and beans. Here, visitors can find dishes containing those ingredients, as well as sides that are commonly served together—such as pickled vegetables and mushrooms.
The rest are Sizzle Yokocho, a bustling street-food market packed with protein-rich dishes (and named for the narrow Japanese alleyways crowded with bars and restaurants); Long Valley, the adventurous land of noodles, ramen and soba; Sweet Kingdom, which encapsulates delightful, squishy and fluffy Japanese desserts; and Savory Bay, the underwater area that features dishes with ingredients fresh from the sea.
We put special effort into making the theme park as visually appealing as possible in a progressive way: the more you search, the more vivid the world around you becomes, which reinforces visitors’ urge to continue searching and get more out of the experience.
At the same time, we wanted Umami Land to be fun not only for those who were there to explore different food options for dinner, but also for visitors in “gaming mode.” Therefore, we designed around a use case for each and introduced “a-ha” moments that gave purpose to every single search through a bigger narrative and overall goal. We also implemented gamification components such as collectibles waiting to be unlocked, as well as side challenges to increase engagement.
Technology Behind the Park
Umami Land is the result of an exciting mix of 2D illustration, 3D animated elements (in fact, a whole theme park of them) and its implementation in a custom WebGL framework. Our biggest challenge was to bring the static 2D illustration of the Umami world to life by adding stylized 3D objects, making them work together as one cohesive environment and transforming them into an animated world.
Instead of making frame by frame animations in 2D, we opted for 3D elements to safeguard the easiness of the user experience with fast loading. Moreover, we had to ensure a flexible approach that allowed us to easily move, edit and change elements in the 360 environment without having to redraw specific parts from scratch every time something changed.
To do so, we went for a pipeline where the illustrators were working closely with 3D artists and creating a mix of 2D and 3D assets with matching textures to build the right composition of the world. As a next step, the WebGL developers would turn all non-animated objects into a big, single 2D sphere with the 3D animated elements on top.
To connect Umami Land with the real world, we focused on integrating Google Search in a natural way to elevate the experience and bring an additional layer for the user to explore. We used deep links to redirect the user to a particular item page in Google Search related either to knowledge cards or taking to a selection of nearby establishments.
For the UI on top, we heavily relied on Vue.JS, which established a perfect connection with our own WebGL framework. To combine the two, we leveraged GSAP & Lottie animations, which helped integrate every element for a seamless web experience. We managed all the content within the application through Google Sheets and their API. Now, Umami Land is hosted on the Google App Engine to ensure everything loads fast and can be updated quickly.
Thinking About the Future
We truly believe in the power of education through entertainment and technology. With Umami Land, we helped change people’s perspective of Japan’s food culture across borders, and we’re looking forward to building more innovative experiences for brands across the entire digital spectrum.
About MediaMonks
MediaMonks is a global creative production company that partners with clients across industries and markets to craft amazing work for leading businesses and brands. Its integrated production capabilities span the entire creative spectrum, covering anything you could possibly want from a production partner, and probably more.
Thanks for tweeting and voting, @Molorak you have won the Pro Plan, DM us on Twitter to get your prize! :)