Colyseus Arena is a digital platform aimed at game developers seeking a fast and simple solution to online multiplayer integration.
The aim of this project was to update the existing framework to be a friendlier and more appealing version of Colyseus Arena, gearing more towards the vast array of game creators
Challenges included transforming numerical data into digestible visual data in forms of graphs, charts, and functions. A goal was to make clear the platform’s process, reorganizing pages, and simplifying spreads.
I was the lead designer for this project, directing a team of engineers and developers to the final digital product design.
How did we get here?
The original product was clearly aimed towards people already familiar with game servers. It showed everything you needed to know, but also everything you didn’t. The popups were confusing, the sign-up process too vague, and it was unbranded. The design was cluttered, unclear, and needed a facelift.
*Click to enlarge
Competitors
Other products in the same vertical and functionality lacked the approachable nature that Colyseus Arena aimed to have. There was ample opportunity to innovate within the game server space.
Rebranded Design
Colyseus Arena — Digital Dashboard
1. Overview Dashboard
One element missing from the original design was an area of overview. A page where you can see all your data at once, monitor all your customer billing, and get a visual aggregate of all your game creation. This design gives all that to the user in a softer, easy-to-digest dashboard.
2. Modular & Minimal
Each widget is modular and responsive to its location. Creators can customize layouts at a push of a button. Minimalist design gives data users need and nothing more, unless prompted.
3. Color
The ability to view data easily with spurts of color was a key element to my design. Customizing applications was a new idea that givers the user quick access to their desired app.
Sign-in
Sign-in and account creation should be clear and concise.
*Click to enlarge
Application Landing
This secondary overview page shows creators all necessary information in an accessible and clear way. Badges (RUNNING + SUSPENDED) alert them to games that are live, and a real-time CCU count monitors their servers.
Application Manager
Inside each app is the ability to color customize, rename properties, and execute various in-game functions. To the right, active data are in accordions for space management, and each widget is customizable.
Popovers & Notifications
Popovers follow a clear brand system — desirable bright CTAs, consistent dropdowns, and subtle titles.
Plans & Subscriptions
Each payment plan is color coded — Student Plans (black), Developer Plans (purple), Production Plans (blue), and Add-ons (orange). Within each plan, hosting tiers have become familiar to the creators, as they have recognizable icons associated with each.
Student Plans
Developer Plans
Production Plans
Add-ons
Design Library + Handoff
Each page was handed off to developers with a component library and text styles/labels.
Dev Handoff — Component Library
Text Styles
A future-proofed platform facelift with consistency in mind.
*Note: Colyseus Arena was sold and returned to the original creator in 2022. It is now a different product, and this refurbished design system does not today exist.