Age of Espers Role-Playing Game

Project Description

Age of Espers was a casual role-playing game for mobile that allowed players to assemble their own team of fantastical creatures and battle with other players all over the world.

Project Details

  • Company: Kiwi, Inc.
  • Timeframe: 1/15/2014 - 12/15/2015
  • My Role: Develop the UI and UX of the game.
  • Platforms: iOS, Android
  • Tools Used: Photoshop, Illustrator, Flash, Spine, LibGDX, Mockflow Wireframe Pro
  Read More

Summary

Age of Espers was a free-to-play card battling game for Android and iOS. The game followed many of the conventions of the card battler genre but a key differentiator was its extensive collection of animated creatures and effects. My role spanned all aspects of UI and UX design as well as animating the introductory cinematic. I also had the opportunity to develop in-house tools that we used for art production and content generation. I worked with engineers, artists, game designers, sound designers, and product managers on this project.

Design & Discovery

Wireframes

I generated wireframes very early in the project to create a heirarchy of the entire game. I accomplished this using a combination of Photoshop and Mockflow WireframePro. I made the wireframes interactive so that team members could test out the user flow of the game for themselves.

Related Artifacts:

Ages of Espers wireframes created in Mockflow Wireframe Pro
Ages of Espers wireframes created in Mockflow Wireframe Pro
Rage of Bahamut and Guardian Cross
Rage of Bahamut and Guardian Cross

Competitive Analysis

This was an exciting project for me because I was already a big fan of card battlers. I played dozens of competitors’ games throughout the production of this project. I am well-versed in the genre and knew several ways that we could make our game improve upon the latest trends.

User Testing

It was important for us to understand how first-time players might take to this game. We would most likely be generating traffic to the title with cross promotion from other games, so we couldn’t assume that our audience was familiar with the genre. In our various playtesting sessions I was surprised to see that players often preferred the automated style of play. Instead of having direct control it appeared that players enjoyed watching the battles play out automatically, with the CPU determining the correct course of action. Auto battling was a feature well-suited for the platform and the play styles of mobile gamers.

Esper card design
 Esper card design
Animated combat demonstration made in Adobe Animate (Flash)
Animated combat demonstration made in Adobe Animate (Flash)

Rapid Prototypes

I developed and iterated several prototypes while working on this game. Many of them were animation demonstrations and some were interaction tests.

Related Artifacts:

Takeaways

What did you learn?

I learned a lot about creating prototypes and how I could quickly repurpose them to test out different ideas. I also learned a lot about animation, specifically using Spine and creating animations that run in real-time on a mobile device.

Related Artifacts:

 UI Tool Mockup
Popup style concept
 Popup style concept

Were there any insights from user research that surprised you?

I hypothesized during production that players would appreciate the depth of gameplay that we offered by allowing them to individually control each of their creatures. I was surprised to see that players preferred the automated combat.

What was the most challenging thing about this project and how did you overcome it?

We initially struggled with finding an animation solution for art and UI assets within the game. Our previous projects relied on spritesheet frame animations which were often memory and performance intensive. After we attempted our own solution an artist discovered the Spine plugin which was wonderful. We were able to accomplish so much more with our animation with that tool.

Combat demo sequencing
Combat demo sequencing
Esper ability button UI concept
 Esper ability button UI concept

What part of the design process did you particularly enjoy?

My favorite part of the project was creating the opening cinematic. We wanted to use this portion of the game to establish the story and explain the basic premise of the gameplay. I have two degrees in Telecommunications with focuses in TV and film production. I was able to employ my film production background in order to bring our opening cinematic to life.

Related Artifacts: