Reimagining the Cities Skylines UI (and a smidge of UX!)
This case study is in no way affiliated with Paradox.
As a personal project to further my Game UX and UI skills, I chose a game familiar to me where I felt that I could make adjustments to and iterate upon the UX. In no way shape or form do I feel like I am improving someone else's design - they spent years on their product and have the data that drives the interface! I am simply a designer exploring the realm further.
Before getting started, I needed to do a few things. Analyze the game's current UI, and find documentation or research that may exist around the game or its genre. It's important to gather this kind of fundamental research to study as early as possible so you understand what kinds of improvements may actually benefit the User Experience of your final design. We could simply make changes to the interface, but that's only going surface-deep.
I started this project in hopes there was some information behind the motivations of their team's game design floating around - and there is! You can check out this GDC video from 2015 talking about the making of Cities: Skylines. This was an important find for me in order to understand the developers.
I had a few major takeaways from this talk:
Overall, this talk gave me a much better perspective about the original intention of the game. Although it did not go into specifics, I was able to utilize the points given as a jumping off point.
Let's start at the beginning of the journey. After downloading on Steam and opening the game, a Paradox launcher will appear. It looks as if this launcher is intended to have other games listed - but from the other Paradox launchers I've seen, I wasn't able to find proof of that.
The launcher itself provides you 3 major pathways: Resume, Play, and ADS. You can do other minor things such as mess with your account settings, but these are ancillary.
The first thing I noticed was the frosted panel effect - this style of UI does not exist in the actual game, and it clearly meant as a Paradox style since the rest of this launcher doesn't match. However, I used this panel as inspiration throughout the rest of the design.
This led to the above design. I wanted to leave room for the beautiful skyline to show, while still emphasizing are two actions (Resume and Play) with one having priority. Ads can still be seen - and, taking inspiration from other various game launchers, this was a great opportunity to explore microinteractions. In this way, we are bringing a whimsicality to the experience before the user is even in the game.
The beginning of the design system STARTS at the launcher. Thus, consistency is key. The frosted glass would continue to be a mainstay as a neutral backdrop so that options and data could be present clearly.
Upon opening, we are greeted with much information about the game and its related content. You've got lists, a newsfeed, logging in, AND the main game actions.
The #1 thing I wanted to address with this is the compacted information. Things grouped together are considered related in their mind - in and in this scenario, there is hardly a sense of hierarchy with all the options.
It's clear the middle panel is a list of main actions based on its positioning and color differentiation, but there might be different ways to organize the side panels.
I started this journey with a heavy gradient approach mixed with frosted glass - it was interesting and new (While also addressing the baseline obstacles I wanted to tackle) but was still heavily inundated with information that didn't feel necessarily relevant to see on landing.
The following was designed by me and set up in Unity by me.
Although it was great to experiment in Unity and realize my design - I wanted to work through the rest of the designs in more detail with a new aesthetic. Thus, the frosted glass panel made an appearance.
Click to Enlarge
Again - microinteractions are key to game design. Whimsicality, joy, and atmosphere begin even before the player opens their save file. You want things to feel responsive (<400ms if possible!), smooth, and actionable. Everything that is hovered on that CAN be interacted with should provide some kind of feedback even before clicking.
of course, the introduction experience is important. But most importantly of all is the in-game interface! Using the design system, interactions, and principles we used thus far, I attempted my version of a new in-game interface for Cities Skylines. Let's start with taking a look at what exists now:
Right below, you can skip the training arc and see the final product! Click on the image to see a small slideshow. However, how did I arrive to these various design conclusions? Let's continue to break down these choices in the following sections.
Click to Explore!
For the main city panel, I wanted it to be reduced to its most necessary functions:
- The percentage to next city level
- The time of day
- Settings
- City Name
- Speed Toggle
I took reference from other games I spent a lot of time on in the sim genre that also had similar panels. These features seemed most relevant to each other, and should be away from the building (yet, not too far).
The building and zone tools were my biggest obstacle. I wanted to reorganize them in such a way that OBJECTS were not placed alongside city and terrain modifiers. Thus, I kept the data-heavy information on the left, modifiers in the middle, and buildable objects to the right. I would love to test this new organization if I were truly working on the project!
While they worked, I found there to be some structural inconsistencies with the building pop-up panels. I love the usage of data visualization to power the numbers behind a household, however I felt that they were "stickered" on with little consistency between features.
As a final bow to tie up this case study, I wanted to take a good look at one major modal - the budgeting panel. This panel is a great example of some of the most complex and data-filled panels in the game, which was a perfect undertaking for this case study.
In general - the modal clearly communicates what it needs to in the original design in a straightforward manner. What was ideally needed where was consistency with my personal design, and a little bit of structural change since there was 1 level of sub-navigation available.
As a Senior Enterprise designer pivoting to the games industry, I find in-depth case-studies such as this to be integral to the process. Studying games down to their minute detail, finding specific pain-points from research or personal experience, then iterating and executing on high-fidelity UI are incredibly important for this new journey ahead. I hope by reading this case study you've gained some insight to my process and perspective when it comes to Game UX. Thank you for reading!
