Mobile App: Create Room (Game Settings) Studies

[samgawaran]

Goals

Optimize the Create Room page for Mobile and make it seamless on the portrait version

Once we decided on what solution. I'll create specific scenarios on a new submission

Current on Mobile Browser:

Needs

• Player Section
• Game Settings
• Chat
• Header
• CTA to leave the room
• I'm Ready Checkbox
• Identifier if the player is Ready or Not Ready

Principles

• Hierarchy TLDR: some sections are more prominent and easier for the user to find than others
• Consistency TLDR: mobile app should be the same with the placement of elements in the website

Research

• Chess.com is very good in terms of Hierarchy. All additional options are inside a separate button as to not overwhelm players
• Most games requires the host to finish setting up their game settings before allowing players to join
• Clash Royale doesn't allow custom games but they show different game modes instead
• Sharing the room gives you a link that you can share

Solutions

Solution 1: Show Advanced Settings

Followed Principles: Hierarchy Ignored Principles: Consistency

Solution 2: Follow the Website's Format

Followed Principles: Consistency Ignored Principles:

Other Minor Solutions in the screen

Besides game settings here are other minor stuff I'm proposing for the Create Room screen

• Use tabs for Player and `Chat
  • during sketch, there's not enough space to accommodate everything on a phone screen
  • tabs are consistent with Lobby design which is the preceding screen to create a room
• Show number of players in Players Tab
  • more context on how many players are in the room
• Chat buttons are placed on different place
  • Better layout compared to desktop version
  • Hard to click if its on the tab
• Leave room button moved from right to left
  • Harder to reach if you're playing one-handed which makes it harder to leave the room
• Don't show Footer Nav
  • Don't make it easier for them to leave the room by going to another page

Conclusion

What we want players to do:

• tap I'm Ready Checkbox
• Ability to chat to request game setting changes

What we want them to see:

• Game Settings from most important, Invite link, (select game mode, select map, private game checkbox)
• How many players are there
• Chat

What we don't want them to do:

• Leave the room

Proposed Solution:

• I'm proposing to do Advanced Settings

Benefits:

• Better hierarchy.
• Doesn't overwhelm players/host with a lot of options = better chance to don't leave and start the game
• Doesn't introduce a new feature, just re-arranging some sections to make it fit for mobile

Potential Risks:

• Dev Time to make it perfect
• Desktop version needs to be updated to reflect whats on Mobile

Related Links:

• https://github.com/colonistio/design/issues/226

Figma link: Solution 1: Advance Settings https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=442%3A62785&node-id=548%3A72926&viewport=-1175%2C-6109%2C1&scaling=contain&starting-point-node-id=548%3A72926 Solution 2: Host View https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=442%3A62785&node-id=540%3A70202&viewport=-1175%2C-6109%2C1&scaling=contain&starting-point-node-id=540%3A70202 Solution 2: Guest View https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=442%3A62785&node-id=540%3A79596&viewport=-1175%2C-6109%2C1&scaling=contain&starting-point-node-id=540%3A79596

Considered

• [x] This proposal fits company vision
• [x] This proposal is impactful according to Prioritizer Sheet
• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@demiculus @JuanRoman77 @woodifred @5econds

[demiculus]

Goals Optimize the Create Room page for Mobile and make it seamless on the portrait version Once we decided on what solution. I'll create specific scenarios on a new submission

Goal for the create room page is not that.

Goals:

1. Get users to easily invite friends
2. Get users to easily start games
3. Get users to customize game
4. Get users to kick and accept certain type of players (low/high karma..)
5. Get users to be aware of different modes to convert them to paying users
6. ...

After you write down the goals you need to prioritize them and design the feature accordingly.

Main Goals:

1. Users can easily invite friends
2. Users can easily start games

Sub Goals:

1. Convert users to paid users a. Customize games (see what I did here? Customizing games is not part of inviting friends and easily starting, it is a way to convert users to become paid, if we get users to customize without converting them to paid its useless since it doesn't achieve inviting more friends or easily starting games)

---

If you write the wrong goals there is no way you can do the right design!

---

Current on Mobile Browser:

Look at the image, its anti-concise for you to post that image. Creates no benefit to the reader.

---

Needs: They are not all equal. Categorize them according to importance.

---

What we don't want them to do: Leave the room

Its okay for them to leave the room in order to find a better one.

Watch the loom video for review: https://www.loom.com/share/9cefc4772f484e09befcd40a67eaf617

[JuanRoman77]

1. We need a back button
2. Remove the ? from the players in the list

[samgawaran]

https://www.loom.com/share/9cefc4772f484e09befcd40a67eaf617

Removing Chat: Nope. The point of chat is for players to request changes, also, I remember you mentioning that we should include everything for now and remove it after we nail the look. Ask yourself the point of the feature before suggesting stuff like these, thanks

---

Customized Games: We can focus on this more after finalizing. You mentioned that the advanced settings is too complicated yet you are mentioning this kind of feature.

We need a back button

its the X but yes, I can convert it to an arrow icon instead. We need to adjust the desktop version though

Remove the ? from the players in the list

As long as the desktop versions ? be removed then I'll remove this as well.

[samgawaran]

closing this issue, new iteration is here: https://github.com/colonistio/design/issues/274