Dino Tracker is an app promoting the Jurassic World movie from Universal Studios. It earned 7 billion+ media impressions and collected thousands of AR dinosaur pictures and videos on social media.

Client

Time

9 months
12.2021 - 08.2022

Tools

Team

UX Designer (Me)
3 product managers, 5 engineers, and 2 UI designers

Achievements

4.2/5.0 in App Store (180 Ratings)

Dino Tracker

Introduction

Outcome

Traditional AR Placement

Pain point:

The AR object appears from nowhere and it is not natural enough for spawning dinosaurs.

New AR Placement

Solution:

Users scan a footprint first, so they don’t see the moment when dinosaurs are placed in AR.

How was it created?

This case study explains the design process.
Let’s find dinosaurs around us!

Define

There are technical and narrative requirements from Niantic and Universal Studios

The technical objectives and narrative direction are defined at the very beginning of the project. These are referred to throughout the entire design process of the project.

  1. Technical Requirements - Niantic

  • Semantic detection shows 2D masks of certain semantic channels on the camera feed.

  • The game-board enables AR objects to move around on the 3D ground mesh with real-time occlusion.

Tech 1: Semantic Detection

Tech 2: Gameboard

2. Narrative Requirements - Universal Studios

Users will act as volunteers to report dinosaur locations. The player will explore their surroundings without tasks or obligations to discover dinosaurs.

Avoid: Task/ Game

Goal: Fun/ Explore

This is a promotional experience for the Jurassic movie, which means the target users are the Jurassic movie fans.

Target users are Jurassic movie fans who want a way to be enrolled as part of the movie and check out dinosaurs. After interviewing them and following them on Jurassic movie forums, a typical target user wants a way to adventurously learn more about their favorite dinosaurs.

How might we create an immersive realistic experience for players?

How might we design an explorational experience instead of guiding users by game quests?

How might we collect a lot of user-generated content from users?

Ideate

The basic user flow for this app is:
Search → Meet → Post

The user will use a tool to scan the space and detect dinosaurs, the system will check if the required environment is detected. If the environment is wrong, we prompt users to scan more, otherwise, the dinosaur will be spawned in AR to enable interactions.

UI Style

Early Stage Look & Feel

I worked with the UI designer to create the early-stage look and feel comps. These comps gave a general sense of how this experience will be like visually. As we can see, first users scan their environment and look for dinosaurs, next, after finding a dinosaur, there are several interactions and users can take pictures, and once the photo or video is captured, the system will encourage users to report their findings online.

Test

After testing the prototype, the dinosaurs were huge in size and felt unreal.

The AR prototype was far away from an immersive realistic experience. Dinosaurs were huge and could be stuck in walls or rooms if users found them indoors. However, it is hard to get users outdoors. How to solve this size problem became the next-step design challenge.

Problem Breakdown

  • Dinosaurs have different sizes, how to let users enjoy the experience both indoors and outdoors?

  • It takes too long to scan a big space. Will users drop during the scan?

  • If dinosaurs appear in front of users suddenly, will it be disruptive?

Indoor & Outdoor

The experience is more realistic outdoors, especially for larger dinosaurs. However, it is hard to get users outdoors and accessibility has to be considered as a constraint.

Scan

Users need to scan a huge space to spawn a huge dinosaur, in this case, this experience needs to be fun and intuitive so users don’t drop during this stage.

Spawn

To avoid placing dinosaurs around users like a 3D object, a more immersive way to spawn the dinosaur needs to be considered.

Iterate Task 1

A dinosaur matrix that lets users start from indoors, and encourage users to go outdoors by semantic requirements.

Common users start using an app from indoors where there is accessible Wifi, and it would be frustrating if the app experience relies fully on outdoor exploration. To solve this problem, the onboarding dinosaur can be found indoors, and other bigger dinosaurs require special semantic detection, for example, sky, grass, or water, which can only be found outdoors. When users get outdoors, dinosaurs will look much more realistic.

Indoor → Outdoor

/ Indoor

The onboarding experience starts with a small-sized dinosaur so users can enjoy the app without constraints.

/ Outdoor

When users are able to explore all other dinosaurs, the bigger dinosaurs will require users to scan grass, sky, or water to make sure that users view dinosaurs outdoors.

First, let’s check out the size of dinosaurs in AR

Dinosaur size is a critical factor in the experience. It is frustrating to let users spend a long time scanning without positive results. I explored the size of dinosaurs and picked several dinosaurs as S/M/L/XL dinosaurs.

Task 1: Indoor & Outdoor

Result

When dinosaurs are spawned outdoors, they look more realistic.

  • Users can raise a hand to feed dinosaurs.

  • Dinosaurs look at the clicker sound source.

  • Users play with the flying dinosaur.

  • Users attract dinosaurs with a laser pointer.

After usability testing, users were confused and frustrated by this design solution:

Revised solution: Collect all the dinosaurs

In the revised solution, the core game experience was changed from an exploration mode to a collection mode:

Users pick the dinosaur to track from the field guide home, and the required semantic is presented during the scan process. When the criteria are met, the picked dinosaur will be spawned in AR.

To compare the 2 approaches, I presented a user journey map to the client.

  • In option 1, users are more excited at the very beginning but they will lose patience with time, there is great surprise at the end.

  • Option 2 provides a more steady emotional experience. Users will not be confused but they will not be surprised either.

The client reviewed both options and valued usability over explorational narrative. Developers estimated efforts for both options and option 2 also won this round because of the simple logic behind it.

Original prototype: Scan to get a random dinosaur every time

In the early stage prototype, users start with a new scan every time they open the app. The design intention is to maximize the exploration experience. After scanning the environment for a certain time, a dinosaur will be spawned automatically.

Task 2: Scan

Iterate Task 2

Scan bar iteration

  • Target as a column

    On the left side, the target is shown as a separate column. And on the right side, the scanned environment is highlighted.

  • Target as a checkbox

    Add a checkbox on the top-right corner of the required environment.

  • Final Decision: Arrow & Checkbox

    Differentiate the styles of the size bar and semantic boxes. The size bar keeps growing and the required semantic box is checked after scanning.

Add a footprint scan task before spawning the dinosaur so users need to look down. When users are focused on the footprint on the ground, we can:

  1. make sure users don’t see the dinosaur spawned from nowhere

  2. make sure the user is at a certain distance away from the dinosaur.

Use a magic trick: sight distraction

Achieve living creature encounter

Avoid unrealistic 3D object placement

Dinosaur size is a critical factor in the experience. It is frustrating to let users spend a long time scanning without positive results. I explored the size of dinosaurs and picked several dinosaurs as S/M/L/XL dinosaurs.

Avoid 3D object placement/ movement/ rotation

Task 3: Spawn

Iterate Task 3

Impact

Total earned media impressions:
7,487,983,900

Users captured & uploaded videos

Users successfully spawned a dinosaur