Gateway.gg
Gateway.gg was a server hosting company that specialised in selling subscriptions for game-specific servers.
This page provides insights from the process of designing, building and managing a web-based server host provider.
All visual and UX work was done in Figma by myself.
My work
Entreprenurial Project
Product Management & UX Design
Duration
From Aug 2019
Until December 2024
The backstory.
Overview
While playing videogames, our online-friend group found increasing frustration with the process of setting up multiplayer servers, where we could play together. There were companies who offered alternatives, but they all to some degree had the same set of issues.
After a while, we decided to join our talents and efforts to create a better solution, having experienced the difficulties ourselves.
In doing so, I took the responsibility of managing the project, while designing and prototyping a viable digital solution. This included designing a website, an order-flow and a UI for managing gameservers on a web panel.
Our goals
Streamlined user experience & order process = more accessible for users without technical knowledge
Most server hosting companies built their services using a combination of pre-made tools, which made them confusing for users without technical experience. Based on customer interviews, this made potential customers feel like server hosting was reserved for “tech savvy” individuals.
Additionally, speaking with other companies in the industry, server hosting companies would typically spend countless of hours on customer service, in order to help guide their users through their product configurations.
We hypothesized that we could improve the user experience and make the technology more accessible for consumers without technical knowledge, appealing to a broader market. Reducing the many hours spent on customer service could furthermore reduce costs along with negative customer experiences, giving us a competitive advantage.
Hero Section
Using Figma, I started designing the website and management panel along with planning the user experience we wanted to create, testing together with user groups as we went.
Most of the time, the user already knew which type of game they wanted a server for. Therefore, displaying the games on the hero section of the website made the most logical sense, prompting potential customers to configure a server.
In this process, many versions of the headline text were written and split-tested, with a focus on highlighting the main customer pain points.
Product Packages
The process of configuring a gameserver can be quite complicated, as there are many factors to take into consideration. The user has to decide on several key points in terms of hardware, location and more.
To simplify the user experience, we prepared pre-made packages that highlighted the most relevant info to the user. Through user conversations, we discovered that the users were mostly interested in server memory capacity (RAM) compared relative to price.
Server setup
After choosing a game and serverpackage, the user would be prompted to configure core aspects of their gameserver, like game-version and location.
The team decided to develop the management panel and server setup on a single-page web application using the coding language “React”.
Firstly, it improved the user experience by increasing app-responsiveness, loading the whole application at once. This allowed for quick navigation without having to reload each page.
This would also let us easily develop cross-platform in the future by making a mobile React-Native and native desktop Electron app.
Additional Config
To simplify the configuration process, “more technical” settings were hidden behind openable menus. Additionally, server location was selected by default based on the user-device location.
Users with more technical knowledge would be able to configure every aspect of the product, while less technical users could skip past steps of less importance.
User Creation
Throughout testing and continually developing the website, Google Analytics showed an increase in conversions when placing the user-creation & login screen after the configuration pages.
Users consequently preferred configuring their desired product before committing to creating an account.
Additional effort was made to provide log-in options relevant to gamers specifically, such as Discord and Steam.
Payment Plans
For the final step before checkout, users were presented with different subscription plans, as this was a highly suggested feature.
Results
We hypothesized that a streamlined user experience and order flow would make the product more accessible for less “tech-savvy” individuals.
Many conversations with customers indicated that people chose our services due to how easy they felt it was to set up a gameserver.
This would mean our initial hypothesis was accurate.
Creating a web-panel for managing gameservers.
The content below seeks to provide additional context for how our team designed and developed the server management panel.
Layout
To manage a gameserver, there is a set of core features required.
Users must be able to:
Interact with the server console, to run commands.
Track hardware statistics.
Start, stop, restart and shut down their server.
Manage serverfiles.
Configure game-specific settings.
Even though there are many more, these were the core features required to manage a server on a web panel. As seen in the picture, effort was made to make all these features accessible through the side-panel, for easier navigation.
Factory Reset
In an effort to decrease customer-support cases we added a “factory reset” button to the web panel. Clicking this button would reset the customers server back to its factory setting.
This turned out to become one of our most used features, as non-technical users could experiment with configuration, without the fear of corrupting or somehow destroying their server.
File Browser
As previously mentioned, existing businesses in the market used pre-made solutions when making their products. Users would therefore be required to use an FTP connection when accessing their own server files.
To make our services accessible for non-technical users, we decided on creating a fully functional file-browser on web, removing the need for FTP connections entirely.
File browser features included;
File uploads & downloads (including drag & drop from desktop).
File deletion.
Drag & drop file movement.
Folder & text document creation.
Single-file download.
Zip & un-zip files support.
Project conclusion
After some years and succesfull sales, our group decided to shut down the company, and pursue new startup projects with our complimentary skills. The reason for the shutdown was primarily high market competition, along with up-front hardware costs eating into profit margins.
More images from the web-panel are provided below.
Additional Images
Additional images
