• Home
    • Pugpig Bolt
    • Bolt apps
    • Pugpig Design Kit

    Onboarding/Help Screens Design Customisation

    Notes, documentation, and best practices for customising your help screens section

    Written by Jaykay Kayode

    Updated at December 16th, 2025

    • Pugpig Bolt

      • Pugpig Site

        • Pugpig Archive

          • Working with Pugpig

            • Pugpig Consulting

              Table of Contents

              Defining your onboarding or help screens Adding a collection set picker to your onboarding

              The bolt onboarding and help screens play a crucial role in introducing users to your app's features and providing assistance when needed. This enables you to effectively provide information about your app to users, allowing them to discover more about your offerings. Primarily, it comprises an image, a title, and a description that users can swipe through. Additionally, action buttons are included to facilitate users' seamless entry into the app.

              Defining your onboarding or help screens

              You'll come across these screens when you launch the app for the first time after downloading it from the store. Additionally, they can be accessed through the settings page, giving users the option to revisit and learn more about the app. This is entirely optional, and you have the choice to omit it, allowing users to directly access the app after downloading.

              Here's what each screen could consist of:

              • Image(Optional) - Include visuals that resonate with your app's style and the content's context. There is not a set recommended size for the images, they get centred in the top half of the screen and will overflow the screen if they're larger than the available space (which varies device-to-device)
              • Title
              • Description
              • Action Buttons: Include buttons with clear labels that guide users to the next step 
e.g (‘Next’ or ‘Let’s go')
              • Include a clear CTA that directs users toward the main app interface. The CTA should be visually distinct and indicate the next step. e.g (‘Skip’)
              • Dotted indicators for swiping: If applicable, allow users to swipe through screens for a dynamic experience.

                Please note: There can be as many or few welcome screens as you like (although we would recommend keeping the number as low as possible)

Here are some examples below.


              Adding a collection set picker to your onboarding

              The collection set picker allows users to select their preferred city, region, or content set—helping tailor the app experience to their location or interests.

It’s typically surfaced during onboarding but can also be accessed later via the Settings screen, allowing users to update their selection at any time.

This component is ideal for publishers with multiple regional editions or content groups and supports a consistent, flexible user experience.

              What you can customise:

              • Text – You can update the heading, description, item labels, and CTA button to reflect your app’s tone and content structure.
              • Colors – Customize text, selection highlights, and buttons using your brand’s color system.
              • Icons – The selection icon (e.g. radio button or checkmark) can be swapped with a custom icon to match your design system.


              What’s fixed:

              • The layout and structure of the picker UI is fixed to maintain consistency across devices and apps.
              • The interaction pattern (scrollable single-select list with CTA button) should remain unchanged.


              Best Practices:

              • Keep option labels short, distinct, and recognisable (e.g. “Midwest”, “Central”).
              • Use this picker to surface meaningful content sets, not general filters.
              • Ensure the CTA is action-oriented and clear (e.g. “Save and continue”).

              help onboarding

              Was this article helpful?

              Yes
              No
              Give feedback about this article

              Related Articles

              • Getting Started with Bolt customisation
              • Search Timeline Customisation
              • Timeline Design Customisation
              • Storefront Design Customisation
              pugpig logo white
              Navigation
              • Products
              • Customers
              • News
              • Podcast
              Contact
              • Contact us
              • LinkedIn
              • Twitter
              Technical Support
              • Status Page
              • Documentation
              • Customer Support
              Corporate
              • Company
              • Jobs
              • Privacy Policy

              © Kaldor Ltd. 2022

              Powered by Pugpig


              Knowledge Base Software powered by Helpjuice

              Expand