Post-setup 'Intro to Kolibri' Onboarding

[LianaHarris360]

Overview

This feature is the process of introducing users to Kolibri's user interface, and key features within the Learn plugin through informative pop-up elements containing tips after the user has completed the device setup process. It's designed to enhance user understanding and engagement with Kolibri UI.

What problem is it solving?

• Provides a guided introduction to Kolibri for new users.
• Helps users understand the product's value through experience.
• Assists users in using the core product successfully on their own.
• Reduces the chances of user abandonment due frustration and lack of familiarity with Kolibri interface.

How do we know this feature is successful?

User testing and feedback indicate that the onboarding flow is helpful and improves the initial user experience.

Who is this feature for?

This feature targets new users who have just completed the setup process for Kolibri, regardless of their setup path (On my own, Learn-only, or Full device). It aims to provide them with a guided introduction to some of the platform's key features and functionalities.

Project Timeline

This feature will be released in Kolibri v0.18.0.

Assumptions/Constraints:

• The onboarding flow is only triggered for new users after completing the setup process.
• Each user should only see each tip once.
• The flow is non-intrusive and easy to dismiss for users who don't need it.
• If users select the option to ‘skip', this will bypass the remainder of the post-setup onboarding flow.

Guidelines:

• Put all strings into one file for the feature. Refer to the develop branch for the folder packages/kolibri-common/strings and add a new file for the set of strings.
• Create a new component and wrap all of the step components inside of it. All state data will be managed in a shared state.
• Component Outline:
  • The component will receive an array of onboarding steps (steps) as a prop. Each onboarding step contains a reference target, information about its content and placement, and whether it's active.
  • The component will loop through the steps array and render the inline tips for each active step. The inline tips will include informational content to guide users through the onboarding process.
  • The component responsible for executing each step can use the popper.js library in order to create the popover elements and positioning.
  • Users have the option to dismiss the entire onboarding process by clicking the "Skip" button. When the button is clicked, a method is triggered, setting the completed property to true.
  • Once dismissed/completed, the entire onboarding process is hidden, and users will no longer see the onboarding tips.
• Accessibility Considerations:
  • Inline tips are designed to be screen reader compatible, keyboard accessible, and have sufficient color contrast for readability.
  • Users can navigate and interact with the onboarding process using assistive technologies and keyboard navigation. Users who rely on keyboard navigation should be able to access and interact with the onboarding guide without using a mouse.

Potential Example Usage:

<template>
 <div>
   <div id="step-1">A DOM element on page. </div>

   <kolibriOnboarding :steps="steps"></kolibriOnboarding>
 </div>
</template>

<script>
export default {
   data () {
     return {
       steps: [
         {
           target: '#step-1',
           content: `Your downloaded channels and learning materials will be here. You can also find and explore the libraries on devices of other people around you.`,
           placement: 'right-end',
           conditional: isFullDevice && isNotSuperAdmin
         },
       ]
     }
   },
</script>

Acceptance criteria

• Pop-up elements display informational tips about Kolibri's core features post-setup, covering essential functionalities like library navigation, channel exploration, and accessing learning materials..
• Inline tips offer context-specific guidance within the user interface.
• Onboarding flow follows the provided Gherkin scenarios, functioning correctly across various setup paths and user scenarios.
• Users have the option to dismiss or skip the onboarding easily.

Tasks

• Add necessary strings for translation. #12102
• Develop and implement pop-up elements with informational tips, along with continue and skip buttons options within the user interface. #12103
• Integrate the onboarding flow into the existing setup and first-time user experiences based on the Gherkin scenarios. #12104

Resources

• Figma specs
• Figma prototype
• Gherkin Scenarios