hamburger menu
phone mockup

elastomania.com

Designing a new website for an existing 20-year-old game.
phone mockup

elastomania.com

Designing a new website for a popular 20-year-old game.

challenges

  • Designing a modern website, that will refer to the design of a 20-year-old game
  • 3-day timeframe for creating the website design and new branding
  • Working in the "game design stylistics", that was completely new to me

my contribution

  • I was the only designer in a small team.
  • I worked on implementing the website with one developer, and also coded some parts of the website.

tools

  • Photoshop, Illustrator, Figma
laptop mockup
I developed both the desktop and mobile version.
existing screens

analysing the existing website

  • The design is not referring to game's visual style. It’s also hard to understand what is this website representing.

  • “The old version” of the game is still the most successful but the website is guiding the user to start with Elasto Mania II, which is far less popular.

  • It’s hard to find the payment form. It takes 3 clicks and going through some inline links to find it. Also, the payment forms don’t look trustworthy.

  • The game has a great, active community organizing events but there is no clear information about it.

learnings from the competitors

Since I haven’t designed for the game industry before I looked at the competitors of Elasto Mania and some of the old games, to develop an understanding of design patterns in that field.

Dark theme

Most gaming websites use dark themes and lots of visuals from the game.

Bold typography

Very distinctive, geometric, bold typography appears within the gaming websites.

Videos

Videos showcasing the game flow are an essential part of most gaming websites.

what makes elasto mania, elasto mania?

The biker

The main character from the game.

Sharp edges

All maps are created using sharp-edged polygons.

Bright colours

The combination of neon green and dark blue is dominating in the maps.

first drafts & decisions made

One page is enough. The existing website had separate pages for every game version with very little content, no hierarchy and too much text. All this information could fit on a single page.

Highlight the most popular version. The oldest, but most popular version is on top and the website design is referring to its stylistics.

Videos for all versions. It makes it easier to understand the game, with previews next to each version within a single page.

Make the website design refer to the game. I used the neon colour and the sharp edges to refer to the game style.

Make it easy to buy the game. I placed visible buttons to purchase the games straight from the home page.

Highlight the community. A great advantage of Elasto Mania is its active community. I created a section with links to various forums, game battles and unofficial patches.

New logo. I quickly developed the logo, by tracing the bike from the game and combine it with the name, to give the current logo more identity.

website sketch
One of my first sketches

final design

video of the wensite
The implemented design can be found at elastomania.com

the results

It is still too early to say if and how the new design influences sales. However, the redesign was positively received among the existing users.

screenshot comments
Some of the positive comments from the community.