May 21st, 2025, posted in for_founders
by Adelina
Beamable is a major same server platform that helps game creators make & manage online games. They offer powerful game features and end-to-end prefabs for Unity, alongside a serverless game backend so that users have an easier time building their games.
As our first major gaming industry client, they came to us in 2020 needing a big design refresh for their portal, and frontend code to implement it. Their design was heavily outdated and users had a hard time making the best of its features.
Alongside a major design refresh, their portal needed UX improvements and better ways to display existing information, alongside new features the Beamable team often worked on.
So in this article, we’re going to tell you about how we tackled this project, challenges we had to overcome, and its successful state today.
How to do a successful redesign
Beamable already had some branding elements we liked. Their branding used tones of grey, purple and turquoise. Despite that, their portal design was a basic theme that didn’t reflect their visual identity. Most of all, at this point their services were split across 2 platforms and needed to be brought together.
The main issue we dealt with was the outdated look of the portal: it used a lot of tones of gray that felt lifeless, there was no variation in font weights, you couldn't tell what’s more important and what not, and it overall looked like a default template.
The first major page we worked on was an intro type of page that features all the games a user has. In this page, each game opens up a tree of development environments that game creators can add data to, test and then eventually push to the live game.
The original version of this page was rather bland: each game card looked the same and it wasn’t easy to quickly distinguish a game from another. So we added a pop of color and structured the game tree in a more visually natural way.
We used their main branding colors and switched to a more modern font, called Rubik. Compared to their original design, our new version added more white space, variety in font weights for readability, and clearer visual hierarchy. We also made the entire design brighter and more colorful and designed both a dark and light version.
The client was happy with the result and gave us useful feedback the entire time, so we moved onto other, more complex pages.
How to improve clunky, outdated UI/UX
Their outdated UI wasn’t their only issue. Some pages lacked life and visual hierarchy. The lack of colors made it hard to distinguish elements one from another, some headlines were unnecessarily large, and useful features were hidden away.
Their table pages felt stuffy and lacked structure. There wasn’t much color and it overall felt stale. So we took a user-centric approach and thought about what’s most useful for users to see: we changed some types of data into pills, and added an option to open a table row that shows more information.
This way, we added useful functionality without crowding the available space, and pops of color to brighten up the page and draw attention to important content. We also added filters at the top of the table.
Another page we redesigned was their Catalog Configuration page, which had a lot of clear issues. Text was overflowing, the alignment was inconsistent, some bits of text were too big, and it gave off the impression that someone randomly threw elements onto the page.
We did a complete rehaul of their Catalogue portion in order to improve user experience. Content is now in a list that’s much easier to browse (and the text doesn’t overflow), and settings open below each item. This makes it easier and quicker to update data at a glance.
Integrating new features into existing software
After we finished our main redesign tasks and sent them into development, we started discussing new features to add to the Beamable portal. The biggest ones were the onboarding and analytics dashboard.
At that time, they didn’t have a structured sign up process that truly helped users get setup. In the new version, users had the chance to set up their identity as a studio and create their game. Plus, the last step helped the Beamable team gather research information about their user base, with questions about how they’d use the portal and how they heard about the company.
Moreover, Beamable decided to add a new key feature to their portal: analytics. They wanted to offer users the ability to see how many players they had, revenue details, installs, player retention, and more.
We created a complex dashboard containing a series of info cards at the top, and a list of graphs that portrayed the data points they wanted to show users. We used a mixture of bar charts, line charts, and heat maps. All using their brand colors, to keep the UI consistent.
Aside from these, we also worked on smaller features and improvements, such as a way to schedule events within games, microservice setup & management, and in-game messaging features.
Alongside UI/UX design, we did a lot of backend & frontend work: as the portal was split between two different platforms, our devs found the best ways to integrate these into one, and ensure no key features were missed.
Our developers regularly work on bugs reported by users and small improvements on the interface, based on client or user feedback. Compared to its old state, the Beamable portal now works smoother and is more user friendly than before.
Challenges when working on gaming software
This project came with its own trials and tribulations. We were all familiar with video games, but not with all that happens behind the scenes: setting up in-game events, managing players, tracking revenue, managing different development environments and their edit history, and so on.
A big challenge we dealt with was understanding how this app works. The ins and outs, and why and how. So we spent time listening to Beamable’s team, we asked plenty of questions, and made sure we deeply understood the app we were going to work on.
Compared to other projects we’ve worked on, this is an app targeted to devs. So a big part in our workflow was played by working closely with our own devs and trying to understand their needs and priorities. They were also very helpful in explaining complex code-related concepts to the non-technical part of our team.
Another big challenge was having to deliver high quality designs & code fast. This was done mostly thanks to teamwork and to our team’s expertise and creativity.
The takeaway? Some projects can start small, with a few redesigns, and manage to scale up to new horizons you never would have imagined. Just like that, our collaboration with Beamable started small, but led into a years-long activity our team has learned a lot from.
Looking to start a new software project but not sure which way to go? Let’s have a quick chat and build a product roadmap together.
