Mont Blanc Cardboard poster image

The Making of Mont Blanc Cardboard

How we brought the ‘Monarch of the Mountains’ to your web browser

Ben Lyons-Grose

--

Mont Blanc Cardboard is mobile VR experience built by Phantom and Google Brand Studio. It’s not an app, like most VR experiences for Google Cardboard. This works directly from your web browser. No download needed.

If you’re reading this on your mobile, I heavily recommend you tap this link and climb the mountain. It even works without a Google Cardboard, but if you have one of those to hand, even better. You’ll get the full immersive experience.

This is the story of how we built it.

Mont Blanc Branded Cardboard

Apparently there are more pubs in York than there are days of the year. Not including bars, or even restaurants that sell alcohol. Just pubs alone. Good old-fashioned English ale houses.

It was in one of these pubs, that sometime in February, shortly after Mont Blanc Cardboard had launched, I was proudly showing anyone who was even vaguely interested — our Airbnb hosts who we’d met up with for a drink, my cousin, the bar staff, complete strangers — how you could climb to the summit of Mont Blanc using only your smartphone.

“It works in browser! You don’t even need to download an app! You don’t even need cardboard! Look!” And I panned the phone screen around so they can take in the view of the alps. “It’s using gyro!”

“So what did you actually do on this?” asked someone.

“Good question.”

I then had to try and explain what a strategist does. Which after a few beers is quite hard, so I just settled with — “I looked after the content. I wrote the script, told the story, and even went to Paris to meet Patrick Gabarrou.”

They all looked completely indifferent to the name. Apart from my wife, who had heard this twelve times already, and was giving me a look that said — you’re embarrassing yourself, dear.

“He’s the French guy who guides you up the mountain. The narrator. I met him in Paris. I had to go over there to record the script…”

I’m interrupted by the last orders bell, and it was my round, so I had to put my phone away and stop the story there. For now.

Before the climb

What became Mont Blanc Cardboard actually started life as more of a Mont Blanc desktop trek that also had a Google Cardboard spin off. The idea in its first incarnation looked a little bit like this:

An early concept for the Mont Blanc Trek, courtesy of Jamie Nicoll (Creative Director at Phantom)

Our original pitch was the next generation of the Yosemite Dawn Wall climb, and it spanned desktop, mobile, and Google Cardboard. A few weeks later, the brief had developed to focus primarily on Google Cardboard, which was actually a very good thing. It meant we could concentrate all energy on making the Cardboard experience a truly groundbreaking experience. It allowed us, in Creative Director talk, to “shoot for the sky”.

The first tasks were far less glamorous.

This was our first time tackling VR specifically for Google Cardboard, so our development team invested in plenty of research and technical scoping ahead of build. But a bigger issue was that, due to timeframes (Mont Blanc needed to launch in November to coincide with a larger event in Paris to celebrate Mont Blanc as a cultural landmark) we didn’t actually have enough time to even build it as a Cardboard app.

Mobile cardboard view

Our solution was to propose something that hadn’t ever been done before, but our development team believed could actually be built quicker than an app and within the tight timeframe: build Mont Blanc in browser. No download needed. Calibrated across all latest devices. iOS and Android. This brought a whole host of challenges that the dev team had to overcome. To go into a bit more detail, we had to render each panoramic scene into a 3D sphere environment and split that into a stereoscopic view. We used some great webGL (three.js) technologies to help us achieve this. Then each of the hotspots and actions had to be hand placed in each 3D scene to make sure they were geographically accurate, and also looked right in a cardboard viewer. On top of this, we used the HTML layer of the browser to create a HUD that provides users with other key information, such as coordinates, altitude, temperature, and heartbeat. Having the HTML layer on top of the 3D scenes really helped build on the sense of depth that VR already creates. Visual elements aside, audio was a monstrous task — especially as Android and iOS devices behave very differently. Playing multiple layers of audio in each scene — including voice overs, atmospheric tracks, event-based sounds, with synced subtitles in both English and French, across all the latest devices and software— was a huge technical challenge for the team to overcome.

The beauty of this project is that we were pretty much building the boat as we sailed it…

Content curation and UX

The other key task was content.

