Toolkit

Building an Employee Onboarding Journey with H5P

Welcoming a new employee to the team is an exciting opportunity to set the tone for their success and make them feel at home. In this article, we’ll share some practical tips and ideas on how to create an engaging and interactive onboarding experience using the H5P interaction library—perfect for both in-office and remote workers.

What is Onboarding?

Onboarding is all about helping new hires settle in and get off to a great start. It’s not just about paperwork and introductions; it’s a thoughtful process that helps employees understand their roles, connect with colleagues, and feel aligned with the company’s values and culture. Whether you’re welcoming someone in person or handling remote onboarding, a well-planned onboarding journey can make a big difference in how new team members feel about their new job and how quickly they become productive.

We’ll cover everything from creating a smooth onboarding plan that works for different scenarios—like virtual onboarding for remote workers—to designing a 30-60-90 day plan that sets clear goals and expectations. By harnessing a powerful, free tool, you’ll gain visibility into your team’s onboarding experience, helping you craft a welcoming process that makes new employees feel valued and ready to contribute from day one.

How long does a successful onboarding take?

The duration of the onboarding process can vary significantly across organizations and industries. Typically, the onboarding process of new employees can last from a few weeks to several months. Here are various perspectives on how long the onboarding process should take:

This range of perspectives highlights the importance of a tailored approach to onboarding. To determine the optimal duration for your organization, consider collecting feedback from new hires, team members, and leaders. Regularly reviewing and adjusting the onboarding process based on this feedback will ensure it meets the evolving needs of your employees and organization, leading to more successful integrations and long-term satisfaction.

What a successful onboarding looks like

Successful onboarding ensures that new hires feel welcomed, informed, and confident as they join the team. It’s a well-organized process that adapts to the unique needs of each employee while being responsive to feedback from both newcomers and the existing team. Here’s how effective onboarding unfolds at different stages, highlighting what team members value the most, as backed by insights from Gallup, BambooHR, SHRM, HCI, LinkedIn, and Glassdoor.

Interactive Employee Onboarding Journey Map

Pre-boarding stage

During this stage, welcoming a new employee to the team even before their official start date can set a positive tone. Effective pre-boarding includes sending welcome emails and introductory materials, providing access to online resources and pre-boarding documents, and setting up IT accounts and ensuring all necessary equipment is ready. This phase of the employee onboarding process helps new hires feel prepared and valued from the outset.

  • Gestures that matter:
    • Providing early access to information to reduce first-day anxiety.
    • Offering clear communication about first-day expectations to help new hires feel prepared.
    • Making new hires feel welcomed and valued through personalized welcome messages.
    • Sharing detailed information about the team and company culture to build familiarity.
    • Assigning a dedicated point of contact for any pre-start questions to enhance support.
    • Providing pre-boarding resources like company videos and documents to familiarize new hires with the organization.

Pre-start onboarding tools

Building connection – Corporate Values Compatibility Quiz
  • Other resources you could create with H5P:
    • Quick start guide for essential documents – Documentation Tool
    • Personalized welcome message center – Dialog Cards
    • IT setup instructions download – Interactive Book
    • Team introduction slideshow with interactive bios – Course Presentation
    • Pre-start checklist with downloadable forms – Accordion
    • Company overview video with embedded quizzes – Interactive Video
    • Company values exploration through an image hotspot activity – Image Hotspots

First day

The first day is crucial for making a positive impression during the onboarding journey. Key activities include a warm welcome meeting with the team, an office tour or virtual tour for remote employees, an introduction to company policies and culture, and setting up their workstation and IT systems. This sets the stage for a successful onboarding experience.

  • Gestures that matter:
    • Personalizing welcomes and introductions to foster immediate connection.
    • Organizing the first day to be informative and well-structured, reducing uncertainty.
    • Ensuring immediate access to necessary tools and resources to start work efficiently.
    • Presenting the company’s values and mission clearly to align new hires with organizational goals.
    • Providing a welcome package with essential information and company-branded items to enhance the welcome experience.
    • Including a personal note from the CEO or a senior leader to make new hires feel valued.

First day onboarding tools

