Teamwork and team morale are the heart and life blood of an organization. When software developers join a team we want them to feel at home and included.

However without the correct onboarding process it can be a daunting experience for both the team and the new hire. Personally I've seen too many organizations with minimal, ad hoc developer onboarding.

You often feel like you are thrown in the deep end with no one to help you. Due to the pandemic this problem is exacerbated when new hires join remotely. For them without proper onboarding it becomes near impossible to get to know their coworkers and feel like a part of the team.

This leads to low team morale, low productivity and high developer turnover rate.

I found existing Monday functionality and plugins lacking transparency on its users, team structure, and project goals. I thought it would be a fantastic idea to leverage the existing user information on Monday and combine that with onboarding information. This would provide a one stop shop for new developers, especially those working remotely, to find all the information they need to succeed from day one.

Thus Onboarding Hub was born.

What it does

Onboarding Hub provides flexible and persistent documentation for the company's onboarding process. The intention is to proceduralize onboarding, have all the information in one place, and make everyone feel like a part of the team.

Gone are the days when new developers have to bookmark 20 different links where it can take up to hours to find your way around. With and Onboarding Hub all this information is in one place on the same board.

Onboarding Hub has 3 unique tabs.

💼 Onboarding tab: A rich text editor which allows you to type up your onboarding process. You can link documents, upload images or videos to help new developers succeed.

This tab is intended to provide information and FAQs about your team, your project goals, and how to set up the development environment. This will free up your team leads from repetitively helping new developers to settle in. They will no longer need to jump through hoops to find the answers they need.

🗺️ Places tab: A customizable map which allows you to add office locations around the world. You can also add nearby restaurants, parking, etc. and include a description for each location.

The places tab is intended to provide information on where to get lunch, where to get cheap parking or where the team normally hangs out after work. This information is also crucial for those who joined remotely coming into the office for the first time.

👨‍👨‍👧‍👦 People tab: A team structure diagram which pulls from the Monday's user API. You can customize who reports to whom and add information such as skills, hobbies, and whether someone is willing to mentor new employees.

The people tab will provide a detailed view of the team hierarchy. You can also search for people with specific skills or hobbies. This means if a new hire has any questions about a specific technology, wants to chat about hobbies, or needs a mentor they will know exactly who to talk to.

All the above tabs can be edited by anyone on the team. So if the new hire find anything missing or incorrect they can easily amend it.

How I built it

The front end was built with React. Third party libraries Quill, Orgchart and Leaflet were used for the rich text editor, organization chart and map respectively. Some icons are from fontawesome and some I made/remixed using GIMP.

The user information used to populate the org chart is obtained from Monday APIs. The user APIs did not allow adding additional fields to a user object so I relied on Monday storage API to store the extended user information such as skills and hobbies.

The data are stored in the database storage provided by Monday storage API. Even though the Monday storage API is in beta I still believe it is the right choice, as it reduced the number of third party dependencies. Keeping all the data within Monday just made more sense.

However there are consequences for this decision. You cannot easily transfer data between boards, but a future feature could be added to the app that allows the data to be exported as a JSON and be used elsewhere. Also there was no simple way to deal with multiple users asynchronously editing a file, so for now it would just throw an error asking the user to refresh and try again. In the future I think some kind of diff comparison (like git) would be ideal.

Challenges I ran into

I spent most of my time styling the app to improve the UX. There was also significant effort spent on getting third party libraries to work nicely with Monday APIs.

Accomplishments that I'm proud of

The app turned out looking great. After manually testing it several times I truly believe Onboarding Hub will be helpful for large teams out there that have trouble with their onboarding process and new hire turnover rates.

What I learned

How Monday works. How others use Monday. How to use Monday APIs.

What's next for Onboarding Hub

As mentioned in the previous section. Ability to export the data as JSON and back it up. Since Monday storage API is in beta and has some limitations I hope that future updates could mean more powerful backend API for Onboarding Hub as well.

Built With

Share this project: