Intro

Onboarding is the process of activating an account, providing the user with key instructions. The user’s account is typically assigned by an admin or the IT department. The onboarding process can vary depending on the configuration of the app by the admin or the IT department in terms of data sensitivity and security level.

Usage

  • Welcome users with an element of excitement for the experience ahead.
  • Keep the entire onboarding process as simple as possible, and use clear language that gets straight to the point.
  • Onboarding is supported on both mobile and tablet. For mobile, screens appear only in portrait mode. For tablets, onboarding is supported both in landscape and portrait mode.

Process

Briefly, the onboarding process consists of five steps: Launch Screen, Activation, Create Passcode, Agreement (EULA), and Authentication. Between each onboarding step, the loading page may appear to let users know the application is processing content and data. There are four different onboarding processes based on the context of users: activation email onboarding, discovery service onboarding, QR code scan onboarding, and custom onboarding.

Design

A. Launch Screen

The launch screen is the first thing new users experience with the product. It welcomes new users by showing the overall mood of the app and briefly presents what the major features are.

a. Application Details

  • App Logo (Optional): Recommended for better branding visuals.
  • App Title: Use clear and concise naming conventions for the application’s title. It’s recommended to keep the title length to two rows for mobile or one row for tablet.

b. Top User Benefit
This describes the primary benefits of the app and is helpful for users to understand what the app is about. 

c. Demo Mode
This allows users to access the demo mode through the launch screen.



B-1. Activation: Email Link

When the user cannot complete the registration through the app, they may be instructed to go through a different registration process in an activation email.

In this case, users need to go to their email inbox to check the message and click the activation link.

The email link activation page describes instructions for the next step and displays the email address where the activation email was sent to a user for verification. There are no action buttons. Users must close the app to open and check their email to move forward in the onboarding process. 



B-2. Activation: Discovery Service

For the discovery service onboarding, an email input field will appear on the activation screen. Here, an email address should be provided first to start executing the discovery service-based onboarding process.



B-3. Activation: QR Code Scan

QR code activation is another way to onboard. Before starting the activation process, the user must be provided with a QR code to scan. Users can scan a QR code by using a camera or by scanning via images saved on their phone gallery. Using the scanner has the benefit of reducing errors and streamlining the activation process.



B-4. Activation: Choose Options

In this activation type, a user can choose how to onboard either using discovery service or QR code scan. Once the option is selected, the rest of the process follows the flow of the activation type chosen.



C. Create passcode

When users onboarding or want to create new passcode, they must follow the rule list below the form cell to create their new passcode. 

D. Agreement: EULA

In proprietary software, an end-user license agreement (EULA) or software license agreement is the contract between the licensor and purchaser, establishing the purchaser’s right to use the software. To move forward in the onboarding process, users must agree to the EULA.



E-1. Authentication: Sign-In

There are a couple of different methods of authentication, one being a basic account sign-in through the user’s email address and passcode. 



E-2. Authentication: Biometrics

Depending on the Android device, certain biometrics methods may be utilized like a fingerprint scan or face recognition. Since the biometrics come from the Android system, the dialog for the biometrics authentication uses the default Android design.

F. Loading Page

The loading page lets the user know the application is processing content and data.

Specifications

Brand Customization 

App teams can customize the Launch, Activation, Authentication, Create Passcode and Loading Page screens to display their own logo instead of the app name and the standard SAP logo. In the case of customization, please refer to the recommended size and placement for the logo image.
A logo is recommended to be placed within the marked area with a 240px maximum width and a 25px fixed height.