Emirates: View from Above

Emirates: View From Above

Play video

You drag your cursor across the screen to spin a 3D globe, mirroring the childhood activity of spinning one with your hands and picking a location depending on where your finger lands. Based on this premise, users watch as the earth rotates and then stops on a random part of the world, such as Ireland or Vietnam. Welcome to Emirates: View from Above.

UNIT9 worked closely with Emirates and Boeing to create an interactive mobile and desktop site. Users can explore global destinations by watching drone-filmed videos from across the world.

If you rotate the globe slowly, you have the option to click on different location pins, each of which automatically play a preview GIF of that location’s video if you hover over it. 

If you click on the country’s pin, a film begins to play in fullscreen so that you can learn more about potential Boeing and Emirates locations.

The dark and light side of the Earth is set using the time on the user’s device so that the globe is accurately lit.

Art Direction

We went through a detailed discovery process to figure out how to best design the site. Our biggest challenge was balancing accuracy with visual style. For example, we based the globe’s spin on the actual direction of the earth’s orbit. 

We wanted to fuse tech considerations with artistic decisions, so we considered questions like: Does the camera rotate around the globe, or does the globe rotate in place? Does the sun appear when rotating, or only at the start of the experience?

The key to the site was the small details that create an elegant and engaging experience. Icons animate on rollover, the globe blurs when it spins and a parallax effect can be seen on the stars.

The 3D globe is made up of a number of different visual layers. Clouds move over it and a halo of light adds a luminous look. We also separated the continents and the water into separate layers, so that land looks like it is floating slightly above the rest of the globe, creating depth. A parallax effect can be seen on the stars when users spin the globe.

Sound

The site’s sound design makes for a more immersive experience. We worked closely with a sound designer to create warm, tonal sounds and enhance the pleasurable user experience. Sounds was essential in giving users a sense of exploration and wonder, balancing the scale of the Earth with the intimacy of of personal experience.

User Experience

The site is fluid and intuitive, and users do not have to click much before watching a video. They have the freedom to spin the globe in whatever direction they want, so that they can watch videos for specific places they’d like to travel to.

Transitions within the site take place subtly, so that the experience has a very natural feel to it. The globe blurs when it spins as well as when the user zooms in to click on a specific location pin. This effect mimics the eye’s lack of focus when an object moves in front of it.

We ensured that the GIFs on the location pins began with the first frame of the accompanying video, making for a continuous experience. Users can also zoom in and out of the globe at the click of a button.

Tech

The visually rich experience was built in WebGL. The site runs across a large number of browsers and devices. It works beautifully, rendering full 3D and all visual layers on the latest mobile devices – taking the rich experience beyond desktop. We created a fallback solution for users on older browsers, so that they could still enjoy the experience with static renders as opposed the the fully dynamic 3d globe built in WebGL.

Although many assets were involved in the making of the globe, the experience is light and easy to use. The site uses a YouTube API to run Emirates and Boeing’s location videos. We also built a flexibility CMS for the site, which allows the client to add locations to the globe as they please.

Visit Page

Credits

Awards