UX/UI

Overview

User Experience is a critical part of TwinStick because of the educational elements involved. This means that complex information must be easy for players to understand to not only educate them on evolving slimes, but inform their decisions on how to interact with the next generation of slimes.

Data involving slime traits, fitness, and their offspring is all information that players should be able to interpret on the screens displayed between each round of generations. UX/UI principles play a key roll in the design of these screens for this reason.

Low Fidelity Explorations

This is a prototype of how different slimes and their off spring can be communicated. Since evolution is an important factor of understanding transformed traits from offspring to offspring, pedigrees can be a helpful tool for players.

This prototype explores what it would look like if players were able to pick specific slimes to learn more about. This communicates what different “families” look like in terms of slimes and their offspring.

The slimes in TwinStick are complex when it comes to their specific traits and fitness. It’s important to categorize the slimes for the player to understand their characteristics. This prototype explores the layout of these categories and how the player could potentially interact with these controls.

Another factor of this prototype is the potential graph placement and extended information on each slime in a family. The viewer would be able to get a description of each slime along with some important information on their traits, fitness, and maybe even their placement on the graph provided. Comparing and contrasting each slime is also an effectuve educational tool, so this prototype also explores what that would look like.

As traits become more official, more styles and information architecture styles can be explored as shown by the more “dark mode” approach. This is an exploration of categorizing every offspring in their “fitness,” but still keeping them all on the same screen because of the parents’ ability to have offspring in different fitness categories. Because this requires multiple slimes to be displayed, a different approach to pedigrees was explored.

The traits on the side operate as controls to see each type of graph that the player can access. In this prototype, slimes have a value to each trait that’s displayed on the graph. The trait is highlighted with their prospective graph along with the value displayed under the description of the slime and their spot on the scatter plot.

On occasions where the player wants to compare slimes with the same trait, they can switch between the slime they’d like to see. Their scatter plot point is highlighted with their prospective point, which changes if the player selects another slime in the pedigree. The values in the slime description box also change to coincide with the slime selected.

Exploring more of the graph features, this is a prototype of what it could look like if a player wants to select a point on the scatter plot to see which slime coincides with that point. An image of the slime and their information will appear for the player to see.

If the player would want to switch between pedigrees, this prototype shows what that would potentially look like. All the information would be changed according to the player’s selection.