Update App & Playstore Images

[samgawaran]

Summary

• We have the mobile app (Mobilemenu) UI in development. Its time to update the store images and icon to the more updated design

Google Preview Guidelines

Playstore Images Samples

• All of the top platforms and games don't stylize their images that much and just show actual screens
• Tiktok shows a preview video on their first panel. (We can do this but it'll take some amount of time to produce in Figma to outweigh its value and this is a separate issue altogether.)
• More games show the title of each page at the bottom.
• All of them

Checklist

• [x] App Icon
  • [x] I used the guideline here: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
  • Figma link: https://www.figma.com/file/SysB628vRorzV7E9Pp9JuR/Colonist---(Sam)-File?node-id=859%3A127631&t=QgJjEwOZHyVowUTh-1
• [ ] Playstore Images
  • [ ] I used the guideline here: https://www.apptweak.com/en/aso-blog/app-screenshot-icon-video-guidelines-ios-gp
  • [ ] Phone:
    • [ ] 1284 x 2778 pixels
    • [ ] 1170 x 2532 pixels
    • [ ] 1242 x 2208 pixels
    • [ ] 750 x 1334 pixels
    • [ ] 640 x 1136 pixels – with status bar
    • [ ] 640 x 960 pixels – with status bar
  • [ ] Tablet:
    • [ ] 2048 x 2732 pixels
    • [ ] 1640 x 2360 pixels
    • [ ] 1668 x 2224 pixels
    • [ ] 1536 x 2008 pixels – with status bar

Figma link:

Considered

• [ ] This proposal fits company vision
• [ ] This proposal is impactful according to Prioritizer Sheet
• [ ] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

  Reviewers

[samgawaran]

Current Preview Images

Proposed Preview Images

@demiculus @JuanRoman77 before I go do the other screen formats, I need your thoughts here.

Decisions:

• We will show the preview images in portrait mode.
• we will also show them inside a phone/tablet to simulate what it would look like on the device
• We won't add random assets per page like in the current version. Let the players focus on the feature itself
• Should we wait for the game screen to be finalized and add it here? replace store-screen or profile-friends screen

[demiculus]

@samgawaran do an edit we need this soon

First off these are the app screens. We're a game. 60% of the screens should be showing the game, 40% the app. So make 3 screens of the game and 2 screens of the app.

These that might create a problem since we don't have local payments yet. So remove them.

1. Store tab is there but not gonna be on the app while review
2. Membership banner
3. Coins
4. C&K become a member
5. Leaderboard page membership text
6. Store page completely

[samgawaran]

What copy should I put for the game? I'll just create something and you can change it to whatever you like. Adding here soon.

FYI, some of the game screens are not final so it might also change in the future

[samgawaran]

@JuanRoman77 @demiculus

I made a preview of 7 screens. We can remove 2 of the menuscreens here to keep the 60/40 you mentioned. I'll let you guys decide. Again copy is not final and we can interchange each image in another order etc.

remove the sections mentioned here on all screens. : https://github.com/colonistio/design/issues/316#issuecomment-1478888875

[samgawaran]

@JuanRoman77 @demiculus Added the changes requested by Demi via DM.

• Cons for showing the horizontal gameplay: we need to show it on the landscape format. I tried keeping it on portrait but it looks small

no. 1 Image:

• made 2 versions, one without the phone, (saw some apps and games do it on their first screen) and another one with the phone on it.

[demiculus]

I think this is done