website

Online Videogame Store

2019

CLIENT

Client Name

As a keen gamer, one of my most frustrating things to find when I visit a video games site is the plethora of games and devices that are aimed at me, despite them knowing nothing about me. I’m not interested in the games and offers on the platforms that I don’t own, similarly, there are many genres I also have no interest in.
‍
Generally, you’re made to trawl past platforms and peripherals that you don’t even own so I wanted to approach the design in a way that prioritises games for the individual gamer, and something that made your average retailer less about the “sale” and more about care.

With that in mind, my goal was to create an immersive, online shopping experience catered for the gamer, not just the consumer

Homepage

Assuming the user is already logged in, the home page is catered to the user’s platform, preferred genre & previous purchases. The initial page first includes preorders to keep the user up to date on when their favourite games are released and just as importantly, when they’ll be charged) while further down we show the latest games and latest reviews, again, based on what we know about them.
‍
This is also supported visually through the coloured borders on the cards — blue is PS4, green is XboxOne, dark grey is PC & red is Nintendo — in this case, only red and blue are seen which indicates that these are the only platforms this particular user owns and is interested in.

Although this is exclusive on the homepage, we can’t remove it completely given that the user could be buying it for someone else, so a product page would be the exception.

Product Page

The product page prioritises the imagery and key information by using a large header that cycles through different product-related images. The structure of this page is meant to feel familiar, feeling more like a “review” site than a product page.
‍
Beginning with all the key information at the top, I broke it down into sections the average user would consider before reading on, for instance, a user may ask; is it a genre I’m interested in. Does it have a good rating from other gamers? Where can I find more information? This is all in an effort to save the user time, even before they’ve read anything about the game. A brief description is followed by 3 more valuable pieces of information — the original release date, the fact it’s an online game only, and that it requires a subscription to PS Plus in order to play.
‍
Given that the site is catered towards the individual gamer, the user preferred platform is already selected, and a peripheral that links to the type of game — in this case a headset for a team-based game — is displayed as a suggested purchase. This ensured that it wasn’t simply spam such as “others who bought this product also bought ‘x’ product” and instead, was something much more bespoke.
‍
We also allow the user to navigate between the different types of purchases you can make that directly relate to the product. This entire page and it’s function provides full immersion in the product itself, meaning the user never needs to step away from the page to find more information, search for merchandise, a different edition or available bundles. The purpose is to make the user feel that we have everything they need and that their interests are a priority.

Navigation

Generally, eCommerce sites tend to have a navigation bar at the top which either scrolls off the page, or remains positionally static as it sits on top of the page. Something I’ve wanted to explore for a while is switching up the navigation menu and making it stick to one side of the screen, allowing imagery to extend higher up the page. By designing the menu so it sits vertically means it not only reduces the horizontal real-estate it would usually take up, but it also allows the menu to sit in the gutter where text and imagery tends not to sit.
‍
For the purpose of this project, I prioritised minimalism by using only icons and, although text can easily be added, it was core to the concept that the audience is familiar with what the icons represent.

Checkout

As an extension of the navigation bar, there’s a mechanic that pushes the bar out to reveal the account information, the basket and site information. This meant that I can completely remove the need for an entire page and allow this information to be accessed more directly and seamlessly. Additionally, you can go through the entire checkout process without so much as leaving the page — it’s done through the “pop-in” side bar.