AbbasHabhab
← All work
Case study Onboard Onboarding portal web app

Connecting the two sides of job onboarding

  • User Flows
  • Web App Design
  • Iterative Testing

An onboarding platform connecting HR and new hires in one place. I mapped both sides of the experience and designed a simpler way to manage documents, tasks, signatures and onboarding progress.

Role
Experience Researcher, Interface Designer
Scope
Web app design, research
Tools
Figma, pen & paper
Duration
1 month
Onboard
New-hire welcome page with profile progress, company documents due date and the required sections
The new-hire home screen: profile progress, company documents with a due date, and every onboarding section in one list.
01

An onboarding process held together by hand

The onboarding process for new hires was inefficient, requiring HR to juggle time-consuming administrative tasks with daily responsibilities. Although a system existed, it was fragmented and overly reliant on manual processes.

Delays and overload for HR. Scattered workflows and unclear tasks for new hires.

02

Two users, one platform

Designing for both HR professionals and new hires meant balancing two distinct sets of needs within a single platform. A seamless experience meant simplifying complex workflows without compromising essential HR functionality.

The goal was a portal where new employees could upload documents, sign contracts electronically, complete training modules and access key resources in one place, while HR teams could track submissions, monitor progress and manage records more efficiently.

03

What the research showed

  • HR teams found the fragmented process too time-intensive.
  • New hires wanted a single, accessible platform to manage their onboarding tasks.
  • Both groups wanted better tracking and smoother document management.

I mapped detailed workflows for both HR and new hires, prioritized the key tasks on each side, and refined the interactions through testing.

04

One place for a new hire to start

The new-hire side opens on a single page: what to complete, what is due and when. Company documents, required documents and profile sections sit in one list, so progress is visible from the first visit.

Sign-in with email or phone number.
The new-hire home: profile progress and each required section in one list, with a flag on what needs attention.
05

Documents upload

Simplified document submission with a notification feature for delayed items. Each document shows its own status, and a rejected upload says what went wrong next to the file it belongs to.

Required documents, each with its own status: approved, pending, or sent back with a reason.
06

E-signature

Enabled new hires to electronically sign and submit documents for HR review, without leaving the portal or printing anything.

Company documents waiting for a signature, with a clear error when a signature doesn't match.
Choosing how to sign, directly on the agreement: type, draw, initials or an image.
07

The HR side

Provided HR with a centralized view of employee profiles, document statuses and onboarding progress. From one candidate's page, HR can approve or reject each document without switching tools.

Every new hire and their onboarding status in one list.
Reviewing one new hire's documents, with status and actions on each row.
OutcomeDesigned iteratively with HR teams, developers and onboarding coordinators

Less chasing for HR, a smoother start for new hires.

The platform streamlined the onboarding process, reducing delays, enhancing organization and improving efficiency. HR teams could focus on employee engagement, while new hires experienced a smoother integration.

The power of collaboration

Cross-functional teamwork with diverse departments emphasized the importance of clear communication and alignment.

Designing for diverse users

Mapping user journeys for multiple personas taught me how to address unique needs and create an inclusive, intuitive experience.