Mobile App: Matchmaking (Studies) Iteration 2

[samgawaran]

Goals

• Newbie and Pro players should understand the flow
• Give players enough information that they are matchmaking
• Matchmaking should be seamless on a homepage orientation we've finalized
• Players can Cancel or Go Back if they miss-pressed a game mode

Needs

• Consistency with the brand
• Propose solutions that use our current assets as much as you can

Principles

• Hierarchy
• 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
• Movement

Research

• Shows an estimated time or time elapsed after you pressed the Matchmaking button
• Overwatch (Desktop) and Extreme Tennis (iOS) allow players to go to different pages while matchmaking
• All of them allows player to cancel matchmaking as long as there's no players yet
• Magnifying glass/search icon is the most commonly used icon for matchmaking

Solutions

• Further optimization would be needed after we finalize the homepage to ensure that the experience is smooth and seamless.
• this submission lists out possible look where our matchmaking indicator is not shown in our usual popup

Solution 1: Full Screen - Show Avatars

• Players will see the player avatar of their opponents.
• for Ranked mode, will show division icon and rating '
• Players can't cancel once someone is matchmaked with them

Followed Principles: Hierarchy, Movement, Contrast Ignored Principles:

Solution 2: Full Screen: Show Elapsed Time

• Easier to implement compared to solution 1
• Shows elapsed time could possibly be better than showing avatars. atleast with showing elapsed time, the player knows that the matchmaking is still ongoing.

Followed Principles: Visibility of System Status, Movement, Contrast Ignored Principles:

Solution 3: Collapsible Widget

• Games like Overwatch, Extreme Tennis and Mobile Legends allow players to continue browsing other pages after they matchmake.
• Useful for game modes with long waiting time (ex. Ranked C&K where I know some players that mentioned that they waited for about 5 minutes to just to match up)
• Color should not blend too much, the purpose of this solution is to let the player browse, not for them to constantly notice the widget
• Easiest in terms of how close it is in the current design, this way, the experience between Desktop and Mobile matchmaking wouldn't be too different

Followed Principles: Movement, Efficiency Ignored Principles: Visibility of System Status, Contrast

Conclusion

Proposed Solution: Solution 2: Showing Elapse Time

Benefits:

• not interactive as solutions 1 but will be much easier to implement for an MVP
• fewer edge cases since it's full screen. We won't worry too much about popups and such
• having a timer is proven to increase game retention: https://www.gamedeveloper.com/design/time-for-a-timer---effective-use-of-timers-in-game-design

Potential Risks:

• New design. We need to adjust the Desktop version or else the UX would be too different

Figma link:

• https://www.figma.com/file/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?node-id=647%3A96480&t=cDz1UBh738nmDEAW-1

Loom Video explaining reasons for the design: https://www.loom.com/share/90b9295d2fd2449aa22ede020b857d1f

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]

• I wouldn't show elapsed time. It could make people anxious and affect request rate. Have an hourglass or some other kind of animated icon
• Definitely not showing avatars, nor disabling the cancel button
• Cancel button shouldn't be green

[demiculus]

The goal for matchmaking screen is to get players inside the game. That is our one and only goal. We don't want the player exiting, leaving the app etc.. our only goal is to get players inside the game.

Then the players have needs on that page.

• They want to be able to cancel if necessary

I can't think of anything else they'd need to do.

Every other element is determined depending on if it makes the player more likely to go in or not.

[demiculus]

1. Elapsed time -> From research, some of the games show some of them don't show.
   • No timer makes you feel abandoned
   • most games have time related either elapsed or estimated
   • we can abtest it later
   • Go with elapsed time
2. Drawer vs fullscreen -> Good choice with fullscreen

Definitely not showing avatars, nor disabling the cancel button Cancel button shouldn't be green

Agreed