Mutant Ninja

10-feet game experience

Mutant Ninja

I once worked on a similar project, but it is still NDA. So I decided to combine the knowledge gained from this project with the knowledge I acquired later and create this case.

Problem statement

The main objective of this case is to study the principles of UX and UI of a console game, in particular Playstation.
I also set my goal to figure out how to make the game exciting immediately for a group of friends, regardless of whether they play in the same room or from different countries.

Making the whole game is a very ambitious task, so I decided to focus on the core scenario of the game. For development, I chose the part where the player enters the game and goes into battle. This includes multiple screens, but many different user scenarios.

Scope of work

For this project, I did research by collecting data on other games.
I didn't start working on UI design as the goal of this project is to study the features of the games of the chosen genre and create the backbone of the game without developing the visual.

Research

My project is a free team game in the bright world of the future. It has both team and solo modes. And it is also possible to create your own maps for battles.
The game is primarily for consoles.
It also laid the foundations for the development of eSports.

As inspiration, I used the famous games with team modes and online play.

While playing these games, I highlighted the key points:

10 foot experience

Another angle of view on the screen. This makes it necessary to place the interface more compactly, for example, in the corner of the screen for the convenience of the user.
An interface in the corner means more room for beautiful surroundings and immersive opportunities.
Joystick - more options for transmitting information (vibration, sound, light).
It is necessary to take into account the peculiarities of the color reproduction of TVs.
Large distance to the screen imposes restrictions on buttons, texts and other elements minimum size.

Play with friends

Thoughtful team pvp modes (2vs2, 5vs5, capture the flag, football, resource gathering).
Play online or with additional joysticks connected.
No split screen when connecting several joysticks.
User generated content allows you to create special maps, mode modifications and unusual tasks for friends.

User generated content

Content gallery.
Editor for creating and editing maps.
Rating and award system.

UX design

For study, I chose the main case - from the moment you enter the game to enter the battle. This is a branching path, as the player can choose to go solo or join a team. Additional paths are formed due to the ability to switch to the mode of creating user-generated content.
There are several possible flow options here and I tried to figure out a few.

The "blue" flow seemed to me the most successful - it allows you to divide user flows into those who want to play and those who are interested in working with the user generated content editor.
After that, it was easy enough to work out a more detailed user flow to enter the battle.

I've been working on information architecture for the main screen.

Next, I started creating wireframes and an interactive prototype in order to test how convenient the interface is at this stage.

Prototype

The prototype was tested on several of my friends and after that I started working on the layouts - so far in black and white. This allowed me to focus on the functionality without being distracted by the appearance of the interfaces.

I started work on the wireframes with the lobby - the main screen of the game. First, I compiled a list of elements that must be in the lobby:
- avatar of the main character,
- "Add friend" buttons,
- Play button
- button for selecting game modes,
- 2 levels navigation bar,
- chat.

The next important screen is the Armory. Here the player equips different parts of the suit.
An important feature of the game is the ability to set several loadouts and change them before going into the battle.

Inputs

The game is console, which means it is very important to work out the input of information from the joystick. Since the wireframes of the screens are ready, we can make a button map for the Playstation gamepad.

Low-fidelity UI design

Having picked up the necessary layouts, I set to work on the visual component. The Dreamlike service helped me a lot with this, in which I was able to quickly create characters and environments. This allowed me to work without concept artists and 3D modelers, although the result is inferior. However, the generated images are enough to convey the idea and support the game's UI.

So I started to add UI design to the wireframes.

I found really useful to add mockups to the photos to check how does elements sizes works :)