2018, Interactive designer @Mediamonks
Role: art direction, user experience, visual design
Cross-functional collaborations: Unity developer, user experience design team, illustration & animation team, creative directors and lead designers.

Google x Harry Potter - A history of magic

See project

2:2

General Overview

Creating An Immersive Journey In Augmented Reality

During my internship at MediaMonks, I got the great opportunity to work on Google x Harry Potter project along with our lead designer Kiegwan Leihitu. The idea behind this project was to create an augmented reality application which would be used for the Harry Potter exhibition at the british library. I worked in close collaboration with the UX team aswell as the art direction of the application.

globe

The celestial globe

Getting Started

Initial Problematic

Understanding The Context And The Current Situation

An interactive, fun and educational experience where we augment the Celestial Globe, letting the exhibition visitors discover the constellations that inspired the names of four Harry Potter characters. The British Library 200 years old Celestial Globe was too fragile to be touched. The challenge behind this was to think of a setup which could enable visitors to explore the globe without touching it.

  • The idea behind a globe is basically to be able to spin around it because of the way it is designed. It naturally occured to us that the best way to explore it was then to create an augmented reality application that the visitors could interact with. By bringing the globe into 3D, we could use it to swipe around and explore it by seeing all detailed constellations on it.
setup

Early sketches for device setup

The interaction concept takes in consideration the exhibition’s space and logistics. The four devices will be fixed within four small stands close to the Celestial Globe, maximizing the space available. The devices will also need to be powered, this can be done simply through the stand. This experience has been designed to be quick to use, keeping the flow of visitors around the exhibition. The augmented screens reward the user with animations and interactions that educate them with extra information about the constellations.

Digging into the subject

Establishing The User Flow

Taking into account that some of the visitors might not be confortable with using the new technologies. We had to make sure that every aspects to get started with the application was easy to handle. Therefore we based our process on 3 specific points :

  • Accessibility

  • Simplicity
  • Intuitivity

Bringing an easy way to explore the experience is necessary so each visitors can benefit from the AR experience offered by the globe. It is then necessary that we also plan our process based on this criteria.

flow

Ideation phase

Bringing The Constellations To Life

Understanding The Context And The Current Situation

Based on these 3 main points stated before, we tried to answer at how we could bring a better experience for the visitors. The concept we imagined included gestures and interaction with our application so users could replicate how it would have looked like to be able to spin the globe.

1

An easy way to help user quickly understand how the app works is by creating intuitive hints that will be displayed to the visitors.
These tutorial hints will help the visitors have a better understanding of the app.

2

Free navigation will enhance the experience: it is compulsary that the visitor has the feeling that he is seeing the constellations as it they were the one on the globe itself.The constellation background will be zoomed enough in order to fit correctly the screen for a better perspective. Directional buttons are guiding the user through his journey and giving indications regarding the names of the constellations.

3

Accessing the constellation should be easy, and this is how we made it so: when the user gets close to an interactive constellation or used the direction button, the view snaps to a fixed point in the middle of the constellation. One of the stars grabs the attention and encourages the user to tap on it. At this point the user is still free to rotate and explore the globe by dragging or tapping on one of the directional buttons.

4

Encouraging the user to interact with the application is one way to make him feel totally part of the experience: some of the constellations can’t be drawn within a single gesture, or are likely too large for the screen. We want to make the gesture simple and easy for every type of user. Therefore we thought of auto-completion steps to facilitate the whole process.


4

After a spectacular POOF, the constellation has magically come to life. The constellation animates on a loop, using a technique similar to cinemagraphs. Information about the constellation and the Harry Potter character named after it appear alongside the animation.

Inspiration and benchmark

Establishing The Visual Universe

After setting the whole user experience and flow, we started to gather inspirations, graphic elements and references allowing us to dive into the whole world of Harry Potter. I first began by trying to understand better the universe of Harry Potter: researching through the art direction of the movies and cinematics. After, I focused on the elements of the interfaces such as typography, borders, buttons, shapes. I got inspired a lot from game design so I could find elements fitting the whole mood I wanted to represent. 

inspMb

Design phase

Setting Up The Design Elements

type_1

Typography is an important part of the work, finding the right balance between the athmosphere and the way we showcase copy will have a great impact on the overall design. We tried to create UI elements that would fit the whole universe of the harry potter exhibition.

type_2
type_3
visualEle

Design phase

Final designs

1
3
2
4
5