Side project

Pro evolution soccer

User experience redesign

Brief

Pro Evolution Soccer (PES) is a series of football video games developed and published by Konami. 

I'm not associated with KONAMI in this project, this is just a portfolio concept.

Situation

Sometimes we get used to some things regarding to UI and UX. We use the same product over and over again that there may be certain things that we don't like but still we use them and feel comfortable.

In this project I want to highlight some screens of this game that could be improved in my opinion. I want to focus on the principal screen of the game.

principal screen

current issues

The interface in general is very boxy.

The initial screen mixes a card and a modular layout. I personally don't feel that those flat icons match with the main images and they leave lots of empty spaces in their boxes that could be used to enhance the visual aspect of the images to draw players interest. Besides that, there are too many tabs that could be removed in order to simplify the experience.

active tab - principal screen

Solution

This is a game for everybody, from kids to adults fond of football. 

I wanted to add more attention to images and contrasts. We'll feel more empathy seeing high-end images of the pitch, coaches, players and so on. This is not an app or a website, this is a completely different experience we'd like to have.

principal screen wireframe

layout

It would not make any sense if I decided to change the layout completely. I wanted to keep the modular layout as the escence of the game's interface but in a better way and also wanted to keep it simple, replacing the bunch of tabs to just the four main sections of the game: principal, match, competition, football life and extras.

I wanted to mantain the location of the principal buttons and the logo as well.

considerations

What we have here is the result of the new principal design. 

Now the images matches perfectly with the title:

  • Principal: it has the last activities we did.
  • Match. One can either play a new match with a friend or COM, online divisions, team play lobby. It makes sense to have a picture of a player in action.
  • Competition. Here we have the Champions League, Cup, Online Competition. It matches with the Champions League image.
  • Football life. This is the section for My Club, Master League and Become a Legend. In these modes one becomes the coach either managing a team or a single player, so it makes sense to showcase the picture of a coach in action.
  • Extras. Here we train, edit, see statistics, options and more stuff.

I simplified the way buttons are showcased in the home screen. The current layout leaves too much space in the boxes that can be uses with something more interesting and eye-catching. Also, there is more contrast in the inner sections as it is the main feature in the whole interface of this game. I kept that and the gradients, just used better.

Other screens

I made some designs for the pre-match, game plan and pause screen of the game with the same considerations I had for the home screen.

pre-match screen
new pre-match screen
game plan screen
new game plan screen
pause screen
new pause screen