Putting Ice Cream on the Map

Putting Ice Cream on the Map

Lessons from a viral ice cream truck in Japan. šŸ¦

By Sarah McBride

image

On November 1st, a select group of users in Japan opened Zenly to find an ice cream truck driving around Tokyo. 3 days and a few laps around the country later, the truck unlocked to unveil Zenly World ā€” an online merch store that we built for our most loving and engaged Japanese users.

The mysterious truck spilled over to social media as people screen shotted and screen recorded the new pin on their map. When the store unlocked, everyone wanted to know who was going to buyĀ the $14,000 5ft giant popsicle art pieceĀ (someone did actually buy it). On TikTok, the Zenly hashtag in Japanese surpassed 22 million views in just a few days. The truck also caused a spike in active users and friend requests, and grew the following of our Japan Twitter account by 4x.

We brought this project from conception to merch-selling ice cream truck execution in the space of 4 months. What follows is an overview of the challenges we navigated and the lessons we learned from building a viral brand experience directly in Zenly. šŸ¦

Zenly has a history of building joy-inducing user experiences. Someone once described Zenly as ā€œunwrapping a cool lemon pop on a hot summer dayā€. Every tap, transition, share card, line of copy has been crafted to create joy. So we knew that building a merch store, and putting it on the map, should feel no different.

There were 3 distinct experiences we had to build for:

  1. Putting an ice cream truck on the map ā€” The truck would first appear in ZenlyĀ with a countdown timer above while driving around Japan. 3 days later, the timer would disappear and tapping the truck would open a native web view in the app.
  2. Building an online merch store ā€” Once the truck unlocked, the native web view would load a custom Shopify store selling Zenly clothing and accessories.
  3. Coordinating fulfilment ā€” Once an item was purchased, we had to coordinate with our fulfilment center in Japan to send the package out to zenly.world customers, and create a physical unboxing experience linked to the digital experience.

The anti-ecom experience šŸŒ

H
How it started vs how itā€™s going. šŸ’–
image

This project required building an entire web experience from scratch, so we started with the online store. The core of the brief was to build an immersive and fun experience for users who already know and love Zenly ā€”Ā notĀ about building a dialled e-commerce experience. To bring this anti-ecommerce experience to life, we were fortunate to work with one of our longtime partners,Ā Makata.

The core of the design was inspired by the popsicle on a warm summerā€™s day analogy. Ice cream is our middle name and our app icon. We had toyed with an ice cream truck design in the past, but never found a place for it. This was the perfect opportunity to finally bring the truck to life.

T
The ice cream truckā€™s time to shine. āœØ

The store was built as a custom Shopify site, with the world view built in three.js. Although the majority of the traffic to the site would come through the native web view initially, we wanted to build a site that could live independently when accessed directly via theĀ zenly.worldĀ URL. That meant building a website that felt as native as possible to the app experience when loaded through the web view, worked great on desktop, and was responsive on mobile.

Putting ice cream on the map šŸ¦

T
The truck in the locked and unlocked state on the map. ā³

As clothing production and website development whirled in the background, we turned our attention to building the in-app experience. At the same time, we welcomed our new iOS intern: Seb.

Sebā€™s first technical challenge was to make the truck drive as smoothly as possible between the 6,000 GPS data points that we had painstakingly plotted for the truck to follow around Japan (side note: this is a great way to brush up on Japanese geography). To solve this, Seb had to interpolate GPS points between the ones we had already plotted so that the truck drove at a constant speed and to smooth out the transitions between each data point.

image

His second technical challenge was to ensure that the truck path would be synchronized between all devices, i.e every user would see the truck in the exact same position in Japan at the same time. To solve this, he created 2 timestamps: the current timestamp and another one as a reference. With that, we could calculate an index to know at which point in the path the truck should start from or be located on a userā€™s map.

As I come from a non-technical background, and much of the work was carried out remotely, building visual- and then coded-prototypes became more important than ever. We tried to ship something to our internal beta app every evening for a week so that we could all play around with it until it felt right, running through several iterations of the transition from truck on the map to opening up the native web view.

