SPONZA TREASURE

Overview | Stakeholders | Discovery | Define | Phase 1 | Phase 2 | Results

My role:
I led the UX effort, including game planning, prototyping, play testing, and the publishing process. I worked closely with our internal development team, a 3D designer, and the Babylon.JS and Microsoft Edge teams to overcome technical challenges.

A glimpse at the WebVR Demo

What is Microsoft Edge?
Microsoft Edge is the default web browser replacing Internet Explorer 11 and Internet Explorer Mobile. It was initially released in 2015 for Windows 10 and Xbox One.

How does VR work in general?
Virtual reality is a simulated experience that can either mimic the real world or function completely differently. VR devices use head tracking, motion tracking, and eye-tracking to provide an immersive interactive experience. Current applications tend to focus on entertainment and education.

What is Web VR?
WebVR is an open specification that enables users to experience VR in their browsers. The goal is to make it easier for everyone to get into VR experiences, on a broader set of devices. Users currently need a headset and a compatible browser to experience WebVR.

What VR device should we focus on?
The ultimate goal is to make the game available across different devices, but our initial focus was on Windows devices. When we started the project, the only available VR device on the market was the Oculus, so we experimented with it while waiting for the release of new Windows devices.

I led the discovery phase while working closely with our engineers.

What are some game examples?
We reviewed a few existing games to get an idea of how VR games work in general. Playing these games also offered some early inspiration for interaction and motion design.

What do we know about Sponza Palace?
The Babylon.JS team designed a 3D game environment around the real Sponza Palace, a rectangular building with an inner courtyard, built-in Dubrovnik, Croatia between 1516 and 1522. They made their original 3D environment available to use for our VR adaptation:
https://www.babylonjs.com/demos/sponza/

Who are the end-users in this project?
The game was scheduled for release at the Microsoft Edge summit and would be presented in various events supported by Microsoft that feature Microsoft Edge. People who attend Microsoft events come from a wide range of different backgrounds, but we focused on a few specific developer personas:

Build a WebVR game based on the Sponza Palace 3D environment, to be used in various events as a demo promoting Microsoft Edge. The game had to be engaging and interactive for the general public, but the primary audience were those who work in the tech sector. This project was divided into 2 different phases.

PHASE 1
Provide a short game experience for the Edge Summit in September 2017.

PHASE 2
Provide the full game experience for the Build conference in June 2018.

We kicked off the ideation process by developing a story set in the Sponza Palace. We conducted brainstorm sessions with the internal team to outline the game flow and write up a storyline to go along with the game.

Game story:
In the 16th century, a king and his two sons were killed while protecting the Sponza treasure. Their souls remained in the palace to continue guarding the treasure, but after many years, it is time to reveal it to the people of Sponza. The ghosts of the two sons work together to unlock the treasure.

PHASE 1 - Game proposals

The three different game proposals were presented to the client and Idea 2 was chosen, with some modifications.

We started with a short intro video to help set up the story of the game and I wrote the logic for single player vs multiplayer mode. I was responsible for the game flow, game logic, and interaction design.

PHASE 1 – PROTOTYPE

During Phase 1, we developed the game the be played with an Xbox controller. The game was timed, and the player had to move all the pots to their correct position to complete the game.

We focused on keeping the experience straight forward; the primary goal was to have a working game that allowed event attendees to experience WebVR.

I oversaw the work of a 3D designer, a visual designer, provided creative directions and guidance on the visual design.

PHASE 1 – KEY FINDINGS

Through Phase 1 launch, and from the greater Microsoft Edge team’s feedback, we identified a few things to update and improve. And because Microsoft is a global company, cultural and social awareness affected our decisions and allowed us to be proactive on potential issues.

· Buttons and messages needed to be more prominent to help guide the players
· We had to eliminate symbols and icons with potential religious connotations
· We needed a more inclusive character representation
· We added visual cues for controllers

Next steps
Before the full game opened to the general public online, we planned to incorporate:

· Web RTC tech to allow players to communicate and play together
· Non-VR mode to maximize exposure
· Compatibility for motion controllers and keyboard control
· Easy vs hard options

Game environment
To enhance the experience, we started by brainstorming possible elements to add to the scene. Partnering with the engineering team, we defined the following possibilities to present to the client:

· A water fountain in the middle of the scene. As the player gets closer, they would hear the running water more clearly.
· A moving animal, like a bird flying in and landing on the water, a frog jumping around, or a scurrying rat.
· Animated cloud movement.
· Puddles with reflection effects.
· King’s motion portrait (Harry Potter style).
· Dark mode.
· Fire torches and fire animation.
· Rain effects.

I led the brainstorming efforts, organized meetings, and work sessions with designers, engineers, and the project manager to narrow it down to two different ideas.

PHASE 2 – User flow
Through a few internal and external discussions, we opted to add the water fountain puzzle and include the Phase 1 game as a bonus.

A scoring system based on how quickly the game was completed.

PHASE 2 – Prototype

Since we needed to add in the different game mode and device options, we added the selection flow and some instructions. We also added a flyout menu to provide device and software support.

Phase 2 final game design
After multiple rounds of refinement, testing, and prototyping, we launched the final game. We decided to remove the backstory introduction video and focused on the gameplay. We also edited the flags to show the Microsoft Edge and Babylon.JS logo to enhance the partnership.

The player can review technical support information before they enter the game. Then they can select the number of players, device options, and difficulty level.

The player completes the water fountain puzzle.

In single-player mode, the player has to memorize the puzzle sequence.

In multiplayer mode, both players need to be in the correct position to see the puzzle sequence.

In online mode, players use Web RTC to communicate and solve the puzzle together.

After the water fountain puzzle is solved, players can choose whether to play the bonus game.

If the bonus game is selected, players can use their remaining time to move as many pots to the correct position as possible.

In Phase 2, we also added blue and yellow glows around the columns to help players identify where to pick up and place the pots.

Phase 2 was launched at the Microsoft Build 2018 conference. It was a great success and allowed Microsoft to promote the Edge browser while event participants experienced WebVR in a fun way.

Main challenges we overcame:

· The learning curve on VR development and UX.
· Early limitations in Microsoft Edge’s WebVR support.
· When the project started, the Windows devices were not yet available. We worked with a prototype for some of the testing and results were unstable; we relied on the Oculus for most of the early testing.
· Although the focus is on the Microsoft Edge browser and with Windows VR device, we also needed to make sure the game was compatible across different browsers and devices. At the time, there were new devices coming out and we had to work quickly to adapt to the market.
· We only had one 3D designer on board, complicating design resource scheduling.