I’m always of the opinion — having been stung too many times on projects where you’re waiting right up until the bittersweet end to receive content — that having too much content is way better than having too little. Even better if you already have that content from the start of a project, which was the case with this one. All the visual footage of Mont Blanc and the surrounding massif had already been captured before we came on board. US film production company, Sender Films, had captured close to 30 amazing panoramic scenes of athletes doing their thing on Mont Blanc, and the Google Street View team also had 360 degree footage of the entire route up the mountain.

Run with Killian pano

We decided pretty early on that it made sense to use the famous Goûter Route as the basis for the navigation, but the difficulty then was deciding which footage we should use to tell the story, how we could involve the best of the special athlete shots, whilst keeping the UX intuitive. Early proposals for the UX journey had 6 to 8 stages of the route to the summit, and 25 special panos. We ended up with 5 Goûter Route stages and 6 athlete panos, although the rest can be viewed on the Mont Blanc desktop site.

Early UX map featuring most of the content captured on the mountain and surrounding massif
A pano that didn’t make it into the experience.
Another pano that didn’t make it into the experience.

In terms of the content detail, we took the same approach as we took to the footage — build up lots of content and then strip it back and refine it in the latter stages. We realised that on a cardboard experience, users simply aren’t going to stick around long enough to read lots and lots of text hotspots, no matter how interesting they are. With VR, the more there is to see, the less the audience remembers.

Sunset Jump pano with compass points plotted — key for design to dev asset handover

So 0n top of the visual footage that are the pieces of the experience, there are layers of different sound files (music, atmos, commentary, narration, custom SFX), text hotspots, image hotspots, and audio hotspots — across both French and English. In terms of sheer volume of content, it was a beast. How did we manage it? Through an epic content matrix that saved our lives many times over, especially when it came to the different sound files. Not only did this show the information architecture of the experience, including all the screens leading up to the first stage of the climb, but also detailed key HUD info in the HTML layer of the UI, such as coordinates, temperature, and heart rate.

Our epic content matrix
The layers of content in the experience were built out into each stage

With VR, the more there is to see, the less the audience remembers.

UI design

There was also a lot to think about when it came to designing the experience, especially with the UI. We wanted users to feel like they were climbing Mont Blanc wearing a set of smart ski goggles that feed you information as you climb. We also needed a way for users to navigate the experience without ever touching the screen, and we settled on a timed cross hair which you use to interact with icons(hotspots) in each scene. This brought with it a host of new challenges we had to overcome.

The key question we asked ourselves was: ‘How do we make it clear to the user what they are supposed to do and how they go about doing it?’

Mont Blanc icon legend

There are 6 different types of icons in the experience (discounting the flag on the summit to finish the experience and see your mountain stats). Some, such as the information hotspot and the audio hotspot are recognisable icons, especially if users are already familiar with Google Treks. Others, such as the athlete icon which takes users off to the special panos, required a little more thought and a bit of user testing to get right.

We experimented with several different options for the icons that move you up and down the mountain, and take you back to the Goûter route from the athlete panos. Following user testing, we came up with the solution of making these icons a different colour so they stand out, and also animating the ‘up’ and ‘down’ arrows to attract the eye.

Final icon for ‘Going up’

We also experimented with the loading map which appears when a user jumps between scenes. From a UX perspective, we needed to make it clear that you were moving up and around the mountain, and also give you context about where you’re being taken to next.

An alternative loading map with height scale

We tried several options, which included showing a height scale on one side, and a tooltip that fills from bottom to top to indicate loading, but we eventually decided to keep it simple. Highlight the route to the next scene to show the progression, and indicate with the same green colour the panos that users have already visited.

Final Mont Blanc loading map

To Paris

For me, there are two things that make this experience stand out as something that I’m proud of — and that’s on top of the fact that we did things that haven’t been done before to deliver the best experience possible.

One is the detail and depth we went into with the sound design to bring each scene to life.

The other is the inclusion of Patrick Gabarrou, your high mountain guide and narrator on the journey up to the summit, who really helped bring another layer of authenticity to the experience. As scriptwriter, the duty fell to me to head to France to meet Patrick and run through the script before recording it in the YouTube space in the Paris Google office. So one cold morning in November, I found myself on the second earliest Eurostar to Paris — frantically still editing the script on the train over a croissant and strong cup of tea. Patrick was being flown in from Mont Blanc, fresh from his latest ascent to the summit. I spent the first hour going through the script with him, fact-checking various bits and pieces, and marking which sections I needed his help with — namely what you can see and feel when you get to the summit.

