Mobile App: Create Room (Studies) Iteration 2

[samgawaran]

Goals

• Get users to easily invite friends
• Get users to easily start games

• Get users to customize game

• Allow users to kick and accept certain type of players (low/high karma..)
• Make users aware of different modes to convert them to paying users
• Players who play on Desktop vs Mobile shouldn't have a too different experience

Needs

• Consistency with the Colonist branding
• Use our current assets/components as much as possible
• Apply all good suggestions from the previous iteration: https://github.com/colonistio/design/issues/263

Principles

• Contrast TLDR: various differences in the design makes them stand out more
• Efficiency TLDR: Does the design of the product allow the user to complete their desired tasks quickly and efficiently?
• Visibility of system status
• User Control and Freedom TLDR: UX should fosters a sense of freedom and confidence. ability to customize or dictate

Research

• Chess.com is very good in terms of Hierarchy. All additional options are inside a separate button as to not overwhelm players
• Risk has a really good custom game UX. (Select Map < Select Mode < Change Settings < Wait for Players) but it requires an overhaul on our part to do this.
• Outlander Custom Settings shows an efficient UI selection and no need to do several steps like in Risk.
• Pacman Royale has a very interactive UI. but like Risk, we need to overhaul the design to do this. We should consider updating this once the MVP has been released.

Solutions

• Prioritize Invite Friends CTA.
• Reduce the info icon clutter for Solution 1 & 3. I feel we could do the style we're using for our ranked mode popup here where it shows all of the info on all game modes on that popup.

Solution 1: Settings/Players Tab

• Showing the Settings Tab in itself will make it more adaptive to smaller and older phone sizes, but it will leave a lot of empty space to phones with longer dimensions
• No strong colored CTA button. I didn't use it here since it might affect one of the goals which is allow players to customize games. prioritizing one button color will make it seem that we want them to click this instead of changing the settings.

Followed Principles: Visibility of system status, User Control, and Freedom Ignored Principles: Contrast

Solution 2: Sticky Chat at the bottom

• Easier to communicate with your fellow players if you can always see the chat. I'm also aiming to make the changes made by the host be shown here since adding a lot of popups would be bad UX for the limited space for mobile
• Uses the old game mode popup. so it would be easier to implement than the other 2.
• The con for this is that almost all mobile devices will have a scrollable part for the game settings. though I made sure that the player section will always be optimize for iOS screens of 375px and above.

Followed Principles: Visibility of system status, User Control, and Freedom Ignored Principles: Balance

Solution 3: Swipe Up Player/Chat Tab

• Mobile native interaction using swipe as the default behavior to open the player/chat tab
• Tried a different look for the Game Mode. Showing Maps to set the player's expectation on what map they would play on. I considered using these on Expansions too but our Expansion images are too complicated to use here.
• Large Invite Friends button. I assume that having these button size will make the players more inclined to invite or share the link

Followed Principles: Hierarchy, Visibility of system status, User Control, and Freedom Ignored Principles:

Conclusion

Proposed Solution: Solution 3: Swipe Player/Chat Tab

Benefits:

• Utilizes normal mobile interaction by swiping up/down to expand the tab
• Nearer at the bottom makes it easier to click/swipe
• Game Mode orientation show map images, this adds exposure to our fun maps and may possibly increase revenue

Potential Risks:

• Need to adjust the Desktop UI too not make it too different in the app. but tbh, the create room screen is in need of a revamp in the first place

Loom Video: https://www.loom.com/share/058aee72f39e4e3a8374e8a20eaff74c

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

[JuanRoman77]

Looks good. Some feedback and suggestions:

1. Remove Settings word (what is settings info btw? 🤔)
2. Add info button so people check out the basic rules for each game modes (current implementation)
3. Get Maps -> Preview (current implementation)
4. Remove arrows from all settings, or keep them for all settings. I suggest removing them from the speeds, to be consistent with the rest of the settings
5. Ignore
6. Remove these icons
7. IMPORTANT: The link should be visible. Many players don't share the entire link and paste it, but they type the room ID or just read it out loud. I'd probably keep the current implementation rather than just having a big button

[demiculus]

Goals

I'm not sure why the goals were changed. https://github.com/colonistio/design/issues/263#issuecomment-1383563094

Get users to easily invite friends Get users to easily start games Get users to customize game

The third one is not our goal, customization is a revenue model. Its a part of a goal. If you change the goal you WILL DESIGN WRONG

If goal is -> Customize game -> It will make sense to put the most edited options at the top. If goal is -> Convert users to paid user -> It will make sense to put the premium options at the top.

Allow users to kick and accept certain type of players (low/high karma..) Make users aware of different modes to convert them to paying users Players who play on Desktop vs Mobile shouldn't have a too different experience

These are not goals.

1. A user needs to be able to kick in order to start the game easily.
2. A user needs to see different options in order to convert to paying users
3. This isn't a need, we can optimize later

Needs

Consistency with the Colonist branding Use our current assets/components as much as possible Apply all good suggestions from the previous iteration: https://github.com/colonistio/design/issues/263

Those are not the players needs. Those are Colonist guides that is applicable for all designs.