8 minutes to read With insights from... Oliver Gepp Lead Software Architect Oliver.Gepp@zuehlke.com Developing the same feature over and over for every app you write can get very monotonous But onboarding is a small feature that will massively improve the user experience for any app With the Zühlke Mobile Onboarding Framework, adding onboarding to your app is fast, easy, and cost-effective The world moves fast, and time is precious. To keep up with your customers’ demands, you need to spend as much time as possible working on those features that create value for the user. To do so, developers use frameworks and libraries that allow them to skip the repetitive parts and focus on what makes their app stand out. This reduces the time-to-market for new features. In this article, we would like to present the ‘Mobile Onboarding Framework’, a framework for mobile app onboarding UX that we have developed at Zühlke. What is meant by ‘onboarding’ in a mobile app? First impressions matter. Even if your app has the best user interface in the world, the last thing you want to do is overwhelm the user by throwing them in at the deep end as soon as they open your app. If your app isn’t instantly intuitive, you risk the user deleting it again without ever having used it. An onboarding screen is the perfect way to introduce new users to your product more gradually. Not only will the user feel immediately welcome, but they can also be guided through the features of your app before they start using them, thereby increasing the level of engagement. Many apps also require access to a user account, or permissions to access certain hardware like the camera. An onboarding screen is the ideal location to explain why an app needs a certain privilege, and to let the user decide whether to grant or deny this permission. In fact, Apple recommends that you don’t immediately show a sign-in screen on launch, and that you explain the benefits of signing in. An onboarding screen can be the perfect place for this. The problem: onboarding must be implemented from scratch every time Onboarding is a small feature that will massively improve the user experience for any app. But having a great onboarding screen alone is, of course, not enough to sell your app. To be successful, you need unique features that your users want – something that creates actual business value. Because developers will tend to focus on such features that create business value, a trap to fall into is to completely neglect basic user experience elements such as onboarding screens. This problem is compounded by the fact that onboarding screens are very similar between most apps but still have to be implemented from scratch every time. Neither Android nor iOS have a built-in solution in their UI frameworks for this. Developing the same feature over and over for every app you write can get very monotonous. Most developers would rather work on challenging problems than implement standard features from scratch. But what if you didn’t have to write the onboarding experience from scratch for every new app? How do we approach onboarding? Facing this problem, we decided to develop the Mobile Onboarding Framework. We have packaged the main features that onboarding experiences deliver into an easy-to-use library that can be used on both iOS and Android. With our Mobile Onboarding Framework, adding onboarding to your app is fast, easy, and cost-effective – which means that, instead of having to compromise between another feature or an onboarding screen, you can add both! A basic onboarding screen can be added to your app in just a few lines of code – so you could develop your entire onboarding experience in less than a day without having to sacrifice the quality of either the app’s main experience or the onboarding experience. Our onboarding framework is based on the principles of convention over configuration. Out of the box, the onboarding experience looks good on all device sizes (from the smallest iPhone SE to the largest iPad) without any configuration needed, both in portrait and in landscape. We also implemented UX best practices such as utilising the golden ratio. However, our framework is still flexible enough to allow complex customisation should it be required. We have achieved this flexibility using two methods. Firstly, we allow developers to customise the onboarding experience through a comprehensive set of parameters, ranging from the font, to the colour palette, through to the padding of images. All parameters have sensible defaults, so it still looks good out of the box even if you don’t change anything. Should the parameters still not allow the desired level of customisation, we also have a second option: custom views allow the developer to set a screen to whatever they wish using native Android or SwiftUI views. We think that custom views are critical to the success of our framework. Our built-in features may get you 90% of the way to where you want to be. But we realise that, in the real world, every project has unique requirements that we cannot foresee. Thus, by using our framework, you can skip the work that is common between all onboarding experiences and work more on what makes yours truly unique. An example of the Mobile Onboarding Framework As an example, let’s take a look at a fictional app, TrackMyFitness. Although the UI is fairly simple, we could improve the experience for a first-time user by adding a simple welcome screen. For an app like this, a welcome screen is particularly important because the user will not see any content upon opening the app for the first time. Being greeted by a ‘No Content’ screen is not ideal. Adding an onboarding screen to the mobile app is easy: Add a parent view (MOFOnboardingFlow), which will display the onboarding screen Add the pages that should be displayed to the parent From this small amount of code, we have already created our first page. MOFOnboardingFlow(pages: [ MOFPage( titleText: "Are you ready? 🚀", image: MOFImage(from: UIImage(named: "page_1")!), descriptionText: findText("PAGE_1_TEXT") ) ) Let’s add a screen that explains some of the features of this app. A list of bullet points is perfect for this. Of course, our framework supports this out of the box: MOFPage( titleText: "We've got you covered!", image: MOFImage(from: UIImage(named: "page_2")!), descriptionText: findText("PAGE_2_TEXT"), bulletPointList: MOFBulletPointList(items: [ "Running", "Cycling", "Gym Sessions", "Swimming", "Many More" ], bulletPointImage: Image(systemName: "bolt")) ) This creates a nice list of bullet points. Also notice that our app automatically creates a pagination indicator at the bottom, as well as a ‘next’ button, which automatically becomes a ‘done’ button on the last page. Of course, you can also customise these buttons if you wish: you can place the ‘next’ button in any corner, optionally add a ‘skip onboarding’ button, or even add a button with a custom action. Our example app would also like to access the user’s location. But to do so, it needs to ask for permission first. The onboarding screen is a perfect place to explain why the permission is needed, and to ask the user to grant the permission. This call to action can be implemented by adding a button to the screen, which our framework supports: MOFPage( titleText: "Do you want to track your activity distance?", image: MOFImage(from: UIImage(named: "page_2")!), descriptionText: findText("PAGE_3_TEXT"), buttonText: "Allow Location Services", buttonAction: requestLocationPermissions, style: MOFStyleConfiguration(secondaryColor: UIColor(named: "purple")) ) This automatically creates a page with a button added to it. Notice that we were also able to change the style of this page to purple with an easy line of code. And, of course, the transition between colours is also fully animated. So far, you can see that it’s extremely easy to add pages that display information in different ways or pages that use simple buttons. But for the end of this demo, let’s take it one step further. Our example app has a profile page that contains information about the user. Wouldn’t it be great if the user could enter this information directly during the onboarding process? Of course, the mobile onboarding framework doesn’t contain the exact page layout needed for this. But by using a custom page, this isn’t a problem to implement: MOFPage( titleText: "Complete your profile", image: MOFImage(from: UIImage(named: "page_4")!), descriptionText: findText("PAGE_4_TEXT"), customViewConfiguration: MOFCustomViewConfiguration(customView: ProfileOnboardingScreen()) ) As you can see, by using a custom page, we are able to extend the functionality of the onboarding framework to enable functionality tailored to our app. This is just a small example of what is possible with the onboarding framework in just a matter of minutes. While the example here has been for iOS, the code for Android is very similar and just as quick to implement! Conclusion When comparing our mobile onboarding framework with other software that tries to solve the same problem, we can say that we have many unique features that other frameworks don’t offer. Firstly, our framework uses a very similar API across both iOS and Android, making it easy to implement cross-platform apps. We have also tested our framework on a wide range of devices, in portrait and in landscape, to make sure it always looks good. And we also have a very comprehensive feature-set that not everyone offers. The mobile onboarding framework is just one of many ways in which we simplify app development, leading to a better experience for the customer, the developer and – most importantly – the end user of the product. If you have any questions or comments about the framework, open source, or our work in general, don’t hesitate to contact us! Oliver Gepp Lead Software Architect Oliver Gepp is an experienced software architect with a focus on mobile development. He has demonstrated his experience in numerous successful customer projects. His knowledge covers the entire development cycle, from conception and development to testing and publication and maintenance of apps. Contact Oliver.Gepp@zuehlke.com +41315613949 Your message to us You must have JavaScript enabled to use this form. First Name Surname Email Phone Message Send message Leave this field blank Your message to us Thank you for your message.