Mobile App: Homepage (Game Mode Selection) Iteration 3

[samgawaran]

Goals

• make the game mode selection be informative as possible while keeping the UX pleasant
• Determine the best flow we can use for the app

Needs

• Consistency with the brand
• Propose solutions that use our current assets as much as I can
• Make sure to add a play cta for players to click, or a button that is recognizable enough that its a button

Principles

• Hierarchy
• Contrast TLDR: various differences in the design makes them stand out more
• Consistency TLDR: By being consistent with what your users expect, you’ll create a product with a very low learning curve for the user.
• Efficiency TLDR: Does the design of the product allow the user to complete their desired tasks quickly and efficiently?
• Visibility of system status TLDR: they learn the outcome of their prior interactions and determine next steps.

Research

• https://github.com/colonistio/design/issues/247
• Scrabble Go, Mobile Legends - Solution 1
• Clash Royale, Clash Mini, Ludo Club - Solution 2
• Risk, Uno Domino Go - Solution 3

Solutions

Solution 1: Game Modes Carousel

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

• Polished version from previous iteration. I reorganized the layout in terms of the principles I followed, along with some tips from @woodifred. While designing I noticed the toggles are somewhat inefficient since only 4 Players and 1 v1 have both ranked/unranked

Benefits:

• behaves exactly how mobile carousels are supposed to be, low learning curve
• No popups for matchmaking needed = lesser screens to develop

Cons:

• Inefficiency, ranked/unranked toggle

Figma Link: https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=608%3A87190&node-id=608%3A87712&viewport=1259%2C437%2C0.11&scaling=scale-down&starting-point-node-id=608%3A87712

Solution 2: Game Types Carousel

Followed Principles: Hierarchy, Contrast, Visibility of System Status, Consistency Ignored Principles: Balance

• @JuanRoman77 previously commented of "thinking on the long term" and I kept it in mind in here along with the principles I followed. This solution doesn't use toggles and mobile friendly, players can either slide left or right or click on the arrow icons to get to the next game type.
• Clicking on Play vs Bots will direct you to a bot game. We can also remove Create and move it to the lobby so we would only have 3 options in the homepage

Benefits:

• behaves exactly how mobile carousels are supposed to be, low learning curve
• Consistent with how our Play button in the website functions. Shows a popup and offer cards. Also it has enough space for more game modes in the future

Cons:

• Balance: Unranked matchmaking only has 2 modes at the moment. lots of empty space

Figma Link: https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=608%3A87190&node-id=608%3A87334&viewport=1259%2C437%2C0.11&scaling=scale-down&starting-point-node-id=608%3A87334

Solution 3: Tabs

Followed Principles: Visibility of System Status, Consistency, Efficiency Ignored Principles: Hierarchy, Contrast

• I strive to make this solution to be as efficient as possible. With only 2 tabs and cards at the bottom, players can access any game mode immediately.

Benefits:

• Our mobile browser also has a similar function in the store, profile tabs so its consistent for migrating mobile browser users
• Easy to develop, no need to animate. We can provide animated cards in the future to make it more interactive

Cons:

• UI capabilities with tabs can be limiting. No hierarchy

Figma Link: https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=608%3A87190&node-id=608%3A87478&viewport=1259%2C437%2C0.11&scaling=contain&starting-point-node-id=608%3A87478

Conclusion

Proposed Solution: Solution 2: Game Types Carousel

Why I recommend this solution:

• Vs Game Mode Carousel, this solution removes ranked/unranked toggles. Highlighting the other elements in the screen more
• Vs Tabs, this solution is more mobile app native which is a good thing to consider to be up-to-standards with other mobile games
• Flexible: we can add animations on each game type to make it more interactive lie in other games
• Consistent: Play CTA functions the same with the desktop version, easier to design cross-platform UX

Figma link: https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=608%3A87190&node-id=608%3A87334&viewport=1259%2C437%2C0.11&scaling=contain&starting-point-node-id=608%3A87334

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