Intro

Onboarding on mobile and tablet
Onboarding on mobile and tablet

Onboarding is the process of activating an account by providing the user with key instructions. 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

Do
  • 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.
Don't
  • Don’t repeat onboarding after the user has completed the process.
  • Don’t skip the onboarding flow for first time logins.

Process

The onboarding process consists of the following steps: welcome (optional), EULA, activation, create passcode, verify passcode, and consent (optional). There is also the restore process where if the user wants to use the app again after onboarding, they go through the sign-in screen to restore their session. If the passcode expires, then after going through the sign-in screen, they will be prompted to create passcode, verify passcode, and enable biometrics (if applicable). The loading screen may appear at any point in the process to let users know the application is processing content and data.

A visualization of the onboarding, restore, and passcode expiration flows, with a possible loading screen throughout the processes
A visualization of the onboarding, restore, and passcode expiration flows, with a possible loading screen throughout the processes

Anatomy

A. Launch Screen

The launch screen is the first page 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 branding purposes.
  • 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 the app’s purpose. 

C. Demo Mode
The demo mode allows users to try features of the app without needing to be fully invested.

Variations of the launch screen show that it can accommodate an illustration or long blocks of text
Variations of the launch screen show that it can accommodate an illustration or long blocks of text


B. 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.

EULA (End-User License Agreement)
EULA (End-User License Agreement)


C. Activation: Choose Options

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

Activation by choosing between discovery service or QR code scan
Activation by choosing between discovery service or QR code scan


C-1. Activation: Discovery Service

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

Activation using the discovery service by entering an email address
Activation using the discovery service by entering an email address


C-2. Activation: QR Code Scan

QR code activation requires the user to be provided with a QR code to scan. Users can scan a QR code by using the 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.

Activation by QR code scan
Activation by QR code scan


C-2. Activation: QR Code Scan Error

In the case that the QR code cannot be read or detected through the camera or the gallery, a dialog will appear to notify the user and present them with actions.

QR code scan error
QR code scan error


D-1. Create Passcode

When users are prompted to create a new passcode, they must follow the list of passcode requirements. 

Create passcode screen with passcode requirements
Create passcode screen with passcode requirements


D-2. Verify Passcode

After creating the passcode, users will be prompted to verify the passcode for security purposes.

Verify passcode screens
Verify passcode screens


D-3. Biometrics

Depending on the 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 system’s default.

Verify passcode screens
Verify passcode screens


E. Sign-In

This process is a basic account sign-in through the user’s email address and passcode. 

Basic authentication sign-in through account and passcode
Basic authentication sign-in through account and passcode


F. Change Passcode

After creating a passcode, users may choose to change their passcode. Users are required to meet the passcode requirements and then verify the passcode afterwards.

Change passcode flow is identical to the create passcode flow
Change passcode flow is identical to the create passcode flow


G. Consent Form

The consent form may be used to ask for the user’s consent in things such as sending a crash report.

Authentication by passcode with the option to enable unlock with fingerprint
Authentication by passcode with the option to enable unlock with fingerprint


H. Loading Page

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

Loading page with progress indicator
Loading page with progress indicator

I. Basic Authentication

Basic authentication is a basic login method with email address and passcode.

Authentication with email address and passcode
Authentication with email address and passcode


Resources

SAP Fiori for iOS: Onboarding