Yonder Nightingale
Reality is broken. Game designers can fix it.
— Jane McGonigal
 

A REDESIGN OF A GAME APP THAT FEATURES CHARACTER CUSTOMIZATION

Let the magic begin!
Wake up one day to find that the Great Mana Tree is dying. Help create the perfect potion to save the magical tree that upholds the entire land of Yggdrasil. Fight enemies, collect items, and find the perfect ingredients for the potion that will save the land!

 
Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png
 

Why redesign this app?

The original app was a one-day project from 2011. The result of this project was beaming with potential! However, due to the time constraint, I was unable to refine the design.

Back then, the focus was on two main screens: The over-world and the character customization. The original design was created with an iPhone 4 in mind and there were many inconsistencies in the interface and in the overall design of the app.

 

Objectives

Redesign the layout to fit iPhone 11

Create a simple and cohesive interface
for the various menus

Design diverse features for inclusive
character creation and customization

Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png

Before and After

Character+Creation-21.png
Character+Creation-2-2.png
overworldd.png
overworldneww copy.png
 

An update on format

The original design was from 2011. Because of this, I had to adjust the format from an iPhone 4 to an iPhone 11 and redesign the interface accordingly.

 
Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png
x.001.png
Untitled 2.001.png
 

I identified areas that could use improvement or refinement by placing the two example screens side by side to look for inconsistencies.

Users agreed that the original font color was hard to read, the screens felt crowded, and that the interfaces felt inconsistent throughout the game.

 
Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png
 

Designing the Interface

Once I saw the two example screens side by side, I noticed that they felt like two completely different games. Because of this, I set out to create an interface that was cohesive throughout the game.

 
starting.001.png
 

I began with the wireframes and immediately noticed that the shapes were too diverse. To solve this, I decided to combine both round and linear elements into rounded rectangles.

 
 
a lot.001.png
 
 

The game Needed a simple and cohesive interface

Once the main layout was decided, I started creating variations with high-fidelity models. By doing this, I was able to see how crowded the screen had become. This is designed as a tap-to-move game and because of this, the user needs more space on the screen. This is when I decided to have the menu and bag as a small pop up menu instead and minimize the HP and SP bars to crucial gameplay elements only.

 
Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png

Character Creation and Customization

Skin_Example.png
Hair_Example.png
 
We are all different, which is great because we are all unique. Without diversity, life would be very boring.
— Catherine Pulsifer
 
Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png
 

I gave users the freedom to be whoever they wanted to be. No labels necessary.

 
Character2.png
Character1.png

 There is no gender option. I want the player to choose features that they identify with. 

Later in the game, you will also be able to change clothes.

Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png

Designing The Backpack

 
Untitled-1.jpg
 
 

As you go through the various quests, you will find many items that can be synthesized into spells and potions. You can collect them into your backpack. The backpack also went through a few changes before finding a cohesive solution.

 
ss+copy.png
 

My thoughts

Results, reflections, and insights

Consistency is key. Anytime that the process became complex, I was able to rely on my components to create a cohesive design.

There is always room for improvement. No design is a final design.

Sometimes, you have to wear all the hats. A game is a large project to work on by myself. I gathered a lot of feedback from users and designers.

 
Screen Shot 2020-09-29 at 6.20.35 PM 2 2 2.png
 
 
Title copy.png
 

This mobile app will help you track and interpret dreams

Sueños is a dream tracking app inspired by the Taíno stories I was told back on my home island of Cuba. Until about 150 to 200 years ago, most people kept track of and shared their dreams. In this app, Luna will not only help you journal your dreams and nightmares, but will also help you interpret them.

 
lunastars copy.png