Onboarding screens will be shown to first time users of the app and is a great opportunity to showcase the best features of your app.
How to add Onboarding banners
Onboarding screens are managed via the CMS.
The size for onboarding images depend on the type of content you wish to use, typically we recommend using 1240 x 1275.
1. Navigate to CMS → CONTENT → Onboarding.
2. Press ADD NEW
3. You can then specify the title of the screen (this will only be available internally) and the background colour of the screen. You can set three different visibility statuses:
- Visible: This will be shown on the app immediately
- Hidden: The screen will show on the CMS but not on the app Once you select save you can start to add content to the screen.
4. On the ‘Content Blocks’ screen, select ‘New Content’ and you can proceed to add data to the screen.
Title: This only visible for internal reference unless you specify the Type as ‘Title
Visibility: You can specify whether the content is visible or not
Type: You can choose from your different types of content for the on-boarding screens
a - Content space: Small space to separate the different content blocks
b - Title: Title that is available on screen to users, this will usually appear in bold
c - Banner: Here you can use images that have been uploaded to the CMS and embed a deeplink to them
d - Description: You can specify longer text that is visible on screen
Select ‘Save’ once you have added content and you will return to the previous screen
5. Once the content blocks have been added, you can rearrange the order of them by selecting ‘Sort’ and moving them to the desired location:
Below is an example of successfully using different content blocks for on-boarding and how it appears on app.
How to Add Multiple Screens
To add more than one screen you can simply repeat the process by select ‘ADD NEW’ on the on-boarding page, once you have added multiple you can rearrange them by clicking and dragging hamburger button on the left hand side of the page to your desired location
Onboarding in app
Onboarding will load the first time the app is opened after download:
- The screens will appears as a horizontal carousel.
- The number of pages the user will see corresponds to the number of screens that have been added in the CMS.
- Switching between the different screens will animatedly change the colour.
- The font for the title and description should be consistent with the main font used in your app
Tips & Tricks
- The onboarding flow should be no longer than 3-5 screens
- Any images that are used should be in a .png format with a clear background
- Illustration images are better suited for an onboarding flow but cropped screenshots can be used to highlight a specific app feature
- To maximise customer engagement the last onboarding screen can have a deeplink to the account sign in page