Mobile App: Matchmaking (Finalized Screens)

[samgawaran]

Goals

• get players inside the game

Needs

• A button for them to go back if necessary
• Indicators that they are matchmaking
  • Game Mode Icon
  • Rating & Division (for ranked)
  • Number of players

Principles

Contrast Visibility of system status Movement

Research

See here: https://github.com/colonistio/design/issues/272

Proposed Solution: Full Screen: Show Elapsed Time

• removed tips, I'd consider space limitations on the smallest android devices (360x640) and removed it. It provides no value compared to the other elements in the screen.

iOS Screen (375x812)

Android (360x640)

Search icon animation

GIF link: https://drive.google.com/drive/folders/1VjowPWO1SPb-huOojgwRF-lTa1pooGYk?usp=sharing

Flow

• when player number reach (4/4) or (2/2) they cannot press the cancel cta. Similar to desktop, it will automatically jump to the game.

• How we show ads (Idea):

  • For Non-Members, after the player clicks on Play from the homepage, we will show a short video ad (15-seconds) before they matchmake.

Benefits:

• Easy dev time, full screen, and just add the search animation I'll provide, or create a CSS animation for better quality
• Full screen is a standard to most matchmaking screens in games, checked on smaller android screens and spacing works
• Potential for revenue: show video ads for non-members if they click on Play in the homepage

Potential Risks:

• Animations not working

Figma link: https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=405%3A52350&node-id=794%3A97484&viewport=-110%2C-4013%2C0.25&scaling=scale-down&starting-point-node-id=794%3A97334

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]

Looks nice, you can close this and link it in the main issue.