Mobile App: Homepage (Game Mode Selection) Studies

[samgawaran]

Summary

Got a lot of feedback from the previous iteration https://github.com/colonistio/design/issues/254

Moving forward, Mobile App design submissions will be focused on a specific part, specially on pages like Homepage, Lobby, Store, etc. so we can easily create decisions and not overwhelm reviewers.

Details

• Focus on the game mode selection only. Header, footer and profile stat section doesn't use updated designs in this submission yet. But I adjusted its content based on the feedback here: https://github.com/colonistio/design/issues/254#issuecomment-1374761784
• Header now includes the menu
• Footer now includes profile (no images yet)

Previous Design

Sliding Animation

• sliding animation for game mode selection. Game mode icons are using the default icons we are using. I'll propose a new design sometime later based on Steve's feedback on the loom vid
• This animation applies to all studies

Game Mode Selection Studies

Study 1 - direct version of the previous design. Change copy of Create to Host as suggested by Steve. Added the toggle we use in the website to either select rank or unranked to reduce the number of game modes in the slides which is 7 in the previous version

Study 2 - got this idea while discussing with Devyesh about Mobile, we can remove the Create CTA in the homepage and move it inside the Lobby page instead. This will prioritize our Play CTA even more by making it more prominent.

Study 3 - Uses our current sub & main cta format in our desktop but change Create to Play Unranked to remove the need for a toggle. Ranked stats are always present below the game mode icon to entice players to play ranked vs unranked

Scenarios

• Followed a sample based on Juan's suggestion on the first submission to remove some of the profile stats since it clogs the page.
• added states for placement games and non-member restricted access to play some game modes in the future
• Devyesh mentioned that we won't allow guest players inside the app, nevertheless I created a sample here in this case.

Decisions to make

• Do you agree to move the create/host cta inside the Lobby?
  • hardcore mmorts like LOL, Dota 2 have their create action inside their public lobby so it could also work on our case. Reduces number of buttons we don't want players to click and create space for more important ones
    • Reduce number of profile stats in the homepage from 6 to 3
    • retain Total Games, Winrate and Membership link, to open up space
    • Showing Ranked Stats for each game mode in the homepage
    • I saw competitive multiplayer games show the players ranked stats beside the game mode (Mobile Legends) and as a player myself, it entices me to grind more games since I can see what my rankings are.
    • Can be expounded on a separate submission that can focus on it.

Related Submissions

• https://github.com/colonistio/design/issues/254
• https://github.com/colonistio/design/issues/253

  Related Links

• https://github.com/colonistio/design/issues/226

  Submission Checklist

• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@demiculus @JuanRoman77

[samgawaran]

Can you tag steve in the loom video here? I can't seem to find his github username. Thanks

[demiculus]

Moving forward, Mobile App design submissions will be focused on a specific part, specially on pages like Homepage, Lobby, Store, etc. so we can easily create decisions and not overwhelm reviewers.

There is a balance. Related stuff should be in the same issue. Non-directly related stuff can be in different issues. For example everything Mainpage can be here but menu, popups etc can be in another issue. This also means that you should be creating multiple submission issues per day.

1. I like the default images below, lets the reviewer focus on whats important https://i.imgur.com/07WpIzK.png
2. Why study 3 doesn't make sense;
   • We want to reduce the thought process as much as possible. Adding an extra CTA is worse than adding a setting (toggle). Since toggle will be 90% of the time not used and people will use the default option. So its better to always decrease the importance of these. When you make it from sub-CTA to toggle you decrease the importance of that action. Which means that the overall importance of the Play button increases on the page
3. Go with study 2
   • Create an a/b test idea issue and add the below ideas there with screenshots
   • Host game as a button brings in more places vs having host game in the carousel
   • Name the button, host game vs play with friends vs create game
   • Add the Host Game option in the carousel
   • Some game modes don't have ranked/unranked (bots/host game)
4. Go with 3. Put membership in the middle https://i.imgur.com/jD3KF2z.png
5. Do you see the backgrounds on our web page: https://i.imgur.com/gzDKT1R.jpg make it same

Decision Carousel vs List

@woodifred @5econds How can we determine if we should use carousel vs list for the main modes without a/b testing? Carousel:

• Most players play the same mode

List:

• Players are more likely to learn about different game modes
  • Example: "Oh I didn't know I can play with my friends" Here are some other options:
• https://cdn.discordapp.com/attachments/1009724495755477079/1062423038785761351/image.png
• https://cdn.discordapp.com/attachments/1009724495755477079/1062421974124597308/image.png

I'm thinking of going with Carousel since later on we can introduce other stuff to push players towards playing other game modes. But that means initially our metrics might be worse

[samgawaran]

Here's the changes that I'm proposing based on the feedback above^

• adjusted spacing since we deleted a whole row of stats

Header

• removed BG to be the same with desktop
  • Profile Stats
• Reduce from 6 to 3.
• Membership in the middle, moved Karma at either right or left side to maintain consistency with desktop.
  • Toggle
• moved toggle on top of game mode name. Having it close to the carousel might cause accidental clicks to fat-fingered people
  • Create Game/Host Game Icon
• not final, but using gear icon at the moment.

---

Create an a/b test idea issue and add the below ideas there with screenshots Host game as a button brings in more places vs having host game in the carousel Name the button, host game vs play with friends vs create game

do you mean something like an idea dump? or an implementation issue @demiculus

[demiculus]

something like an idea dump?

Maybe just put these stuff in the idea dump in our discord. We'll check em out later.

You can continue moving forward with the other aspects of the mobile. Lets try to finalize it this week.

[5econds]

I like the visual direction, simplicity and clear hierarchy of the below design the best.. it makes it very easy to one-click and play and your eyes immediately know where to go and follow linearly

if the thing we're optimizing for is first-page conversion to game start, this feels like the best option because it reduces friction the most

however

• I wouldn't make the top-level decision ranked vs unranked, i'd make it game mode because i think that better reflects a user's mental model
• I'd leave the visual choice as you have for game mode but do it for ranked at the bottom but make it clearly default ranked so the user doesn't have to make a decision unless they want to
• also not sure people care about the 'total number of games played' enough to put it on the homepage like that (my opinion ... but not sure if you have data saying people care, otherwise i'd remove it)

[samgawaran]

closing this issue, update one is in here: https://github.com/colonistio/design/issues/258