Anestis Goudas
UI, UX Designer

Master Kick

A web-app for reminding us our childhood arcade football video-games

Master Kick

The web application

If it happens and you've been a boy that loved video games and especially Sports games, maybe you had the chance to play famous games such as ‘Pro Evolution Soccer’ or ‘FIFA Soccer’ series.

In this project, we've been asked to create and to revive a football (soccer) penalty shootout contest, as it was played back on the ‘90s, but in a more modern way. Arcade-style, modern play.

The Role: Art Direction, UI & 3D Design, Animations

Client: Mastercard
Agency: Steficon
Year: 2015

Master Kick

Processing the game, step by step

I devised the app into steps, so to have the control in each stage of building the application:

1. Building the 3D Figures

2. Animate the figures

3. Design the field of action

4. Deploy all above into the director's action stage

5. Testing the app with my teammates and beta users

Step 1: Building the 3D Figures

The first idea that came to mind was to use my 3D Design experience working with software like 3D Daz for making some of my past music-related, illustrations.

So, my first task was to create the male figures starting from the main shape and building the figure with its skin and eventually the soccer clothes that dress the player.

Considering the project’s timeline, I took the decision to build a player that looks the same but to differ in each soccer shirt & sorts, to give the player the ability to play with his favourite colour & team-related (see below). 

Creating the basic 3D main character in Daz3D  Engine

Creating the basic 3D main character in Daz3D  Engine

Reviewing the 3D main character from all side-views: All colours would be applied later in Photoshop

Reviewing the 3D main character from all side-views: All colours would be applied later in Photoshop

Step 2: Animation stage

Creating the animation of the player that shoots the ball and the goalkeeper, wasn’t difficult to build. With the assistance from the Adobe’s Mixamo engine, I felt readt to progress on the 3 animations for the two game's characters:

1. One animation for the shooter character and

2. Two animations for the goalkeeper (goalkeeping by the line and by top post).

Animated movement of the Goalkeeper character

Animated movement of the Goalkeeper character

Step 3: The main application

After creating the main core of the game, the other task was to create a design scenery to look like a Champions League game. So, we looked at Google Images to see UEFA’s official backgrounds, colors, texts, tables, etc.

We applied to all screens a similar design approach. I had in mind, that players love impressive backgrounds, not too minimal but with balance and clear options to choose from and play immediately. 

Step 4: Choosing a character

The user had the ability to see the front & back sides of his preferred player. Each color/player had a combination of some characteristics such as Shot Power and Shot Style.

The player had to write his name & surname, choose his favorite or preferred color player and play the game. No more, no fewer actions required.

Final step: Playing the game

The user, after choosing his favorite player by color, he had the chance to shoot 3 penalties, by using his Keyboard or by a swipe to the desired corner, if it was accessible through a mobile device. The user needed only one goal so to proceed to the next round and eventually the contest.

8
Days
42
Usability Tests
12.6K
Shoots
3.2K
Participants

Conclusion

It was and still is one of my favorite projects, as along with the team, I challenged to complete a product outside of my field of expertise, based on my user experience as a gamer and my knowledge of Digital Arts.

I thought solutions and ways to complete each task, step by step, by using what I know and can handle well. I think the game was a success while it was online, with hundreds of participants and very good feedback and comments.

It’s all about goals in everything we do, so I personally think it was a goal that achieved against a difficult opponent, such as time.

Master Kick

My teammates said about me

"
Anestis is one of the most talented designers I have worked with. He was one of the most valuable assets of Steficon's Creative Dpt. He is incredibly creative and really passionate about design. He has sophisticated taste, pays a lot of attention to detail and knows how to respond effectively to the client's needs.

His designs are always fresh, unique and on brief. He is diligent, he has a great capacity as to come up with problem-solving ideas, he is always willing to help his co-workers and fun to work with."

Ioanna Deimezi, Art Director of Steficon