The process of designing interfaces for the same game for two different platforms.

DS for Apple Watch
Check out the menus suggested by nutritionists, check the water consumption and eating habits list on your watch.

PROJECT
RPG Arcade - Mobile and Desktop

ROLE
User Experience / User Interface
/ Art Direction

DATE
2016

INTRO
Tiny force Mobile & Tiny Force Deluxe is a physics-based battle game in the best mix between slingshot with pinball and RPG elements. Just pull, aim, release and the mess is made.

I spend over a year working on the game as a Interface Designer and Art Director. I was responsible for HUD and User Interface art direction in the game. I was also responsible for the art direction style guide for marketing the game worldwide; this included branding, merchandise, digital and printed material.

Together with a talented team we created the menus, branding, iconography and visually cohesive graphic design experience that married the lush and beautiful world of Tiny Force.

 

My approach

Understand

This project was created from beginning to end with full team participation, so from the conceptualization of the characters, game type, worlds, all of this was written and discussed on the whiteboard at brainstorming meetings, so we could get started.

In the same way, we discussed mechanics and ideas that could be part of this new game.

Conceptualize

Through competitive analysis with games of the same category I was able to extract ideas and elaborate new concepts of user flows, features and interactions between and inside screens.

With the initial concept at the table, game designers could already work on monetization and gameplay systems.

wireframe

Wireframe

With pre-defined features, screen flows and systems, it was already possible to start with the navigation and gameplay prototypes, which I participated building the game user interface part and HUD (heads-up display).

With pre-defined features, screen flows and systems, it was already possible to start with the navigation and gameplay prototypes, which I participated building the game user interface part and HUD (heads-up display).

01_loading_ultra

Usability Heurystics, Interactions and feedbacks

Already with features, screen flows and pre-defined systems, it was already possible to start with the navigation and gameplay prototypes, which I participated building the game user interface part and HUD (heads-up display).

We also care about the navigation consistency, so that everything is instinctively accessible and connected, as well as the recognition of each interaction item. All of this has been documented in which some are represented by storyboard to understanding of the developers.

focus01

Focus Group,  Playtests , Usability Tests

In the game business, we're very used to writing games for ourselves, but as soon as your audience includes people who aren't you, you absolutely have to see how they react to it. Collecting feedbacks from both a general and niche audience is what makes a product more suitable and available to our audience something, or even more.

Deliverable Documents

I want to show some of the deliverables during my routine for the team to produce the project with the minimum margin of errors before the final validation. These documents are very important and can not and should not be disregarded in a creative portfolio.

Style guide - character select

character-assets2

Storyboard - finish screen animation

story3

Documentation and guidelines for interactions

story4

A few assets illustrated by myself

assets

First we produced the mobile version and then, following the same development process we created the Desktop version, evolved with the system of leaderboards and support for Versus for two players using joysticks. Here are the interfaces.

Mobile

mob_02-min
mob_01-min

Desktop

01.1 main-menu

Main menu / Leaderboard

01multi copy

Multiplayer lobby

01.1 store-real

Shop

02 character-select-multi

Multiplayer local

02.2 stage-select-multi

Arena select

02.1 character-select-details

Character details

04 map-1

Sigle player / level screen

04.1 map_menu

Main menu

04.1 map_options
03 gameplay

Gameplay HUD

03.1 finish-screen

End of battle

03.1 loading-screen

Loading

prev

Thank you!