Enlightening Navigation Design in She and The Light Bearer

Introduction

Last summer, I had the chance to intern at Toge Productions, an indie game development studio and game publisher. One of the game developer teams, Mojiken Studio, requested me to test the demo and give feedback on the UX/UI aspect for She and The Light Bearer. I am more than happy to test games that are still in development.

About

She and The Light Bearer is a point-and-click game developed by Mojiken Studio and published by Toge Productions. You play as Firefly and her main quest is to find Mother in a lush forest while meeting a variety of interesting characters along her journey.

Design

I chose this promotional poster art because it accurately illustrates the ambience of the game. The poster can illustrate that the game is highly inspired by traditional folklore that takes place in ancient forests. Tribal typography and patterns are also present in both promotional art and the game. Another aspect that I find interesting about the poster is how it captures the sense of scale, being a small firefly on her quest to find answers while surrounded by large trees in a forest.

Brigitta Rena’s floral art are based on real-life plants. Non Playable Characters include an Orchid, Potato, Mushroom, and the most notable one is the Indonesian exotic flower: Rafflesia arnoldii.

Not just the characters, interactive elements of the game are also inspired by real-life plants. One of the examples is the leaves based on Mimosa pudica, also known as Putri Malu (Shy Princess) in Indonesia, which shrivels upon contact.

Once you have completed certain parts of the game, it will play a cutscene. As you progress throughout the game, you will unlock more cutscenes. It’s always interesting to see the characters interact in an animated feature.

One of the animated cutscenes in the game

Planning

While my main project was Coffee Talk as a UX/UI Engineer where my design decisions are based on survey data, this one was a bit different because the task is more related to QA Testing where I provide my quick insights as a UX/UI Designer. This feedback is meant to be given before performing usability tests, which explains why it didn’t require a surveys or playtesting sessions. Before I started testing the game, I created a template for QA Testing.

An example of a QA Testing Form that I made

The document’s header starts with the title of the game to indicate what game is being tested. Game development is an iterative process, keeping track of build versions is important. I am sure I’m not the only one who test this game, it is crucial to write who conducted the test. The date when the test is performed needs to be included as well. Last but not least, the priority legend, which I decided to color code each level of severity to make it easier for the designers and developers.

The form is currently written chronologically, it is written based on the first encounter in a time frame. Depending on the preferences of the designers and developers, this can also be modified to be a sorted in terms of the priority level.

In this article, I won’t be discussing about technical or performance improvements, but I will cover the design improvements which are highly noticeable in the full game version.

Design Improvements

Based on the testing performed, I found most of the issues in the game were related to navigation issues. Navigation is vital to the players’ experience which could boost the overall experience of the game, especially in point-and-click adventure games.

Previous horizontal title design

The Title Screen is very important in giving potential players first impressions of the game. Hierarchy of usage is an important aspect, meaning that options are sorted from the most frequent selected option to the least. What can be seen in the current title screen design is the hierarchy which is in a horizontal layout. Also the spacing between each option is uneven.

Another aspect to mention is the placement of the Continue option when a save file exists. A common design pattern in video game title screens usually put the Continue option as the first option when starting a game if a save file exists.

Title design after redesign

In the revised design, the title screen now uses a vertical layout, the Continue option is shown first, and the spacing is now symmetric. Vertical lists are faster to read because generally people read from the top-down. Even if the list is horizontal, users will still scan it vertically, because of the Gestalt Law of Proximity.

Previous menu button, which is on top left in case you didn’t see it

The Menu button in this game allows players to open configurations which include saving game progress and loading save files. Look at the screenshot above, can you find the menu button? The menu button is barely visible specifically in this area because of the size, shape, & color of the button.

Players might be confused with the affordance of the “arrow” icon, which doesn’t imply a function to open the menu button. Players might confuse the arrow button as a button to move the camera into the right direction or proceed to the next area.

Previous menu design, each menu function is represented as an icon with a caption at the end of the icon list

Upon clicking the Menu button, the menu spans six options. The icons are too transparent, which are difficult to see and sometimes “blend in” with the background if the background has a bright hue. The icons for each function are difficult to understand as well since they use unfamiliar icons. In terms of interaction cost, it is inefficient because players need to hover each of the icons to see their functions.

The Menu icon is now the standard hamburger menu on top right

In the revised design, the Menu button’s placement is now clipped on the top right of the screen. This also opens more room for the game area which allows players to be more immersed in the game and less distracted from the icons on the top from the previous design.

The Menu button’s icon is also changed to the standard hamburger icon which implies its function to toggle a collapsed menu. Utilizing a more recognizable icon is a good practice to increase the system’s learnability.

A more intuitive, yet easier to understand menu bar

Vertical layout is also implemented here where players can skim options a lot faster. Instead of using unfamiliar icons as seen on the previous design, it uses straightforward labels to explain each of the options under the menu.

In She and The Light Bearer, players can interact with different characters through conversations. In conversations, players pick questions to ask for the character. The selected options in the previous design are grey-colored. I assume players might think greyed-out buttons cannot be selected anymore. I suggested to change the color of the already selected options to indicate that the option is still selectable.

In the revised design, the selected option color has been changed into a different color which implies that it can be selected again.

In a game filled with puzzles and riddles, it is important to give visual cues to the players about which objects are interactive. At my first playthrough, I thought this part was a cutscene. I waited for 10 seconds and nothing happened. It turned out it was a puzzle where I have to rotate the parts and match the pieces.

In the final game, visual cues are shown as subtle arrows to display an object’s interactivity. This explains the players visually that the puzzle is interacted by spinning the plates without giving the puzzle’s answer.

Based on the demo, Firefly moves a bit too slow when she moves to a different area, I suggested this feature to be included to reduce waiting time for players. A large speed up button is added on the top left of the user interface which allows players to speed up the game.

Conclusion

I haven’t played the finished game until recently, and I am surprised that there are a lot of UX/UI improvements since the last time I played the unfinished demo. Upon release on Steam, I am glad that the game has received a lot of positive feedback. This game is a must try for point-and-click adventure game enthusiasts. It is now on Steam for $9.99!

“The whole game feels like a poem written with sincerity and love”

“ This was a surprisingly sweet and lovely game to play. It’s a visual novel with some interactivity and some light puzzles”

“Beautiful and captures the storybook vibe perfectly”

Hopefully this article can be the guiding light for those who want to design an interface for point-and-click games and for those who want to start QA testing for games.

Thanks for reading my second Medium article about video game design! This article is supposed to be released way earlier, but I was very busy with work and job applications for my next term. I want to fill my free time by practicing my writing and research skills so if you have any suggestions, please let me know!

Toge Productions

Indie game developer & publisher based in Indonesia.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store