Make it fun, make it Zenly šŸ¤Ŗ

W
We went through a considerable volume of ice cream during this photoshoot on the streets of Tokyo. šŸ¤ 
image

At its core, this project was about building a brand experience, and so putting in place the brand and marketing foundations to support it. What that meant in practice was making sure every line of copy on the website, from the product descriptions, to the FAQ, to the checkout, to the confirmation emails, carried the Zenly tone of voice. It also meant building an influencer campaign with 50 of Japanā€™s top influencers, to launch in tandem with the store unlocking.

image

For the influencer activation, we created an influencer gift box, which required taking elements of the digital brand experience (the app, the truck pin, the website) and mapping them across to a physical brand experience (an influencer box stuffed full of Zenly merch). The additional challenge came with the lead times required to produce physical things (2 months given COVID delays) vs the speed at which we were building and iterating the digital experience (mere weeks). We also carried many of the physical design elements from the influencer boxes over to the unboxing experience for the end customer of the merch store. If opening Zenly is like unwrapping a popsicle on a warm summerā€™s day, we wanted to emulate that with our physical unboxing experience.

What the truck?! šŸšš

image

The truck went live on peopleā€™s maps just after 10AM, Japan local time, on Sunday November 1st.

Throughout the day, the truck was all over social media. We had the expected conversation: what was coming once the countdown timer concluded. But also lots of unexpected responses. We had users trying to reverse engineer the criteria for seeing the truck (you had to have unlocked the golden app icon). We had users wondering if it was linked to Halloween. We had users who banded together to see if they could see the truck on the highway after someone on Tik TokĀ claimed to have spotted itĀ ā€” and it went viral. We also had users who were scared of the truck, no thanks to our choice of a melody that played every time you tapped the truck in the locked stateā€¦that happened to be the same melody in a popular horror movie in Japan (šŸ¤¦ā€ā™€ļø).

U
Users took to social media to share their truck spotting attempts. šŸ¤”

Even when you think youā€™ve planned for every comms eventuality, people will always surprise you. We closely monitored the conversation on social and adapted our comms and support plan on the fly to respond to any questions people had.

Learnings with sprinkles on top āœļø

T
The giant popsicle found a new home. šŸ„°

After 4 months of intense work, it was over in a flash. The countdown timer concluded and the store went live. The conversation peaked for a second time on social, and people bought Zenly-branded clothes and accessories, including the one-of-its-kind 5ft giant Zenly popsicle art piece. 5 days later, it was all over.

Plans changed along the way, things broke, and some users thought they were in a horror movie sequel. But the learnings along the way were invaluable. Through this project, we took our brand and made it live in an experience outside of the app (and finally gave the Zenly ice cream truck the spotlight). From a technical standpoint, we learned not only how to put a moving truck pin onto the map, but also how to build a native web app experience with a website that behaves just like an app. From a brand perspective, we learned that some of our users are very enthusiastic about buying socks covered in poop emojis, while some prefer the basic Zenly logo look.

This project was one of many firsts at Zenly: the first time we built something specially for our users in Japan. The first time we put a pin on the map that isnā€™t linked to a user or significant place. The first time we built a brand experience that lives outside the map, but was integrated directly into it. The first piece of code that our iOS intern Seb shipped (2 weeks into the job). The first time I have PMā€™d something ā€” not just at Zenly, but in my entire career. And the first time we have sold a $14,000 5ft giant Zenly popsicle art piece.

In the end, I believe that our success in driving a viral conversation around the brand (and selling that $14,000 popsicle) was thanks to theĀ culture ofĀ build, ship, and learnĀ at Zenly ā€” and the opportunity to do it no matter what your job title is.

O
Or as we say here in Paris, merci. šŸ˜˜

Zenly was a mobile app that showed you a live map of your friends and family. Founded in Paris in 2014, Zenly joined Snap in 2017, and ran as an independent entity with millions of loving active users around the world. In 2023, Snap shuttered the app.