Create preview images for Apple App Store/Google Play Store pages

[eecavanna]

The Apple App Store has a "Screenshots" section, which oftentimes contains screenshots of the app. For example (from Google Images):

The Google Play Store has something similar.

The task here is to create the images that will go in that section. This may involve putting the app in a state where a specific "selling point" is on display, no personal information is being shown, etc.

I don't think this is necessary for the beta release.

[eecavanna]

The preview images can be uploaded via App Store Connect.

[eecavanna]

Someone that has had an app he developed reviewed by Apple in the past, told me that Apple required him to make his app an internal app instead of a public app because the app's audience size was small.

[eecavanna]

Apple's App Store pages can have two types of preview assets:

• "App Preview": a video captured on the device. More information is available here.
• "Screenshot": an image having specific dimensions. More information is available here.

[eecavanna]

Google's Play Store pages can have several types of preview assets, including:

• "Preview video": a public or unlisted YouTube video. The page linked above lists the requirements.
• "Screenshot": an image having specific dimensions. The page linked above lists the requirements.

[eecavanna]

Here's an example image (not yet resized to have any particular dimensions):

Here's how I made this:

1. On a mobile device (an iPhone 12 Pro, in this case), open the NMDC Field Notes app and take a screenshot of a screen I'm interested in
2. Use MockUPhone to wrap the screenshot in a device frame (I chose iPhone 13 Pro because I didn't see iPhone 12 Pro as an option)
   • Reference: https://mockuphone.com/attribution/

   • All art generated by MockUPhone is licensed under a Creative Commons Attribution 3.0 Unported License.

3. Download the result (it'll be a ZIP file containing a portrait image and landscape image)
4. Open the portrait image in Shottr
5. In Shottr, click the "Backdrop" button to add a backdrop
6. The backdrop shown here is the NMDC_microbe_light.png image from src/theme in this repo

[eecavanna]

• Squad members like the idea of having a bit of text above the app screenshot, summarizing its contents
• Squad members prefer using Canva instead of Shottr, if possible, since the engagement team already uses Canva

[pkalita-lbl]

Interfaces we to highlight in screenshots:

1. Home screen with list of studies (3 or 4 studies shown, with quasi-realistic sounding names)
2. Study view interface for a specific study (hopefully showing the list of samples?)
3. Sample view/edit interface (both with and without a specific slot overlay shown. Use the lat/lon slot when showing the overlay)
4. Field visibility selection interface (needs to wait until Sharing custom field visibility options within a study #150 is complete)
5. Guide tab

@eecavanna will create screenshots with both iOS and Material designs, then hand off to @ljohnson09 et al for further editing in Canva (adding device frames, adding backgrounds, adding brief descriptive text similar to the Authenticator example show in the initial description of this issue).

[eecavanna]

I got some study names from Google's Gemini (like ChatGPT):

Here are 3-4 research study names related to microbiology:

1. Microbial Diversity in Extreme Environments
2. Soil Microbiome and Nutrient Cycling
3. Viral Metagenomics of Marine Ecosystems

[eecavanna]

Once I finish capturing the screenshots (ETA: within the next couple days), I'll hand this ticket off.

[eecavanna]

One thing that I neglected to solicit from the squad is specific device types (e.g. iPhone 12 vs. iPhone 12 Pro vs. iPhone 12 Pro Max). That will dictate what dimensions I set my web browser to (or—if I were to use a device simulator—which device I choose to simulate) when taking the screenshot. I think the answer would be influenced by what device frames are available on Canva.

[simroux]

I actually don't think it matters too much for the Canva integration, as often the screenshot is cropped at the bottom or does not fill the whole width, so I'd say go with the most "modern" one (just because we need to pick one) ?

[eecavanna]

OK — thanks! In that case, for Android, I'll use the newest Pixel version listed in Chrome, which is Pixel 7. Similarly, for iPhone, I'll use the newest iPhone version listed in Chrome, which is the iPhone 14 Pro Max.

[eecavanna]

Here's one example. This is:

• Scene:

  1.) Home screen with list of studies (3 or 4 studies shown, with quasi-realistic sounding names)

• Color palette: Light
• UI theme: Android
• Device dimensions: Same as "Pixel 7"

I'm planning to deliver them via Slack or Google Drive instead, as I think many of these images will make this web page unweildy.

[simroux]

I think I see what you mean now: the screenshot don't have the "phone case" around, is that right ? I think that's fine, Canva should have all we need, but not sure how we planned on doing this. @kaelanprime : do you know what you'd need exactly to make the pretty App Store images around a screenshot like @eecavanna shared above ?

[eecavanna]

the screenshot don't have the "phone case" around, is that right ?

Correct—the ones I'm taking won't have a device frame.

As a reminder, I do have a way to produce images like this, in case Canva doesn't work out.

[eecavanna]

Status (of capturing screenshots and posting them on Google Drive — see squad Slack channel for the URL):

• 1. Home screen with list of studies
• 2. Study view interface for a specific study
• 3A. Sample view/edit interface (both without...
• 3B. ...and with a specific slot overlay shown)
• 4. Field visibility selection interface (needs to wait until Sharing custom field visibility options within a study #150 is complete)
• 5. Guide tab

[eecavanna]

OK, the screenshots for categories 1, 2, 3A, 3B, and 5 have been captured and uploaded to Google Drive (four screenshots per category).

I did not make screenshots for category 4 because the upstream feature is still in development. Those screenshots can be taken later.

[eecavanna]

@eecavanna will create screenshots with both iOS and Material designs, then hand off to @ljohnson09 et al for further editing in Canva...

I think we are at the "hand off" point now (I propose we not block on the absence of the screenshots for category 4).

Hi @ljohnson09, I'll reassign this ticket to you now. You can reassign it to me or another person in case you think someone else would be a better fit for that role.

[ljohnson09]

@kaelanprime will be working her Canva magic for these! Assigned to her @eecavanna

[kaelanprime]

hoping to get these done later today! I should have initial drafts ready for review before the end of the day, for now I'll just template them with the standard light screen view, and can create a dark mode version when finalized.

[eecavanna]

Thanks, @ljohnson09 and @kaelanprime! Working out the details using the light mode screenshots only, makes sense to me.

By the way, I don't think we — as a squad — talked about light versus dark mode in the context of these screenshots. It may be the case that the squad members will opt for using only light mode screenshots (plus maybe a single dark mode one, to emphasize that we offer a dark mode). I'll pose that question to the squad members via Slack in a few minutes.

[pkalita-lbl]

Two quick thoughts:

• I'd suggest just doing the final graphics (i.e. app screenshot + device frame + image background + brief descriptive text) with the light mode app screenshots. Showing both seems redundant and from a brief examination of other apps in the Play Store it seems like light mode is pretty common (even for apps that I know switch with system settings).
• Let's try, if we can, to set up the Canva thing so that we can easily drop in new app screenshots in the future. There is work coming down the road that will change some of these featured views a little bit. So the easier it is to produce new final graphics the better.

[pkalita-lbl]

For reference here's what I was looking at on the Play Store. I think these are also good examples to follow (in terms of overall layout with brief descriptive text):

NYT Games:

Signal:

[eecavanna]

• I'd suggest just doing the final graphics (i.e. app screenshot + device frame + image background + brief descriptive text) with the light mode app screenshots.

I agree with this.

Thanks for including the examples with the concise descriptions and consistent layouts.

[ssarrafan]

Appears to be in progress still.

[eecavanna]

I think the capturing of screenshots for item 4 is doable now.

4. Field visibility selection interface

I won't have time this sprint to do that. I will move this ticket to the next sprint.

[pkalita-lbl]

From Google Play:

Upload 2-8 phone screenshots. Screenshots must be PNG or JPEG, up to 8 MB each, 16:9 or 9:16 aspect ratio, with each side between 320 px and 3,840 px

Upload up to eight 7-inch tablet screenshots. Screenshots must be PNG or JPEG, up to 8 MB each, 16:9 or 9:16 aspect ratio, with each side between 320 px and 3,840 px

Upload up to eight 10-inch tablet screenshots. Screenshots must be PNG or JPEG, up to 8 MB each, 16:9 or 9:16 aspect ratio, with each side between 1,080 px and 7,680 px

From Apple App Store Connect:

For 6.9" Display iPhones:

Drag up to 3 app previews and 10 screenshots here for iPhone 6.7" or 6.9" Displays.
(1320 × 2868px, 2868 × 1320px, 1290 × 2796px or 2796 × 1290px)

For 6.5: Display iPhones:

Drag up to 3 app previews and 10 screenshots here.
(1242 × 2688px, 2688 × 1242px, 1284 × 2778px or 2778 × 1284px)

For iPad:

Drag up to 3 app previews and 10 screenshots here for iPad 12.9" or 13" Displays.
(2064 × 2752px, 2752 × 2064px, 2048 × 2732px or 2732 × 2048px)

(I think for 6.9" vs 6.5" we only need one or the other, not both)

[eecavanna]

As discussed with @kaelanprime via Slack, I will regenerate the screenshots using the following simulated devices:

• iOS simulator running iPhone 14 (regular; not Pro, mini, etc.)
• Android simulator running Pixel 8 Pro

[eecavanna]

I regenerated the screenshots as described in the previous comment. They are on Google Drive.

• The ones I took with the iOS simulator simulating an iPhone 14 are in a folder named iPhone 14.
• The ones I took with the Android simulator simulating a Pixel 8 Pro are in a folder named Pixel 8 Pro.
• The ones I took a few weeks ago using my web browser (mimicking mobile devices) are now in a folder named Web browser (mimicking mobile devices).

[eecavanna]

I'll move this to the next sprint.

[kaelanprime]

Final preview images have been uploaded into the same Google Drive folder as screenshots in respective Google Play Store and Apple App Store folders, sub labeled with which dimensions the images represent. Multiple renderings for each preview are available to choose from.

Phone images cannot be successfully modified into tablet/iPad dimension frames and will need to update with additional screenshots but files are prepared in the correct dimensions and only need to update images.

Original renderings are also available to view/edit in the Canva under Projects > Kaelan Projects > Field Notes Screenshots

[ssarrafan]

@kaelanprime can this issue be closed? Or do you want to keep it open to work on the tablet images?

[kaelanprime]

Please keep it open for now so we can track for completing tablet images!