Empire Gaming is a British online game and software retailer providing digital download codes for games placed on leading platforms such as Steam, UPlay, and GOG.
From its launch in 2014, the company had been successfully running a webstore based on Magento 1. But to keep up with the rapidly growing user demands and competition in the UK, Empire Gaming decided to revamp the site in-line with the latest industry standards and trends.
In December 2019 Hemal Parekh, CEO at Empire Digital Group Ltd, approached us with the initial idea of bespoke Magento theme development. The idea was to create a new design and migrate the existing store to Magento 2. A set of new features to improve customer browsing and shopping experience were to be added in the new version as well.
However, during the presale the company’s business strategy changed. The new goal was to build a new Magento 2 store from the ground up, ensuring one-of-a-kind UI/UX design through bespoke Magento theme development, that would help the customer win its niche on the international market under the ‘Egaming.com’ brand.
With passionate gamers on board, Staylime has managed to build customer’s trust from the very first calls, having shared our thoughts and ideas on how to tackle the project in such a specific domain best. Thanks to our strong expertise in Magento 2 design and development and a competitive offer, the customer entrusted Staylime with the delivery of the solution.
Research and ideation
Having worked in the ecommerce area for years, Staylime understands how important it is to make the design an integral part of the brand, to ensure their cohesiveness and integrity.
As the customer already had a brand named Empire Gaming, we wanted to clarify whether the new style should be consistent with that of the existing one or we should create a one-of-a-kind design concept from scratch: it turned out that ‘e’ stood for ‘electronic’ in the name of the future egaming.com site, so we got the freedom of unleashing our creativity without being limited by the name and the idea behind the legacy brand.
The major challenge we faced was presenting loads of multi-level information in a way so that the site remained interesting and easy-to-navigate for gamers. Typical for the industry, online gaming stores usually feature media (promo images, video teasers, video gameplay, screenshots) and text content (descriptions, hardware requirements, genre tags, age restrictions, supported languages, publishers, release dates, reviews, DLC lists). Our task was to arrange all this content properly, ensuring availability and visibility of the key information and interface elements that facilitate decision-making, as well as intuitive and clear access to the secondary info sections.
To find the right solution to the challenge, we rolled out comprehensive research aiming to study the market both business- and technology-wise. The research was split into two directions.
Top players
First we analysed the industry itself and reviewed the top players and the best solutions available on the market.
Design references
Then we focused on the interface design aspect in order to get an idea of what’s on trend in this sphere, and what technological opportunities are yet to be uncovered.
After a thorough review and assessment, our team cherry-picked a few references we could take as a starting point and build our vision on. None of them provided a truly great experience to customers though.
The main goal then was to embed common industry standards and solutions into an unconventional design approach that would result in a breakthrough, high-converting project in the niche.
Concept and UI logic design
The first thing we wanted to address was the width of the main container on the site, as it lays the foundation for further layout and grid design.
We learnt that the majority of online gaming stores were based on a narrow ‘shaft’ in the middle of the screen for no apparent reason. Their site width was usually fixed at around 1000 px, which did not correspond to the modern standards at all.
As 80.44% of the target audience, gamers, turned out to have 1920 px FullHD and higher resolutions, our team decided to go away from the obsolete concept and design a full-width layout for the new website.
Working on the product page, we put the typical gamer behaviour pattern first to ensure smooth and seamless online purchasing experience to customers, which resulted in a unique, non-standard UI/UX concept for the industry.
Wide body container up to 1920px and eye-controlled layout
Prior to demonstrating the mockups to the client, the UX logic of the concept was presented. Having elaborated on the proposed layout approach and the aspects and findings it was driven by, Staylime covered a whole range of customer’s questions before they were asked.
Thanks to a valid rationale behind our vision, the logic was completely approved by the client, and only minor changes were introduced to the initial design concept.
The implemented UI allows visitors to get a clear understanding of a game and place an order in just one click, enabling them to make a purchase the moment they’ve decided to, this way contributing to higher conversion rates and sales.
The content flow is represented as a funnel, where information is arranged in the order that corresponds to its importance and impact on the purchase decision-making. It carefully guides visitors from the in-game experience all the way to technical requirements and authentic customer reviews to help them make up their mind on a purchase.
Product page
Consisting of three semantic blocks, the product page layout provides an all-round overview of a game from in-game experience, technical aspects, and purchasing stand-points. Though the description of each game is rather detailed and informative, it yet does not overload users with data as it is presented in simple, intuitive interface elements.
In-game experience
The first block features a common media content carousel with teasers, gameplay videos and screenshots, as well as titles and user reviews. Interactive and eye-catching, this content helps potential buyers to get a vivid idea of a game and the experience it brings.
General information
For more details, there is an information block covering all the game-related info such as name and description, important notifications, game summary, and technical requirements for different operating systems. To secure users’ trust and loyalty and facilitate their purchase decision-making, this block also outlines the store’s Trustpilot rating and unique selling points.
Purchase
The purchase block showcases promo images of a game, also specifying its price and discount, if any. Here users are able to add the game to their cart or take advantage of the one-click purchase. The certain edition of the game can be added to the wishlist too.
Apart from that, the block contains a list of available DLCs, making it easy for gamers to acquire extra content for the games they already purchased. Implemented as a sticky element, this block remains pinned at the top of the page so users can always see it as they scroll down. Having the key game info, including price and discounts, within their view, gamers can make the purchase immediately after having decided to do so without the need to scroll back looking for the ‘Buy’ or ‘Add to cart’ buttons.
Top menu
As the website features numerous sections and interface elements that should be easily accessible for users, our UX engineers decided to build a two-level main menu with each level split into corresponding semantic groups. The approach was also prompted by ambitious plans of the customer, since they wanted to extend the site with a host of new pages and sections in the future.
First level
On the first level, users can easily search within the site, choose the preferred currency, and log in/sign in with their personal accounts.
The search feature is interactive here: when clicking on the search input field, a list with the most popular search queries, as well as recent searches by a user, drops down. In case a user starts typing a query, the drop-down menu instantly returns a list of games relevant to the search query.
Second level
Being navigational at its core, the second level makes it possible for users to browse through both the key website sections (that are corresponding to the popular gaming platforms) and the secondary pages, such as ‘About us’, ‘Blog’, ‘Support’, ‘Wishlist’.
The key sections open up in the mega menu based on the Amasty Mega Menu extension. The menu contains a selection of the genres that are relevant for a platform, featuring the most popular games and their publishers.
First level
On the first level, users can easily search within the site, choose the preferred currency, and log in/sign in with their personal accounts.
The search feature is interactive here: when clicking on the search input field, a list with the most popular search queries, as well as recent searches by a user, drops down. In case a user starts typing a query, the drop-down menu instantly returns a list of games relevant to the search query.
Second level
Being navigational at its core, the second level makes it possible for users to browse through both the key website sections (that are corresponding to the popular gaming platforms) and the secondary pages, such as ‘About us’, ‘Blog’, ‘Support’, ‘Wishlist’.
The key sections open up in the mega menu based on the Amasty Mega Menu extension. The menu contains a selection of the genres that are relevant for a platform, featuring the most popular games and their publishers.
Mini cart
Here users can also access their shopping cart, which displays the number of already added items in a bubble. Built with Ajax, the cart provides key information on each product in it, also allowing gamers to either proceed to the checkout or edit the list right on the hover with no need of opening the actual cart page.
Search engine
The search engine, in turn, is based on Amasty Elasticsearch. Selecting the extensions for the project, we first match their capabilities to the technical requirements of the system so that to address them most precisely with no compromise on the functionality. Only when a feature checklist was completed, our experts analyzed the UI of each particular extension to decide on the ones that fit the layout we designed.
Design layouts
Some desktop pages
Mobile design layouts
Other challenges
How about drawing 100+ publisher logos in svg?—At ease, one by one!
Email layouts
Server transfer challenges
As we worked on theme development, the client decided to transfer the webstore from Siteground due to a number of limitations. For instance, Siteground hosting does not support ElasticSearch, neither it provides root-access for the installation. Since the solution was chosen as the search engine for the site, such a restriction became quite an obstacle for both the client and our team.
AWS, Nexcess or DigitalOcean were considered as alternatives, so we compared the options and shared pros and cons of each with our customer. Based on our findings and recommendations, the client opted for AWS as the most flexible and reasonable choice.
Results
Our collaboration with Egaming was nothing but productive and positive from the very first day. Thanks to customer’s enthusiasm and out-of-the-box thinking, we managed to create an exceptional solution the gaming industry has never seen before.
The website is live, and we’re looking forward to discovering its initial KPIs. With its unconventional, well-thought-out user interface and user experience design, the Egaming store has all the potential to compete with such giants as GOG and Steam.