Patrick familiarising himself with the script

I could speak no French (beyond asking the direction to the swimming pool), but fortunately, Patrick could speak pretty good English. So we managed, and I was able to give him enough direction for him to understand what it was we wanted. He was fantastic, improvising and generally improving the script by bringing his own ideas and personality to the whole thing — which is just what we hoped for.

Before I left, I asked him how many times he’d been up Mont Blanc, and his answer (around 5,000 times) completely blew my mind. But to him, it wasn’t anything special. It’s his day job. To risk death every day. To safely guide others up one of the most dangerous, accessible climbs in the world. “Benjamin,” he said before he left to go back to Chamonix, “just let me know when you are ready to make the climb for real, and I will take you up Mont Blanc.”

In the sound studio

The other part of the experience that I believe made a real difference was the care and attention that went into the sound design. We worked very closely with Across the Pond, and Jungle Studios to plan and capture this. Like our experience with Patrick, my brief that detailed the story of each scene and what we wanted to tell, only went so far.

SFX brief detailing the different layers

Cullum, our talented sound engineer, brought his own ideas to the table which helped to push this experience as far as we could. It’s Cullum that you can hear in stage 2 of the Goûter Route, Arete Du Goûter, warning of the rockfall, and some members of the team also made it onto the experience with a little cameo appearance.

Producer James in the studio practising his line “Give me some slack!”

In terms of the music, we settled on the opening piece pretty early on — the very otherworldy, almost space-like track that you hear at Tête Rousse, but it took a while to find a piece we liked for the summit.

When Phantom’s Creative Director (Jamie Nicoll) and I first heard the piece that we eventually settled on for the summit, we weren’t totally convinced by it, and earmarked two potential options, pending a decision. However, once we heard the music in situ, it just worked. I think I actually cried the first time I got to the summit, and the very Games-of-Thronesy music kicked in. We’d done so much to get there.

Learnings and recognition

We’ve been lucky enough to pick up two awards for the project so far — an FWA Mobile, and Best Interactive Design at the Design Week awards — but it’s not about the winning. Yes it’s nice to pick up recognition for your work, but I think the best thing to happen since the project launched was actually a meeting we had as a team about 5 months after the project wrapped up.

We all sat down in the studio with some sticky notes, pens, and a blank wall and discussed what had gone well, what hadn’t gone so well, and also a list of actions items. Ultimately, we came out of the meeting with an invaluable list of learnings to take forward into the next project.

Design Week Awards

The new medium

Back to the pub in York (by the way, if you’ve never been to York I suggest you go, it’s a beautiful city).

There was a reason I wanted to show it to everyone in the pub (and have shown it to everyone in more than just that pub in York since it launched). Simply — I’m proud of it, it’s probably the best thing I’ve ever done, and I’m proud of the whole amazing team at Phantom and Brand Studio that built it.

VR is such a new medium, and it’s an exciting one. There are no rules yet, and it’s down to us — the creators of experiences for this medium — to learn them and lay them down as we go. I was in LA several years ago and I was walking through Hollywood when I heard a really drunk (or just crazy) guy say as he looked up at the moon — “We’re not in a film, We’re not in a book. We’re not in a joke.” I wrote it down and later used it in a novel, but I was reminded of this guy and his words very recently when I was at the Cannes Lions Festival.

Cannes

We entered Mont Blanc into the Digital Craft category, and although we didn’t win a Lion, it was amazing to just see our work alongside the best of the industry in such an iconic festival. Talks from Google, Samsung, The Mill, MediaMonks, they all focused on VR and how it will transform our lives — whether through story, art, memory, distraction therapy, psychology…VR is a new medium, totally unlike any other. Books, films, jokes, plays — these mediums are very separate: from real life, and from the people who use it. They are just vessels, instruments that house a narrative. With VR, that’s not true anymore. With VR, the medium and real life, the medium and us (as creators and consumers) are closer than ever before. The link between us and the medium has become far more congruous.

We can now exist inside our medium. As participants in the story.

And that’s exciting.

‘The Making of Mong Blanc’ — behind the scenes video

--

--

Ben Lyons-Grose

Novelist ∆ Designer ∆ Head of Service Design & UX ∆ Advocate of Plain English, Hemingway’s iceberg theory, and the Oxford Comma ∆ Lover of tea, cats, and books.