Mobile App: Homescreen & Game mode selection Iteration (version2)

[huaniebun]

Goals

• Main: Help players to start game easily with minimal clicks
• Sub: get players to play more games than intended
• Sub: provide context to new players on what Colonist is and how to play -> convert new players into regulars
• Sub: provide easy access to other features of the app (store, leaderboards) -> get players to purchase items/membership

Needs

• Regular players wants to play a game (quick select of game type & game mode)
• Regular players wants to be able to log into their accounts and customise profile (select profile)
• New players wants to learn about the game and how to play (select rules)
• Regular Player wants to know how well they are playing in the game/rating in a the game (shows win rates + access to leaderboards)
• All players want to know which page they are currently on (navigate via bottom navi)
• All players want to check out what is available at the store (shows number of coins available and access to store)

Principles

• consistency
• reduce cognitive load
• thumb zone in phones
• emphasis based on proportion & hierarchy

Research

247

• Candy Crush - header & bottom nav
• Scrabble GO - header, bottom nav & carousel for game modes
• Ludo - header, bottom nav & carousel for game modes
• Match masters - header, bottom nav

Solutions

Solution 1

I refined the hierarchy of game mode selection based on Steve's feedback, decided to go with carousel for game mode selection and added player's rating info for ranked games. I have also decided to maintain the colour scheme of the pop up design as it is because it is more consistent with the colours of Colonist compared to the current pop up colour, though I do agree that it is not of priority right now.

Click link > prototype flow 4: https://www.figma.com/proto/up1U35QOvkl2aCfD0cJXGW/Colonist-Mobile?node-id=227%3A378239&scaling=min-zoom&page-id=22%3A54685&starting-point-node-id=227%3A378239&show-proto-sidebar=1

Followed Principles:

• consistency - similarity across different pages; maintain majority of UI style from web
• reduce cognitive load - focus on one mode/decision at a time
• thumb zone in phones - clickables at bottom and right edges
• emphasis based on proportion & hierarchy - attention for players decision is the biggest and in the middle

Ignored Principles:

• discoverability (in terms of carousel vs list) - show game modes of high interest in the first 3-4 choices so players don't have to swipe to the end to select their favourite game mode

Solution 2

After designing Solution 1, I realised players would already have determined to play ranked or unranked before selecting game modes hence it would make more sense for the hierarchy to have game type come first then game modes.

Followed Principles:

• consistency - similarity across different pages; maintain majority of UI style from web
• reduce cognitive load - focus on one mode/decision at a time
• thumb zone in phones - clickables at bottom and right edges
• emphasis based on proportion & hierarchy - attention for players decision is the biggest and in the middle

Ignored Principles: Logic - some game modes does not have a ranked/unranked version (bot games and create games does not belong to unranked or ranked)

• once you select ranked on the tab above, neither bot games or create games should even show up as a carousel option
  • making the unranked/ranked toggle disappear for bot and create game would not make sense either
  • toggling of ranked/unranked should be done after selection of game mode
    • C&K would only have a single option of ranked -> hence toggle would also not make sense here
    • bot game, create game and lobby would not have the toggle option

Conclusion

Hierarchy should be Game mode > Ranked/unranked

• Game mode: 1v1, 4p, C&K - depending on whichever is top 3 in descending order
• ranked/unranked: selection instead of toggle option
  • for players who are new (guest / sign-in + have not finished 5 games), default option selected is unranked
  • for players who are regulars (sign-in + finished 5 games), default option selected is ranked

Proposed Solution: SOLUTION 1

Benefits:

• shorter time taken for players to start a game
  • clear action required from user (swipe to select game type + click play to start game)
  • much more intuitive and easier for players to select a game mode (ranked/unranked should be default options)
• increase in revenue from purchases in store
  • more players can access store via add coins, bottom nav store and customising profile items

Potential Risks: players get overwhelmed by choices and is hard to compare the difference between each game mode, resulting in players dropping out at mainpage

Figma link: Prototype Flow 4 https://www.figma.com/proto/up1U35QOvkl2aCfD0cJXGW/Colonist-Mobile?node-id=227%3A378239&scaling=min-zoom&page-id=22%3A54685&starting-point-node-id=227%3A378239&show-proto-sidebar=1

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

[demiculus]

Homescreen & Game mode selection Iteration

I would break these up. If I'm showcasing game-mode-selection I would blur the bottom & top so that its only game-mode-selection. a. Because of this the goals are more generic b. Because of this the needs are more generic

• Its harder to tackle more goals, but when you divide up the parts the goals are easier to tackle
• I will assume this as only Game-mode-selection and give feedback to that

Sub: provide context to new players on what Colonist is and how to play -> convert new players into regulars

Nice

Sub: provide easy access to other features of the app (store, leaderboards) -> get players to purchase items/membership

I'd leave it out of the scope from game-mode-selection

Regular players wants to be able to log into their accounts and customise profile (select profile)

Same

New players wants to learn about the game and how to play (select rules) Regular Player wants to know how well they are playing in the game/rating in a the game (shows win rates + access to leaderboards) All players want to know which page they are currently on (navigate via bottom navi) All players want to check out what is available at the store (shows number of coins available and access to store)

Same

Principles

I'd add "reduce clicks"

---

Hierarchy should be Game mode > Ranked/unranked

I agree with your writing and solution 1.

The feedbacks:

1. These color codes do not provide value: https://i.imgur.com/ONmCLdZ.png
2. The hex selection is not in our art style or design style https://i.imgur.com/d7io4ws.png, but its not the time to iterate on the toggle before finalizing other stuff. I would use the same toggle style for solutions 1 & 2 so that it is similar. Then create a submission only for the toggle style
3. The images you provide are lower resolution. And it doesn't show previous vs current side by side. The way Sam shows his images are much better. You can check out how to export higher resolution.

We might go with the list option as done in the discord poll. https://discord.com/channels/605233308577562643/716512630705225798/1065170366605037589 Please explore more to see if we should go with list or not before optimizing the game-selection-mode.