Improvement of an existing game UX
Midnight Manager: Kyabakura Sim
UX designer
role
Here the goal of my work was to change the existing interface so it becomes clearer and more convenient.
The player manages a hostess club: hires hostesses, develops the club and fights against competitors.
In gameplay, the player directs hostesses to clients. Clients have different needs, hostesses have different skills, and the player finds the right hostess for the right client.
Before starting the game level, the user selects a team of hostesses. I took the team selection screen into work.
In gameplay, the player directs hostesses to clients. Clients have different needs, hostesses have different skills, and the player finds the right hostess for the right client.
Before starting the game level, the user selects a team of hostesses. I took the team selection screen into work.
The first step was to play the game to figure out exactly what functionality is needed on this screen, and what hinders the players.
I have identified a few issues:
- overloaded screen,
- the player is lost what to do. The first step is to create a team, but goals are just next to this block and looks like the boosters.
- there is unnecessary information - Indicators block. It shows the unnecessary information and take a big part of the screen. Also, there is a button to open the club management screen,
- the location of the elements does not take into account the game scaling - the addition of new buffs, etc.
I have identified a few issues:
- overloaded screen,
- the player is lost what to do. The first step is to create a team, but goals are just next to this block and looks like the boosters.
- there is unnecessary information - Indicators block. It shows the unnecessary information and take a big part of the screen. Also, there is a button to open the club management screen,
- the location of the elements does not take into account the game scaling - the addition of new buffs, etc.
To understand how the player should feel on this screen, I did a little research and played a few games.
Time Princesses seemed to me the most suitable. Here, the player must pick up right clothes for the main character before passing the level. This is done very easily, without unnecessary cognitive load. Of course, this is achieved not only through thoughtful interactions between the player and the game, but also through visuals. But my task was only to work out the functionality, without UI.
Time Princesses seemed to me the most suitable. Here, the player must pick up right clothes for the main character before passing the level. This is done very easily, without unnecessary cognitive load. Of course, this is achieved not only through thoughtful interactions between the player and the game, but also through visuals. But my task was only to work out the functionality, without UI.
There was also a definition of the functionality needed on this screen.
- Slots for the squad. A player can have a large number of hostesses, but team is limited. Slots can be empty or full.
- List of all hostesses of the player. It is worth implementing them in the form of a portrait with the names of each of the characters. The player should be able to see the level of development of each of the skills of the hostesses. Hostesses have 6 skills, divided into 2 categories - appearance and conversational skills. Each of the hostesses has a stamina that decreases after work.
- The salary of hostesses. The player must see the salary of each and the total for all hostesses in the squad.
- Session goals. Examples: get X happy customers, earn X money.
- Start session button.
- Passive boosters. The player can choose from upgrades that will make his life easier during gameplay.
- Back button.
Drafts
Having determined what should be on the screen, I started creating layouts.
First I tried to redistribute the blocks to match how the player would read the screen. So, when assembling a team, he should see the level goals, after picking up the appropriate buffs. After that, the team is assembled. I have left all the existing blocks on the screen for now, without deleting anything.
I decided to use a full screen window as the popup gives less space. And there is no point in using a pop-up - it does not cover important information.
Hypothesis
Possible problems
First I tried to redistribute the blocks to match how the player would read the screen. So, when assembling a team, he should see the level goals, after picking up the appropriate buffs. After that, the team is assembled. I have left all the existing blocks on the screen for now, without deleting anything.
I decided to use a full screen window as the popup gives less space. And there is no point in using a pop-up - it does not cover important information.
Hypothesis
- it is easier for the player to tap on the cards of girls than to drag them,
- "Wind rose" with the indicators of girls is beautiful, but uninformative
Possible problems
- boosters too far,
- a cluster of buttons in the upper right corner will lead to misclicks
Next, I decided to get rid of the talent block, since it does not provide any useful information, showing the sum of the different talents of the girls in the team. It does not affect the selection of girls in any way, does not help the player during playing the level, and the block takes up too much space on the screen.
Hypothesis
Hypothesis
- in the order of reading information, first we show information about the level, then the command,
- the player holds the phone with the left hand and taps with the right hand,
- we give the opportunity to drag girls' cards from the bottom row to the right.
- too far to reach for boosters,
- bad habit of putting the back button at the very "beginning" of the window (in reading order)
Removing the talent block freed up more space for the team. And more space for functionality - more emphasis on it! And this solves several problems at once:
I have achieved a convenient order of player actions:
- simplify the appearance of the screen,
- focus on the main functionality of the screen.
I have achieved a convenient order of player actions:
- He looks at the goals and, in relation to them, estimates the team,
- Forms a team,
- Increases the chances of success through boosters,
- Optional: goes to the club management,
- Starts the level.
Having decided on the location of the blocks, I started working on their content.
In the end, I put together a sheet with all the states of the main elements.
This noticeably simplifies further work on the UI, because not one state of the element will be forgotten. Further, such a set will be useful for programmers when assembling a window, and for testers when checking the functionality.
This noticeably simplifies further work on the UI, because not one state of the element will be forgotten. Further, such a set will be useful for programmers when assembling a window, and for testers when checking the functionality.
Result
And I spend couple of hours to create a nice mockup:
Thanks for watching!