Onboarding Checklist Project

HTML CSS JavaScript JSON

Overview

The goal: Eliminate the need to copy and paste so much when creating new user accounts.

Whenever the IT department would onboard a new employee to our company, we would create their accounts, then copy and paste the information into a pre-formatted Word doc template, then send it to the employee's manager before their first day of work.

Although it was annoying to manually copy and paste so much information, the real problem was with consistency.

Some of our team members would type out the information instead of copying and pasting. This led to typos and inconsistent formatting, and I wanted to see if I could come up with a solution.

Version History

v1

This project started in 2017. It was very basic with two sections: an input form and a plain-text results section. The input form would take details about the new employee, like their name, manager name, and employee ID number. Then it would format this information in the results section, using our naming conventions to automatically create email addresses and usernames.

Once I got these basics down, I added a simple static checklist to help me keep track of each onboarding. I was usually working on multiple onboardings at a time, and needed to wait for certain accounts to sync, and before this, it was easy to lose track of where I was in the process.

v2

With version 2, I added a few flipswitches to make the checklist dynamic. For instance, not every user's job title required a phone account and phone number, so I could flip the 'Phone' switch to the 'off' position, corresponding sections in the form, checklist, and results would be hidden.

Originally, in order for the results to populate with the user information, you needed to click a button. In version 2, I changed this so it would update dynamically as you type into the form.

Since I was no longer the only person using this web app, I started to care more about branding and styling. In version 2, I updated the styles and branding to closely match the Carousel Motor Group public-facing website. I also added two more pages, one for employees transferring within the company (transfers), and another for employees leaving the company (terminations).

v3

We still had a problem with consistency, since the flipswitches had to be flipped manually, and would get forgotten. So I started down the path of making everything dynamic, based on the user's store location and job title. This involved documenting all the job titles and their permissions within the core IT-managed systems. Out of simplicity, I chose to just document everything in a JSON file.

Then I added dropdown menus to the input form for the user's store/office location and their job title. Based on these selections, the flipswitches and corresponding checklists and results would update automatically.

This created some complications with employee transfers, since we needed to compare their current permissions with the new role they were getting. The transfer page became much more complicated to account for comparing the old and new accounts to get accurate results.

v4

Version 4 was mostly just adding more specific details to the checklists and fixing bugs. For instance, I added a function allow us to enter a phone extension to assign to the new user, and it would give us the full 10-digit phone number to assign with it, in addition to verifying that the extension was appropriate for the user's location. We had several mismatched blocks of phone numbers and extensions across the company, so this was very useful to us at the time.

During this time, our company acquired another company, so I built a specific version of the Onboarding page to help us process a large amount of employees at once, and end up with results that could be copied into a Word doc.

v5

Version 5 is the version you see today. Since version 4, we switched phone systems from on-premise Mitel to cloud-based Zoom Phone, and as a result, we no longer needed to check the phone extension in the way we did before. We also started using a new IT ticketing system (FreshService), which allowed us to send account information directly to the user within the onboarding ticket. So I redesigned the site to use a 3-column layout, one for the user input and checklist, and the other two for the results we would send to the manager and the user, respectively.

At this point, I became the manager of the IT service desk, and I needed to teach my new IT employees how to process these onboardings, transfers, and terminations. I started adding a lot more dynamic content with small blocks of instructions for them to follow. I was trying to make it as foolproof as possible for them, so they didn't feel like they had to ask me each time they didn't know what to do.

Over the past few years, the IT department starting managing more systems than before, so I had to add these in, with corresponding flipswitches, checklists, and results. Version 5 is the single largest update of this project so far.