bar-img

Back

Brand

Iron Maiden Legacy of the Beast

Project

Compendium

Summary

Navigator games, a studio based in Vancouver B.C. they work directly with Iron Maiden band to develop Iron Maiden Legacy of the Beast game. The game is the #1 rated mobile RPG with high rating (4.7/5) in Google Play and Apple App Store.
Players requested a wiki (dictionary) site where they could find various information about all characters and items. This was implemented using WordPress, and loaded inside the game.

main-phone-mobile-img
main-phone-img

My role

Research, UI UX Design, Graphic Design, Front-end Development

Team

Marketing team, Game design Team, Dev Ops

Tool

Design: Photoshop, Invision 
Development: WordPress (PHP, Javascript, HTML, CSS, AWS S3, etc.)

Project

​The Compendium initiative with goal of easy access and search while players are playing the game.
I did visual explorations and design. Also, I developed the pages by using WordPress.  

time-table-img

Initial meeting

I had a meeting with the game design team and the marketing team to understand project and find out what kind of things players are looking for. The top priority was fast loading time so players can quickly open it inside the game.

Challenge

The biggest challenge was thinking about different users and their interactions: players and in-house maintenance users.

For players (Design)
checkmark

Fast page load time

checkmark

Limited images and use text with HTML

checkmark

Clarity & readability

checkmark

Accessible depth

checkmark

Easy to access each screen 

In-house maintenance users (Functionality)
checkmark

Easy to maintain

checkmark

Anyone can learn fast how to edit content 

UI UX direction

The main project goals were to show the long content in an interesting way and make the page load fast inside the game. 

icon3
Search

Make it easy to use for everyone, everywhere

icon2
​Accessible Depth

Easy to access the detail what players are looking for

icon1
Clarity & Readability

​Easy to follow and easy to understand even though its long content

Research

Researched competitor’s games to find out now a day's trendy design for layout, and what kind of layout users prefers. (Downloaded competitor’s games, and find their wiki website) Created a deck to wrote down the pros/cons of the website and what kind of thing we can implement in our project. On the side, I started to create SWOT Analysis of RPG games for future projects.

research-deck-img

Research Deck

swot-img

SWOT Analysis

Wireframe

Once I had a solid design direction, I began to produce high & low fidelity mockups, which would then be converted into prototypes with limited functionalities. Used Invision to do flow test and functionality test with the team.

phone-icon

Mobile First

The entire page was mainly designed mobile-first (horizontal size) because the site needed to be loaded inside of the game.

wireframe-img

User Interface

The game has its own color scheme, so I did not have many options to choose the color. I tried to balance out the colors with items and images on the page. 

ui-kit

Flow Chart

​Link all pages on Invision, so the team can test its functionality before building the site with WordPress. Worked closely with game designers to improve screen flow.

flow-chart-img

Final Works

​​Worked closely with game designers to update the layout based on the new content.

final-works-img

Technical Goals

For players
checkmark

Fast page load time

checkmark

Accessibility (link pages together by icons, so the players don’t have to go back and forth to see the detail of character and abilities)

For in-house users
checkmark

Easy to maintain

checkmark

Anyone can learn fast how to edit content

Build structure in WordPress

The site is built by WordPress. The company wants to use a WordPress site because it’s faster than developing the site with plain HTML.
To increase loading speed, I used 1-2 plugins and wrote some PHP code.

​Started to build the flow chart with the WordPress hierarchy structure.
  • Archive > single-post > custom fields
  • Categories

Pain Point: someone manually uploads the content on the pages. 

wp-img

The solution

A new game designer joins the team and she is in charge of organizing the contents. She suggested uploading the file automatically instead of doing it manually because there will be more content coming up. I suggested to convert Excel file to CSV file and upload as JSON data source for WordPress. However, because of time restrictions, we decide to use the CSV importer plugin to WordPress.

solution-img

Continued optimization & maintenance work

​​Kept tracking users behavior via Google Analytics. Our team does a monthly meeting to discuss results and what are the things we can improve in the next update.

optimize-img