Design Headaches from Hell: User Interfaces, Icons, and Neumorphism
Ever tried to design the UI of a business simulation game? Here’s how we did it.
By Kunal Oogorah, founder Visionaries FZ LLC, an Indie Studio that creates business simulation games that inspire, entertain, and educate. Currently working on Business Heroes: Food Truck Simulation.
Hi, thanks for stopping by to read our very first development log. In this edition, I thought to highlight some of the team’s challenges in developing a User Interface that works for the game and the progress we have made.
To give you a little perspective, I will do a quick overview of the game. Business Heroes: Food Truck Simulation is a single & multiplayer, turn-based food truck simulation game. The goal is for players to fulfill their entrepreneurial dreams by building a successful food truck company that sells burgers and drinks. Players begin by choosing a capital city to play in. Then, armed with a single food cart, they pick a location where they intend to start their business.
Each City has seven locations, and each locality has unique customer segments with different population sizes, needs, and purchase preferences. To succeed, players must grow their business by making smart decisions based on weather and economic conditions, customer preference, unexpected occurrences, and stock cost/availability.
Developing a User Interface that would fit the game was tough. As we brainstormed, it quickly became evident to me that this was going to take longer than we anticipated.
Due to the goal of the Business Heroes Series, we wanted players to focus on the game’s management and business decision-making side. So, we decided to go for a 2D environment within the game. Players can change locations and can only move in preselected locations within the game — their customers, however, enjoy much more mobility.
We sacrificed the typical tycoon style building and extensive 3D navigation for the ability to provide players with an expansive view of the data they would require to strategize and make more business-related decisions.
This sacrifice quickly produced two new and significant UI design challenges.
The first was to ensure that the players don’t get lost or confused with several different decision-making popups showing up on their screens. Although we are aware that our players would probably appreciate a level of complexity in the UI, because games like Stellaris, Oxygen Not Included, and Europa 4 have very complex UI systems, I still thought we should tread carefully.
We eventually decided to streamline it to a very functional UI designed in a way that allows players easily navigate through all the decision-making processes. A pointer in this direction was that we came across repeated requests, during the game’s pre-development research, for a single location where players can see all the data and make all the top-level decisions. We implemented this by creating a stand-alone interface called the Dashboard UI. Here, players can see all the top-level data they require to make quick decisions when the business day closes.
We separated the Dashboard UI from the core gameplay area, where the real action is. In the core gameplay area, players create their recipes, make inventory purchases, buy stands, change locations, upgrade their staff skills, etc. I made sure we balanced the design so that the overall cursor movement is as minimal as possible. I think we managed to crack it because, currently, with just one look, players know where everything is.
Also, because it’s a business game, we wanted to have the accounts section always present. This way, players always know where they stand financially. However, I wanted it to be contextual so that, depending on the view you were looking at, you’d see the relevant financial information for that view. For instance, if you were looking at the City view, you’d see accounting information for your whole City. But if you were looking at a locality, you’d have accounting information for that locality.
Successfully implementing this financial contextualization in the UI is still a work in progress. I am sure sometimes the team wants to shoot me for being so particular about this.
The second significant UI design challenge was how to make the interface more intuitive. The game has so many interactive elements; hence, players need to identify what’s clickable or not quickly. This consideration ultimately ruled out a flat UI for us. Instead, we went for a design style called Neuomorphism. Because Neuomorphism is still a trending design style as at the time of this writing, I am anxious to see how our players react to our implementation of the concept in a business simulation game.
Finally, Icon design is also proving to be a tough nut to crack. We currently have over 120 icons in the game, with more to come. Because it is symbolism, we have to make sure everyone in different countries and cultures can interpret them. The icons are going to be easier to interpret on PC because of the hover detail. But I can already tell it is going to be a challenge in the mobile version. We are hoping to get more feedback about this during the testing phase, though.
To get more development updates like this subscribe to our newsletter.
