Game Store skin

Game Store site continues the series of skins for Pina. At the store design I used previous best practices as well as new game modules. I took into account and corrected the faults of the Lingerie Skin design.

In comparison to the Underwear site the Game Store is darker and manlier. With little changes it also can be used as a Book Store skin.

Let’s look at the skin in detail.

Home page

The Home page is the face of the online store, so it concentrated all the basic features. Easy interaction with the products is one of the major tasks that had to be addressed.

Price and purchase buttons are hidden from the user by default, so as not to distract him from the presented products. As the covers of games speak for themselves and can be easily recognized, their description is also hidden. When the user hovers a cursor over the panel it becomes visible and the user can make a purchase in one click.

Adaptive version of the Home page

main-page_adaptive

Catalogue

The Catalogue page is made on the pattern of the Lingerie skin catalogue. But instead of the filter sorting the underwear on several important parameters the Game skin filter at the top of the page sorts only according to the game categories.

Several lingerie options like size and color are replaced by Assembly as some of the games include standard and collection editions and the store might sell them as PC and consol versions.

Adaptive version of the Catalogue

catalog_adaptive

Product page

What other functions shall it have? One of the main functions is introduction into the game. Such popular games as GTA don’t need any description as they are sold by over the billion, but with Indie games it is necessary for the visitor to have the opportunity to get acquainted with them. We would never have known about such masterpieces as the Stanley Parable but for the grapevine. That is why comments are so important in their promotion. Their design includes the opportunity to describe positive and negative sides of the game.

The visitor can read the description, look at the game screenshots and videos and decide whether to buy it or not.

Adaptive version of the Product page

product_adaptive1

Cart

Online stores offer a great variety of Cart sections.
Sometimes it is an independent page, sometimes it is combined with Checkout and sometimes there is no cart at all and visitors purchase on the fly.

Working at different project I practiced all three variants. In this case the Cart is a separate and independent element.

Stylesheet

The page follows the proverb ‘The devil is in the detail”. Well-developed styles can serve the project long after the designer has made his/her final touches.

Every team can decide whether to work through all small pages independently or assemble them from style blocks. In any case every project has its styles.

styles-1

styles-2

styles-3

styles-4

styles-5

styles-6

styles-7

404

404 is a favorite page of designers as it gives the opportunity to use their creativity.
Selected 404 Best Practices is as popular search query as 40 Examples of Minimalist Websites.
Where else can you place a sad kitten, Eric Cartman or Big Android?

In this project 404 page is a standard one used for Pina’s skin range. If you haven’t found the necessary page it offers to go to some interesting products. But it also has some flying icons. At first the icons were supposed to be designed with Parallax effect as to fly with the user’s mouse movements.

Design

The Game Store allows combining my work and my hobby. While developing the store we used the general structure of the Lingerie Store with some units changed and elaborated with account of the game theme.

Creating personas

To select the units to be changed or kept the same let’s have a look at main personas.

Kolya Seleznev, 30

person_1g

Seasoned gamer, playing since 9 years old when he was first bought a computer. He likes different genres, but prefers RPG / Adventure games and tracks all the novelties in the field. Game addiction has not prevented him from making a career and he is ready to spend a part of his budget on the hobby.

Problem:

Game market is so vast that it is difficult for Kolya to follow its new entries but for heavily promoted ААА projects and to choose a worthy product.

Solution:

Redesign the section of recommendations and novelties to facilitate the game selection process for Kolya.
Add a section with popular indie games on the landing page. Kolya may get tired of delights and bugs of the latest ААА-games and appreciate a breath of fresh air while playing ‘Papers, please’ or ‘Stanley parable’.

Peter Ivanov, 24

person_2g

Plays mostly network games but is tired of playing Dota and wants to find something more interesting. But he doesn’t have so much money and therefore he doesn’t want to spend it on expensive ААА-games. He is not ashamed of pirating most his games. Although Pete is a pirate he spends a lot of money on game clothing and keys to treasure chests. Otherwise he cannot win.

Problem:

Peter doesn’t have money for games but wants to play.

Solution:

Show information about promotions and this may wake up Peter’s conscience.
Add the option of buying game currencies such as SimPoints for Sims and others.

Masha Fedorova, 15

person_3g

Has been playing since 9 years old. Her favorites are Sims and SimCity. Her parents supply her with money but it is not always enough for Sims. So Masha is looking for game collections and promotions.

Problem:

Masha wants to buy a set consisting of a base game with several additions at the lowest price. But it is difficult for her to choose among variants available.

Solution:

Some games do have numerous additions and bonuses which come in the variety of sets. It is sometimes difficult to handle such diversity. So we add the option of choice and description for game collections for the user to navigate freely in game set variety.