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

Yellow Bird

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
Yellow Bird


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
Yellow Bird

Task Analysis of current process


  • 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

Yellow Bird

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.

Yellow Bird

...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.

  1. 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..
  2. 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.
  3. 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.

Yellow Bird
Yellow Bird

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.

Yellow Bird

Mid-fidelity wireframes


  • 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.

Yellow Bird

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.

Yellow Bird


Yellow Bird

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.

Yellow Bird

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.

Yellow Bird

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.


3-6 Months

  • Test, iterate, test, iterate, test, iterate…
  • Integrate other HR platforms for information sharing (Namely, Factorial, Lever)
  • Integrate other platforms for task creation (Typeform, Google Calendar, etc.)
6+ Months

  • Build frontend platform for new employee

12+ Months

  • Start developing Professional Development and Performance sister app