How to: Design an Onboarding Web App

Onboarding pages are hosted on the Liquid State Servers and stored offline in the app after a rebuild. As a result, your Onboarding Web App should be designed to support some features.

 Design constraints...

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.
 Page recommendations...

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
 Screen sizes...

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
 Technical constraints...
  • 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

Unless otherwise indicated in the Overview page of this WIKI the information contained within this space is Classified according to the /wiki/spaces/ISMS/pages/739344530 as