Welcome Screens on Pugpig Bolt
Table of Contents
- There can be as many or few welcome screens as you like (although we would recommend keeping the number as low as possible)
- For each screen we can have a title and body copy plus an image, which sits above the text. There is not a set recommended size for the images, they get centred in the top half of the screen and will overflow the screen if they're larger than the available space (which varies device-to-device)
- For the image if you can provide a large transparent background png we can size it appropriately
- Each screen has a ‘Next’ or ‘Let’s go' button (depending on if it’s one in a series of screens or the only screen/last in the series). There can also be CTAs deep linking to the login or subscribe screen (or other areas of the app for which a deep link exists). Please note, that only a CTA on the last welcome screen will dismiss the welcome screens. Any CTA's that load content (such as a timeline) on proceeding screens, will load the deep link in the background.
- We can update the colours and fonts of the text and buttons
- We can put in place conditional logic for who sees each screen, based on whether the user is signed in with an active subscription, has a store subscription, or is signed in as an inactive user (which would cover the case where a user is registered but hasn't purchases access to content). This allows you to e.g. only present a screen with a 'Subscribe' CTA if the user is not already a subscriber.
- We can change the text alignment (left, central, right).
When do the screens show?
Welcome screens appear on the first open after an app has been installed. It is not expected for welcome screens to appear when an app is updated, unless the update includes the implementation of the welcome screens.
Case studies
Bolt help screen image sizes are based on a few factors, the image dimensions, resolution of device screens and it is worth noting they behave differently on iOS and Android. Here are some key examples to work from, red line marks edge of image (some of Mail+ whitespace sits outside iPhone 7 on height);
Mail+
Artwork dimensions: 1500px x 1500px, 220 resolution, transparent PNG
iPhone 7
iPad Pro 11"
Independent Premium
Artwork dimensions: 1250px x 1250px, 72 resolution, transparent PNG
iPhone 7
iPad Pro 11"
Full-screen
Images can also be full-bleed, filling the entire help screen. In such a case our recommended size is 1200x2133, you can see what this looks like in the Tortoise image below. The screen still features buttons and, optionally, text. For reason's of fidelity we recommend using the help screen's text functionality rather than baking it into the image.