Interactive Employee Onboarding Plan and Tool
  • Other resources you could create with H5P:
    • Interactive org chart with team member details – Image Hotspots
    • Virtual office tour with clickable hotspots – Virtual Tour (360)
    • Company policies comprehension quiz – Quiz (Question Set)
    • Onboarding roadmap with interactive timelines – Timeline
    • Meet your team interaction with fun facts – Flashcards
    • Resource center access guide – Column
    • First day expectations overview with a step-by-step guide – Course Presentation

First week

In the first week, new hires start to understand their role and the company better. Activities include role-specific training and orientation sessions, meeting key stakeholders and team members, setting initial goals and expectations, and regular check-ins with their manager. This week is vital for successful onboarding and building a foundation for the new hire onboarding process.

  • Gestures that matter:
    • Offering structured training programs to help new hires quickly become effective in their roles.
    • Facilitating opportunities to build relationships with colleagues to foster a sense of belonging.
    • Providing clarity on performance expectations and how their role contributes to the team to enhance role understanding.
    • Scheduling regular feedback and check-ins to address any early concerns and support adjustment.
    • Organizing social activities to integrate new hires into the team culture.
    • Providing access to a buddy or mentor for additional support and guidance.

First week onboarding tools

Culture Exploration Crossword
  • Other resources you could create with H5P:
    • Task checklist for role-specific training – Documentation Tool
    • Knowledge sharing hub for best practices – Interactive Book
    • Onboarding progress tracker with milestones – Timeline
    • Role and responsibility matching game – Drag the Words
    • Daily reflection prompts – Cornell Notes
    • Mentor or buddy introduction with structured interactions – Dialog Cards
    • Interactive org chart for exploring team roles – Find the Hotspot

First month

During the first month, new hires continue to build their skills and integrate into the team. Activities include ongoing training and development sessions, participation in team meetings and projects, receiving regular feedback from their manager, and continued social integration activities. This month solidifies the onboarding process steps and sets the stage for future growth.

  • Gestures that matter:
    • Offering continuous learning opportunities that support ongoing skill development.
    • Providing constructive feedback that helps new hires improve and feel supported.
    • Ensuring that new hires feel like a part of the team through collaborative projects and social activities.
    • Conducting regular progress evaluations to ensure new hires are on track and confident in their roles.
    • Encouraging participation in team projects and meetings to foster involvement and integration.
    • Providing opportunities for new hires to contribute ideas and feedback to team processes.
First Month Onboarding Check-in
  • Other resources you could create with H5P:
    • Project collaboration space with interactive updates – Information Wall
    • Goal setting and tracking tool – Documentation Tool
    • Interactive mentorship matching tool – Personality Quiz
    • Performance review preparation guide – Summary
    • Feedback collection and analysis tool – Questionnaire
    • Learning pathway builder with interactive steps – Course Presentation
    • Team integration activities with a game map – Game Map
    • Interactive skills assessment – Quiz (Question Set)

Second and third months

In these months, new hires should be taking on more responsibilities and becoming more independent. Activities include advanced role-specific training and increased responsibilities, participation in cross-functional teams and projects, regular feedback sessions and performance reviews, and networking with other departments and professional growth opportunities. This phase is essential for a strategic onboarding plan.

  • Gestures that matter:
    • Providing opportunities to take on challenging tasks that encourage skill growth and development.
    • Offering support from mentors and managers to guide new hires as they take on more responsibilities.
    • Ensuring regular feedback to help new hires track their progress and make improvements.
    • Facilitating cross-functional collaboration to broaden new hires’ experience and network.
    • Encouraging networking and professional growth through industry events and internal opportunities.
    • Offering opportunities for leadership and professional development training.
  • Other resources you could create with H5P:
    • Skill development tracker with interactive assessments – Documentation Tool
    • Cross-functional project showcase with interactive slides – Course Presentation
    • Networking calendar with interactive reminders – Accordion
    • Advanced training modules with scenario-based learning – Branching Scenario
    • Leadership development interactive planner – Timeline
    • Feedback and growth session preparation tool – Summary
    • Interactive goal tracker linked to role progression – Timeline
    • Interactive self-assessment on skill acquisition – Essay

First year

