Onboarding

All the steps described below are present in what we call onboarding (registration or connection). All these steps are not necessarily mandatory in all cases, refer only to the ones that matter to you

Splash screens

An app splash screen is an introductory screen that appears while your application loads in the background. You may see the company logo accompanied by some text or more imagery that enhances a user's first impression. You can use one of your primary or secondary color as background.

The first splash screen (on the left) must contain the main logo of the application. You can also add a second one, which we called the custom splash screen which will be played just after the first one. You can set different images for users according to their segmentation (Example: Country flag of each user, team logo or the logo of the subsidiary company of which the user is a member).

Image specifications:

The logo of the splash screen must be sent in a vectorial format (.svg, .ai), or if it's a bitmap image, it should be on a square ratio image 600x600 pixels (.jpg, .png).

The logo of the custom splash screen must be a square ratio image of 260x260 pixels (.jpg or .png).

Simple version

You can choose between two versions of the Sign-up & Log in layout. The Simple version or the Slider version. The Simple Version uses a background color only (you can't add a background image). You can use one of your primary or secondary color as a background.

Colors are defined here only for exemple.

This screen contains :

1. You have the logo of your app (400x240 pixels rectangle, .jpg or .png, .svg)

2. A welcoming title

3. A short description to explain all the values of your app

4. A principal button to create an account (which redirects to the Sport Heroes SSO)

5. A link to allow users to log in

Slider version

The Slider Version contains only white background color. All the content is articulated around a slider and you can define how many steps you want for describing your app before your users register to join your community.

This screen contains :

1. An image contain within the dimensions 580x720 pixels rectangle, (.jpg or .png)

2. A short sentence to explain the main feature or value you want to describe on each step

3. A principal button to create an account (which redirect to the Sport Heroes SSO)

4. A link to allow users to log in

We recommend to describe only one key feature of your app of each step to keep a clear message to your audience.

Group selection

To join your group during the onboarding you can use this layout that allow users to select the group to which they belong.

iOS

Colors are defined here only for exemple.

Android

Web version

This screen contains :

1. An image with your logo or whatever you want here

2. A short sentence to guide users to select their group

3. A dropdown to select your group

Sport Heroes SSO

The Sport Heroes Single Sign-On (SSO) is the authentication scheme that allows a user to log in with a single ID and password to any Sport Heroes experience.

Sign-up and Log in page of the Sport Heroes SSO.

These screens are not open to customization.

Apple Health Authorization

For all iOS user, by clicking on "Allow Apple Health" users can authorize the Application to read all Apple Health data. Those who pass through Apple Health and have the compatible data can automatically be registered to our Application.

The first screen on steps below is here to clearly explain to users why allow Apple Health, this screen contains:

1. A title sentence to explain why

2. A little video animation with activities icons that switches from Apple Health to your App icons

3. A second sentence to reaffirm the importance of this action for the app to work well

4. A button to prompt Apple Health Authorization ("Allow Apple Health")

5. A button to skip this steps ("Not now")

Using Apple Health is only possible for experience with an iOS App. If your platform is web only you can't use it.

Android step tracker

For all Android user, we can use the native step tracker present in all Android smartphones. For these authorisations user have to connect to their Google account and allow Sport Heroes to have access to this data.

The first screen on steps above is here to clearly explain the process needs to activate daily steps, this screen contains:

1. An image to illustrate daily walking contained within dimensions 600x600 pixels rectangle (.jpg or .png)

2. A title sentence to explain why

3. An optional second sentence to reaffirm the importance of this action for the app work well

4. A button to prompt Google Account Authorization ("Connect")

5. A link button to skip this steps ("Skip")

Third-party app Authorization

During the onboarding, users are invited to connect their usual sports app compatible with Sport Heroes experiences. After selecting the app they will be directly redirected to the page to enter their login details and authorise data to be transmitted with the Sport Heroes services.

Example of Runtastic authorisation

Each pages of providers are properties of each brands, we can't edit anything on these screens.

Additional permissions

To request additional permissions from your users, you can use this layout designed here for subscribing to a newsletter.

Example of newsletter registration permission

This screen contains :

1. A title to explain the final goal that users will have by accepting this permission

2. An image contained within dimensions 600x600 pixels rectangle, (.jpg or .png)

3. An optional sentence to describe deeper the purpus

4. A button to allow the permission

5. A link button at the top right to skip this step ("Not now")