How to create a stunning Onboarding experience for your iOS application

Welcome new users and reconnect with returning ones in style

Published in

Mac O’Clock

8 min readMay 1, 2020

User Onboarding is an essential process to welcome new users and greet the existing ones. It can be used as an opportunity to introduce the key features of your application.

Since it’s the first screen that the user sees after opening the app, it’s crucial to keep the process simple and pleasing so that it leaves a great impression.

Points to Keep in Mind While Designing a User Onboarding

It should be simple, it should not clutter the screen with information.
The app setup or other information-gathering activities on the onboarding screen should be avoided.
The Onboarding screens should be kept limited only to the significant features of your application, the number of screens must be less than five.
The progress of the Onboarding must be visible to the user at all times. It can be accomplished by using UIProgressView or UIProgressControl.
The Onboarding Screens must have a skip button to allow the users to dive right in and start using your app.

In this article, we will be creating an interactive User Onboarding with the help of Lottie and UICollectionView which will look like this -

The completed Onboarding Screen — CollectionView with PageControl and Lottie animations

There are three sections in this tutorial —

Setup
Create the User Interface
Connect the User Interface with UIViewController

1. Setup

Create a new Single View App and give it a name. Remember to select Storyboard for the User Interface while creating the project.

We will be using Lottie for the animations, Lottie is a library developed by Airbnb, here is the description —

Lottie is a mobile library for Android and iOS that natively renders vector based animations and art in realtime with minimal code.

Before we start using Lottie in our iOS project, we have to add it through Carthage or Cocoapods.

We will be using Cocoapods, here is the description —

CocoaPods is a dependency manager for Swift. It has over 72 thousand libraries and is used in over 3 million apps. CocoaPods can help you scale your projects elegantly.

The name of the pod for Lottie is ‘lottie-ios’

If you know how to install and use pods in your application you can skip this part -

1. Initialize the Podfile

Go to the project directory in the terminal and run the following command.

pod init

2. Add the Lottie pod

Open the Podfile and add this code below

pod 'lottie-ios'

3. Install the Pod

Now go back to the terminal and run this command to install the pods.

pod install

Now you can start your project in Xcode by opening the .xcworkspace file.

Lottie Animations

Lottie provides free and ready-to-use animations on LottieFiles. You can download any animation you want but remember to download the animations in JSON format.

For this tutorial, I am going to use these animations that I found on Lotte —

After downloading the JSONs, copy them into your iOS project.

2. Create the User Interface

Design the View Controller

We start with the View Controller Scene in the Main.storyboard

Add the CollectionView to the ViewController

CollectionView added to the ViewController

For displaying the Onboarding Screens, we will be using a UICollectionView. Let’s set the background of the CollectionView to Gray so that it’s distinctly visible in the Storyboard.

i) Set the Min Spacing For Cells and For Lines

We want to show only a single Onboarding Cell at any time (which occupies the whole Width of the Screen), Open the Size Inspector for the UICollectionView, and then set the Min Spacing For Cells and Min Spacing For Lines to zero.

Note- For Horizontal CollectionView the Min Spacing For Lines acts as the spacing between the 2 cells.

ii) Set the Scroll Direction to Horizontal and enable Paging

Set the scroll direction and paging for the CollectionView

The default scroll direction for a UICollectionView is Vertical, As we want the cells to move left and right, Open the Attribute Inspector and set the scroll direction to Horizontal.

By default Paging is not enabled, Multiple cells might be visible at the same time in the CollectionView, after enabling Paging the CollectionViewCells works like a page and only one is visible at a time.

iii) Set the constraints for the CollectionView

Leading, Trailing and Top Anchor set to 0.
Height of the CollectionView proportional to the Safe Area with multiplier 0.77

2. Add the UIPageControl to the ViewController

UIPageControl added to the ViewController

We will use a UIPageControl to show the user the number of Onboarding Screens and allow the user to switch between them.

Set the constraints and the properties for the UIPageControl

Top Anchor set to 15.
PageControl centered Horizontally to the superview.
Width set to 78.
Current page color to Black.
Tint color to Dark Gray.

3. Add the UIButton to the ViewController

To allow the user to skip the Onboarding process and get into using the app, we add a UIButton which will be present along with the UICollectionViewCell.

