M. Adlan Ramly
Interaction Designer & UX Researcher

She and The Light Bearer

June - September 2018
Role: UX/UI Designer & QA Engineer Intern
Research Methods: QA Tests
Collaborator(s):
Toge Productions & Mojiken Studios
Released on Steam

Project Overview

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.

The goal during my internship is to help Mojiken Studio to test the demo, run QA tests, and give feedback on the UX/UI aspect for She and The Light Bearer

QA 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.

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.

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.

Title Screen

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.

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.

Menu

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.

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.

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.

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.

Choice Selection

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.

Visual Cues

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.

Speed Up Button

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”

Read More