Description

During my first year at North Kingdom I worked as a UX Designer on the second launch of the Hobbit, under the supervision of the UX Director and Creative Lead Alfredo Aponte. I produced the sitemap, user flows and wireframes for the whole experience, for both desktop and mobile.

The aim of the second launch was to promote the third and last movie of the Hobbit: The Battle of the Five Armies. This experience was preceded by a first launch from the year before, that included a CSS3 map of Middle-earth with five rich locations with an immersive WebGL experience each. The second launch of the project would include the complete map of Middle-Earth, now in WebGL, with all the key locations in the movies and paths from the heroes (both from The Hobbit and Lord of the Rings), five battlegrounds to engage in battle and the five rich experiences from the first launch.

The challenge

One of the biggest challenges in the project was organising all the content (interactive map, heroes’ journeys, locations, battlegrounds and richer experiences) into one single experience that had to be easy to use and intuitive enough for both fans of the saga but also for regular users that had little or no knowledge of the movies.

After a lot of iterations, the challenge was solved with a navigation that included a main menu for the users to jump between the three main blocks of content of the experience (heroes’ journeys, locations and battlegrounds) and the map so users could fully explore Middle-Earth.

Content structure

The structure of the experience was set after several iterations by defining a few different page templates to fit all the content we had.

Setting the structure allowed us to continue defining the navigation between the different pages, how the user would go from one place to another, and the different interactions available along the way.

Example of user flow for the Battleground section

Sketches and Wireframes

We sketched the layouts for all the screens of the experience, and kept iterating and exploring until we were happy with the hierarchy and distribution of the elements in the screen.

Sketches with several layout explorations of the Battleground main page

After sketching, we moved into wireframing where we continued iterating the chosen layouts to fine tune and polish every single detail, so designers could then take it into the next level.

The experience was built mobile-first and all wireframes were designed keeping in mind that the experience had to work perfectly on mobile.

Wireframe of one of the three types of locations in the map

Wireframe for the mobile portrait and landscape views of the Location

 

The Hobbit: A Journey through Middle-earth has won several major awards, including Site of the Year 2014 on Awwwards and The Cutting Edge Award on FWA.

 

The experience is still available online.