HOME?

Designing Kid-friendly, Global, UI for an.IO game

Last year, I worked as concept artist and designer with Deemo Games on Battlefields.io. We spent about 4 months developing the design and visual direction for this project.  


Discovery

We had a clear direction for the interface and visual design for Battlefields.io: Flat design, kid-friendly, and familar interface. We began the design process by sketching out the basic ideas and a few rough design elements with reference from popular .IO games.

Intial concepts were intentionally broad, and not meant to be representative of the final game and UI design.


Identifying Goals and Outcomes

Our goals for this project were to design UI that would be easily understood in any language, using minimal text and clear visual signals. As the visual designer for this project, my role was to guide the artistic direction of the interface, environments, units, and assets.

Key Features Included:
-A way of tracking the units each player has on the screen
-User info UI, showing EXP, MP, and Level
-Customization screen, including a stats interface, battlefield selection, unit customization.

Design

We began sketching out ideas for units and towers, that would set the tone for the rest of our design vision.

After settling on a Medieval knights theme, we began developing UI elements. Initial UI elements were limited to bars and numbers. A large portion of the playerbase was based outside of the US, so the game needed to be just as accessible for a Russian player as an American player with minimal or no explanation of the purpose of UI elements. The UI design became a little more developed with the inclusion of EXP, MP, Levels, and UI for reloadable items to aid gameplay. However, we ultimately stepped away from these intial designs, while keeping the unit and tower designs for the sake of gameplay.

"The game was designed to be procedurally generated. assets were created in-browser through Canva and generated anywhere on the screen during gameplay to create unique maps for each player"

We stepped away from the pixel and overly plastic look of the first mockups, to make the game more appealing for older players

The game was designed to be procedurally generated. The assets were developed as stand alone objects that could be created through Canva and generated anywhere on the screen during gameplay. Battlefields.io is a very fast paced game, due to this during the design process we had to simplify and remove many of our initial designs to keep the browser running smoothly on all devices.

The last sprint of the design process was spent on developing alternative designs for the maps, unit, and tower design. I designed Viking, Samurai, Snow, and Desert themed alternatives for different player screens.



Results

Battlefields.io launched successfully last spring and is available to play online. Below are the final screen mockups that would serve as the inspiration for the design of the final product to be developed.

We removed majority of the UI elements for gameplay screen and focused them towards the home screen where players could customize their units, environments, and stats.

Mockup of the User customization screen, the yellow cards were created to select player environments and unit types