Set the constraints and the properties for the UIButton

Leading, Trailing and Bottom anchor set to 24.
Height set to 42.
Font set to System Semibold 17.0.
Text color set to White.
Background color to #28295E .

With that, we are finished with the Main.storyboard.

Design the UICollectionViewCell

Since we did not define a CollectionViewCell in Main.storyboard, we will be creating a Custom CollectionViewCell, later on, we will register it with our CollectionView.

Create a new Cocoa Touch Class

Create a new file for the CollectionViewCell, select the Create XIB file checkbox to generate a XIB file. We will be designing our CollectionViewCell in this file, here is the description —

XIB stands for the XML Interface Builder. Interface Builder is a software application which allows you to develop Graphical User Interface with the help of Cocoa and carbon.

2. Increase the width and height of the CollectionViewCell

Open the .xib file and set the width and height of the CollectionViewCell to 300 and 600 respectively. We will be specifying the width and height of the CollectionViewCell programmatically, do not worry. We are just increasing it temporarily so that designing the UI becomes easier.

3. Add a UIView to the UICollectionViewCell

Since the animations will be based on the data passed to the CollectionViewCell, what we are going to do is define another UIView container, to which the AnimationView will later be added.

Set the constraints and the properties for the UIView

Leading, Trailing and Top Anchor to 0.
Height of the UIView proportional to the UICollectionViewCell with multiplier 0.8.
Background color set to white.

4. Add the UILabel to the CollectionViewCell

The UILabel will display the Title for the Onboarding Screen.

Set the constraints and the properties for the UILabel

Leading and Top anchor set to 24.
Font set to System Semibold 25.0.
Text color set to Black.

5. Add the UITextView to the CollectionViewCell

UITextView added to the CollectionViewCell

The UITextView will display the description for the Onboarding Screen.

Set the constraints and the properties for the UITextView

Leading and Trailing anchor set to 22.
Top anchor set to 10.
Bottom anchor set to 7.
Font set to System Medium 16.0.
Text color set to Black.

This finishes designing the User Interface.

3. Connect the User Interface with UIViewController

Create a model for the CollectionViewCell

To pass the data to the CollectionViewCell, create a Model.

struct Page {
    let animationName: String
    let title: String
    let description: String
}

We will be using this struct with our ViewController.

Code for the ViewController

Inside the class ViewController —

Inherit the UICollectionViewDataSource and the UICollectionViewDelegateFlowLayout in the ViewController to use the CollectionView.
Connect the UI outlets to the ViewController.
Define a variable with the Page structure created above to be used by the CollectionView.

In the viewDidLoad method of the viewController —

Customize the UIButton to make it rounded.
Register the CollectionViewCell
Assign the delegates to the ViewController.

Create the outlet actions for the UIPageControl and the UIButton.

Implement the functions for using the CollectionView —

NumberOfItemsInSection function returns the number of cells to be displayed in the CollectionView.
CellForItemAt function returns the cell to be used by the CollectionView.
Layout collectionViewLayout function returns the size of the CollectionViewCell.
DidEndDisplaying cell function to update the PageControl.

Code for the CollectionViewCell

Import the Lottie package in the Swift file of the CollectionViewCell.

Inside the class of the UICollectionViewCell —

Connect the UI outlets defined in the XIB file to the custom class.
Create an instance of the AnimationView , provided by Lottie.

Create a function to configure the cell with the data passed -

Initialize the animation with the name passed and set the frame.
Customize the animation, set the animation to loop.
Set the UILabel’s and UITextView’s text.

Conclusion

Let’s recap what we have learned today.

We started with the addition of Lottie to our iOS project with the help of Cocoapods and learned about them in brief. Then, Lottie animations were copied into the project.

Next, we designed the UI for the ViewController by adding the CollectionView, UIPageControl, and the UIButton. Then, we created a custom CollectionViewCell with a XIB file and designed the UI for the CollectionViewCell.

Next, we wrote the code for the ViewController by connecting the outlets and the functions for the CollectionView.

Finally, we wrote the code for the UICollectionViewCell and created a function for customizing the cell.

Thanks for reading this piece. Hope to see you again in the next article!