How to: Design an Onboarding Web App

Onboarding webpages are cloud-hosted on Liquid State servers, and served to the app as needed. As a result, your onboarding webpages and supporting assets should:

• Be as small as possible. Using appropriately sized images and other assets is recommended.
• Include the fewest number of files as possible
• Preferably use a single web page (HTML file). Multiple pages can be used (just like a normal website), but more pages result in more complexity, and a greater chance for bugs to occur.

The web pages in use for your onboarding experience will be viewed across a range of screen sizes. As a result, these pages should:

• Always be designed for small, medium and large viewports
• Use CSS media queries to identify screen size
• Be tested on a range of devices before being published in your app

As above, it is necessary to design your onboarding web pages for a range of screen sizes, and for mobile use. As a result, we recommend that you:

• Avoid using complex JavaScript (loops, animations etc.)
• Ensure all interactions are touch compatible
• Take both and portrait and landscape viewing modes in to account when designing your pages
• Consider accessibility on mobile devices, including factors such as:
  • Font sizes
  • Buttons sizes
  • Colour contrast across varying display densities and other device-specific hardware considerations

• An app onboarding experience should always include the following interactions:
  • Registering a new app user
  • Logging in an existing app user
  • Loading the profile data for the currently logged in app user
  • Setting the profile data for the currently logged in app user
• All onboarding specific interactions happen in Javascript code. Remember to:
  • Use the Liquid State JavaScript library provided to you when you enable the onboarding app feature
  • Refer to example code when creating your web pages
• Onboarding pages must include forms, such as registration and login forms. Always:
  • Design forms as normal HTML forms
  • Remember that the Liquid State JavaScript library provides utility functions to load and set form data