Carol Moran

Product Designer

Yellow Bird

A human resources web app designed to facilitate smooth onboarding

Project brief

A one-week individual project to design a HR-related SaaS (software as a service) desktop web app for companies to use internally.

What is onboarding?

The process of integrating a new employee into an organisation
Generative research revealed that it is a problem area for many companies
Good onboarding is one of HR's secret weapons. Two reasons why it is important:

To retrain new employees
To help new employees engage and perform

“If you’re doing it right, you’re setting everyone up for success”

Bernat Vazquez, Typeform

Stakeholders in the onboarding process

Who's involved?

I was curious about how the onboarding process works: what happens, how long it takes, who is involved.

One of the challenges of onboarding is the number of people involved in the process
The platform would need to cater for multiple users

Interviewees

Interviews and Analysis

Gathered insights from multiple perspectives
5 interviews with representatives from companies of varying sizes.
3 from Human Resources department, 1 team manager, and 1 employee
Competitive analysis revealed that onboarding is a secondary function within larger platforms
Existing programs focus on admin process only

Task Analysis of current process

Insights

Onboarding process varies widely from company to company
The new employee’s direct manager (also referred to as the hiring or team manager), plays a vital role in the process
Onboarding success depends on how much time or effort is given by the individual team manager — something which varies considerably
Human Resources department are involved with coordinating the process before the new employee starts
Most companies do not currently keep track of onboarding after the first few days
Ad hoc approach to communication with new employees ahead of start date, and feedback from new employees

Meet the Users...

By now, I had a clearer picture of who does what and what their goals are.

I learnt from my research that the team manager plays a critical role in determining the success or failure of the onboarding process
Therefore, I decided that Mike would be the primary user persona for the app.

...and their Stories

User stories helped me to define different functionalities of the web app.

A structured process emerged as a primary function of the web app
Many of the other stories (or functionalities) could be built upon that basic structure

Analysing the Insights

Next, I created affinity diagrams to help synthesise my findings (see below).

In the first one, I ordered the onboarding process chronologically
In the second, I regrouped my findings by theme

Looking beyond the first or most obvious way to frame the problem, opened up new ways of understanding it.

This thematic analysis broke the process down into three key areas, which became the basis for the web app’s organisational structure.

Admin. This refers to all the administrative elements required when somebody starts at a company, such as personal details, IT equipment, visa, assigning a desk, etc..
Welcome. This is the name I chose for the ‘soft-landing’ tasks highlighted below, non-work related and less tangible elements, such as company culture, and social integration.
Work. This refers to introducing the new employee to what they need to do and how to do it. Everything they need to carry out their job.

Lost in Translation!

I started to develop the web app based on this organisational structure.

I used several techniques to help translate my findings into features (MoSCoW, 2x2, Crazy 8s), but it soon became overwhelmingly complex.

With the first, low-fidelity prototype, I tried to cater for all possibilities. Testing was confusing.

Mid-fidelity wireframes

Eureka!

I realised that I didn’t need to create a feature for every task in the process.
The app would provide a framework for a bespoke system.
The basic building block of that system would be the ‘Create Task’ function: a flexible template that would enable those designing the onboarding process to tailor it to their needs.
A basic structure of tasks (or templates) will be provided.

User Testing at Typeform

User Testing

I tested the mid-fidelity prototype with Bernat Vazquez and Laura Garcia at Typeform, and Andrea Moreno at iBus Media.

Key user flows that I wanted to test were: ‘Create New Onboarding' and ‘Create Task’. Tests included scenarios, desirability testing, and the 5-second test.

Feedback

Inspirational images

Look and Feel

One of my interviewees suggested that the app should be ‘fun’ and ‘human’. Early in the process, I started to think about metaphors that could help develop that aesthetic—sunrise, sunflowers, acorns to oak trees, birds taking flight—and associated colour themes.

Style Tile

Next, I created a high-fidelity prototype that incorporated this feedback and represented a minimum viable product.

I formalised the style tile, toning down the colours, and consolidated the text styles.

The bird theme was popular during mid-fidelity testing, and lends the product an element of playfulness.

Prototype

The resulting high-fidelity prototype brings together my research insights and user feedback, to create a platform that facilitates a structured yet flexible onboarding process.

‘Add New Task’ function allows HR or hiring managers to fully customise the process.
Once created, this structure helps team managers to organise the process.
The ‘Assign Task’ function allows managers to delegate tasks as required.
HR can check on the process without micromanaging.