The first year is about long-term integration and development. Activities include ongoing role-specific training and participation in strategic projects, continuous feedback and performance reviews, career development planning and leadership opportunities, and networking and involvement in company initiatives.

  • Gestures that matter:
    • Offering continuous development and opportunities to advance careers, increasing engagement.
    • Providing recognition and rewards for contributions to motivate and retain employees.
    • Ensuring a clear understanding of career paths within the organization to align goals and expectations.
    • Conducting regular check-ins with mentors to guide growth and provide support.
    • Involving new hires in company-wide initiatives and projects to enhance their sense of belonging and contribution.
    • Offering opportunities for participation in industry conferences and events for professional growth.
  • Other resources you could create with H5P:
    • Career pathway planner with interactive milestones – Interactive Book
    • Recognition and rewards program with personalized feedback – Quiz (Question Set)
    • Leadership opportunities showcase with a timeline – Timeline
    • Year-end reflection and feedback tool – Questionnaire
    • Professional growth tracker with interactive tasks – Documentation Tool
    • Interactive company-wide initiative participation tracker – Course Presentation
    • Industry conference and event exploration with interactive elements – Timeline

Creating learning experiences with H5P

H5P is an open-source tool that empowers educators and content creators to build engaging and interactive learning experiences. With H5P, you can create a variety of content types, from interactive videos and quizzes to presentations and branching scenarios, all without needing advanced technical skills. One of the major advantages of H5P is its compatibility with a range of platforms. Whether you’re using Moodle, Canvas, or even WordPress, H5P seamlessly integrates into your existing system, allowing you to create and share content with ease.

Tips for using H5P in WordPress

When using H5P within WordPress, there are several best practices to ensure your site remains optimized and your content is as engaging as possible:

Activate only the libraries you need

H5P comes with a wide array of content libraries, but not all of them may be relevant to your needs. Instead of activating all libraries at once, select only the ones you’ll use. This keeps your WordPress site running smoothly and reduces unnecessary load times.

Optimize media files

Large images and videos can slow down your site. Before uploading media to your H5P activities, compress the files to reduce their size without sacrificing quality. This will help maintain a fast-loading site, which is crucial for keeping your learners engaged.

Regularly update the H5P plugin

Like any WordPress plugin, keeping H5P up to date is essential for security and performance. Regular updates also provide new features and bug fixes, ensuring you have access to the latest tools and improvements.

Test your H5P interactive content across devices

Learners may access your site from various devices, including smartphones, tablets, and desktops. Ensure that your H5P content is responsive and provides a seamless experience regardless of the device being used. Some interactions may not work well on smaller devices, so consider hiding these elements for smaller media queries. This approach helps maintain the usability of your site and ensures that learners using mobile devices have a smooth and frustration-free experience.

Customize with CSS

If you want to adjust the appearance of your H5P content to match your site’s branding, you can easily do so with custom CSS. Here’s how you can achieve this without even needing FTP access:

First, ensure you’re using a child theme. This is important because it prevents your customizations from being overwritten every time you update your theme.

Navigate to Appearance > Theme File Editor in your WordPress dashboard. In your Theme Functions file (functions.php), add the following code:

function MYPLUGIN_alter_styles(&$styles, $libraries, $embed_type) {
$styles[] = (object) array(
// Path must be relative to wp-content/uploads/h5p or absolute.
‘path’ => get_stylesheet_directory_uri() . ‘/style.css’,
‘version’ => ‘?ver=0.1’ // Cache buster
);
}
add_action(‘h5p_alter_library_styles’, ‘MYPLUGIN_alter_styles’, 10, 3);

 

This code allows you to add any custom styles directly to your Child Theme’s style.css file. Now, you can edit your style.css file through the Theme File Editor and apply styles specifically to your H5P content. This approach is efficient and ensures that your customizations are safe from being overwritten during theme updates.

By following these tips, you can leverage H5P to create dynamic and interactive learning experiences in WordPress, enhancing both the effectiveness and aesthetics of your educational content.

Tags: Employee experience, Instructional Design Technology, Learning Design Software, Learning Design Toolkit, Learning development, Learning Experience Design, LXD Toolkit, Onboarding and induction, Online learning, Resources and tools
A complete guide to eLearning Audio – Learning Experience Sound Design
Explore related articles