Devlog #4 - Placing Players into the Toll Booth
[p]Hello everyone!
I’m Yosi, the UI Artist for 1998 : The Toll Keeper Story. After highlighting the visual art on the aspect of characters, environments and animations,we'd like to show you how we design the user interfaces, which players will interact the most while playing the game.[/p][p]![]()
[/p][p]The keywords for designing the UI in 1998 are "Vintage" and "Analog," meaning that the UI needed to have the old aesthetic of a 90s office desk. This is reflected in the color palettes being mostly brown and in the analog sound effects, like the sound of an old mechanical keyboard or the sound of a receipt printer[/p][p][/p][p]Even though brown was the dominant color palette, we make use of more contrasting colors to highlight important elements inside the UI, like the color red for inspecting, reporting, rejecting drivers, The colorful variations of money and green to let the cars through.[/p][p]![]()
Immersion was also a major factor when designing the UI. We want players to feel as if they’re working inside the toll booth, even while role-playing as Dewi. [/p][p]![]()
To simulate Dewi’s daily work of handling multiple tasks at once, we made the multiple rules and guide papers floating windows that the player needs to organize on one screen, immersing them in the hectic work-life of a toll keeper. This was a risky move because it could overwhelm the player with information. To handle this, some windows close automatically. For example, the rule page closes itself after an inspection (we assume the player won’t check the rules again after inspecting a vehicle). This mechanic greatly reduces the clutter on the screen.[/p][p]![]()
Another way we increased immersion was by changing the UV light. In earlier iterations, pressing a button would reveal all fake bills instantly. This made counterfeit bill checking too easy and had little impact on the player. With that in mind, we overhauled the UV light, making it a cursor with a smaller light radius that the player must physically pick up and shine on each bill individually. This increases player satisfaction when they discover a counterfeit bill and, in turn, increases immersion.[/p][p]![]()
[/p][p]The UI also serves as a way to tell the story and build the world through the newspaper. We designed it by referencing old 90s Indonesian newspapers, adopting their color palette, fixed-column layouts (to fit old printers), and how pictures and illustrations were styled. We wanted the newspaper to feel as authentic as possible but still quickly deliver information to players.
To streamline the information, we only highlight the headlines, using scribble-square fonts as a placeholder for the detailed news articles.[/p][p]In some cases, we also needed to consider the player's quality of life, sacrificing some immersion so that the player could enjoy the game long-term.[/p][p]![]()
A simple case is how we denominated the money values to single and double digits (5 and 10) to make in-game counting easier, even though our reference, Indonesian bills, is in the thousands.
![]()
For bigger changes one example is the gate opening button , it previously was a slider. A slider should have the effect of direct player movement affecting the game world; however, in testing, the slider was a hassle to play with because of its small size and it became tedious after 10 in-game days of sliding the same lever. Finally, we decided to make the gate opening button a "hold" action instead, and it's also upgradeable later in the game to make it open faster and with a hotkey.
![]()
[/p][p]One revamp we also did was the cash register window. Previously, it was a full-screen view that visualized Dewi’s office desk and the cash register in detail. After testing, we found that some players also wanted to view the conversation with the passing drivers. To fix this, we changed the cash register view to a 1/3-screen view that slides up from the bottom. This solution solved the problem while maintaining the immersion and flow of gameplay.[/p][p]![]()
[/p][p]All this big revamps was only a small glimpse of change we made, there’s also a lot of back and forth for simpler elements because how rapidly we test the game and iterate it. All buttons have gone through color, shape and position changes because of this. Some buttons just felt too far apart or could cause misclicks because of its position, that's why we have to change them several times. but it is for the sake of a better quality product. [/p][p]![]()
[/p][p]With that, we conclude the Devlog behind User Interface and visual arts of 1998 The Toll Keeper Story. Achieving the quality that we put in the game was no small feat, compromises have to be made so that we may deliver a visually great game that tells a very personal story while immersing the player into the world of Janapa.[/p][p]
[/p]
I’m Yosi, the UI Artist for 1998 : The Toll Keeper Story. After highlighting the visual art on the aspect of characters, environments and animations,we'd like to show you how we design the user interfaces, which players will interact the most while playing the game.[/p][p]
Immersion was also a major factor when designing the UI. We want players to feel as if they’re working inside the toll booth, even while role-playing as Dewi. [/p][p]
To simulate Dewi’s daily work of handling multiple tasks at once, we made the multiple rules and guide papers floating windows that the player needs to organize on one screen, immersing them in the hectic work-life of a toll keeper. This was a risky move because it could overwhelm the player with information. To handle this, some windows close automatically. For example, the rule page closes itself after an inspection (we assume the player won’t check the rules again after inspecting a vehicle). This mechanic greatly reduces the clutter on the screen.[/p][p]
Another way we increased immersion was by changing the UV light. In earlier iterations, pressing a button would reveal all fake bills instantly. This made counterfeit bill checking too easy and had little impact on the player. With that in mind, we overhauled the UV light, making it a cursor with a smaller light radius that the player must physically pick up and shine on each bill individually. This increases player satisfaction when they discover a counterfeit bill and, in turn, increases immersion.[/p][p]
To streamline the information, we only highlight the headlines, using scribble-square fonts as a placeholder for the detailed news articles.[/p][p]In some cases, we also needed to consider the player's quality of life, sacrificing some immersion so that the player could enjoy the game long-term.[/p][p]
A simple case is how we denominated the money values to single and double digits (5 and 10) to make in-game counting easier, even though our reference, Indonesian bills, is in the thousands.
For bigger changes one example is the gate opening button , it previously was a slider. A slider should have the effect of direct player movement affecting the game world; however, in testing, the slider was a hassle to play with because of its small size and it became tedious after 10 in-game days of sliding the same lever. Finally, we decided to make the gate opening button a "hold" action instead, and it's also upgradeable later in the game to make it open faster and with a hotkey.
[/p]