WorkAboutMarketplaceContact
+ Get in touch Open to work
Work
Case Study · Hiring Platform

One hiring platform, three sides, zero friction.

Product design for OnJob.io — a hiring platform with three connected portals: recruiters who post and manage roles, candidates who apply and track, and staffing vendors who supply talent. I designed all three web experiences into one coherent system. A candidate-side mobile app extends it.

Visit platform
Role
Product Designer — sole designer
Timeline
2023 — 2024
Team
2 PMs · 5 engineers
Platform
Web app (3 portals) + mobile
Scope
Research → UX → UI → Design system
Tools
Figma · FigJam
3
Connected portals
150+
Screens designed
1
Shared design system
3-sided
Marketplace UX

Overview

OnJob.io is a three-sided hiring marketplace. Recruiters open roles and manage their pipeline, candidates discover jobs and track applications, and staffing vendors submit and manage their talent — all on the same platform. I designed every portal as the sole designer.

The challenge of a multi-sided product is coherence: three audiences with very different jobs, who must feel like they're using one trustworthy platform. The work was as much about a shared system as it was about each screen.

The problem — three sides, three silos.

Hiring rarely happens between two parties anymore — recruiters, candidates, and vendors all touch the same role. But the tools treat them as separate worlds, so context and time get lost in the gaps.

OnJob set out to connect all three on one platform. For every seam between the sides, the design closed it with a shared, consistent pattern.

The problemOur solution
  • Recruiters juggled roles across spreadsheets and inboxes.

    A recruiter dashboard that runs every role and pipeline in one place.

  • Candidates never knew where their application actually stood.

    A candidate portal with real-time status and clear next steps.

  • Vendors submitted talent over email with no visibility.

    A vendor portal to submit, track, and manage candidates directly.

  • Three audiences meant three inconsistent experiences.

    One design system unifies all portals into a single, trusted product.

  • Hand-offs between sides dropped context and slowed hiring.

    Shared records and messaging keep everyone on the same page.

Design goals

01

Give each side a focused workspace built around its real job.

02

Make the three portals feel like one coherent, trustworthy platform.

03

Remove the email-and-spreadsheet hand-offs between sides.

04

Design a role-aware system that scales as the platform grows.

05

Ship a candidate experience that also works beautifully on mobile.

Process — mapping three journeys.

Three phases, one designer, end to end. A multi-sided product means mapping three journeys and finding where they meet — so the work started by untangling who needs what, when.

DiscoverDesignDeliver

The full design journey — drag the canvas to explore it like a map.

  1. Discover · 01

    Stakeholder & user research

    Interviewed recruiters, candidates, and vendors to map each side's jobs, frustrations, and the moments where they hand off to one another.

  2. Discover · 02

    Mapping the shared journey

    Charted how a single role moves across all three portals to find the seams where context was being lost.

  3. Design · 03

    Information architecture

    Designed three focused portals on one backbone — shared records, roles, and messaging — so each side sees only what it needs.

  4. Design · 04

    Flows & wireframes

    Built the core loops for each side — post, apply, submit, track — and tested them before any visual polish.

  5. Design · 05

    Visual design & system

    Created a role-aware UI and codified it into a design system with shared components and portal-specific accents.

  6. Deliver · 06

    Validation & handoff

    Prototyped with real users from each side, refined the flows, and partnered with engineering through build.

Inside the product

Each portal is a focused workspace, but they share one backbone — so a role, a candidate, and a conversation mean the same thing everywhere.

Recruiter dashboard

Every open role, its pipeline, and what needs attention — at a glance.

Job posting & management

Guided role creation that captures the right requirements up front.

Candidate pipeline

A clear stage-by-stage view of every applicant for a role.

Candidate portal

Discover jobs, apply in a tap, and track real-time status with clear next steps.

Vendor portal

Submit, track, and manage supplied talent — with full visibility for the first time.

Shared messaging

Conversations tied to roles and candidates, so nothing lives in a silo.

Key screens

A look across all three portals. (Placeholders for now — real screens drop straight in.)

Recruiter dashboard
Recruiter dashboardEvery role and pipeline in one place.
Candidate pipeline
Candidate pipelineApplicants, stage by stage.
Candidate portal
Candidate portalApply and track in real time.
Vendor portal
Vendor portalSubmit and manage talent with visibility.
Shared messaging
Shared messagingContext tied to every role.

Design system

Because three audiences share one platform, the system carried the load — a neutral base with one primary purple, plus a color for each portal so people always know which side they're on.

InterAa Bb Cc 0123UI typeface · weights 400–600

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 & @ # % ( ) ! ?

Brand & accent

Primary action
HEX#8B5CF6
RGB139, 92, 246
CMYK43, 63, 0, 4
Primary press
HEX#7C3AED
RGB124, 58, 237
CMYK48, 76, 0, 7
Deep accent
HEX#6D28D9
RGB109, 40, 217
CMYK50, 82, 0, 15

Surface & borders

Surface
HEX#FFFFFF
RGB255, 255, 255
CMYK0, 0, 0, 0
Background
HEX#F7F7FB
RGB247, 247, 251
CMYK2, 2, 0, 2
Border
HEX#ECECF3
RGB236, 236, 243
CMYK3, 3, 0, 5
Strong border
HEX#E2E2EC
RGB226, 226, 236
CMYK4, 4, 0, 7

Text

Main text
HEX#14111D
RGB20, 17, 29
CMYK31, 41, 0, 89
Sub text
HEX#5B5870
RGB91, 88, 112
CMYK19, 21, 0, 56
Placeholder
HEX#9B98AC
RGB155, 152, 172
CMYK10, 12, 0, 33

Gradients

Brand · 135°
Vertical
Radial glow
Sheen

Portal accents

RecruiterCandidateVendor

Role-aware everywhere

Color and navigation always signal which side of the platform you're on.

One backbone, three lenses

Shared records and components, with each portal showing only what matters to it.

Trust through consistency

Every side feels like the same platform, so the whole marketplace feels credible.

Built to scale

A token-driven system ready for new roles, portals, and features.

Outcome & impact.

OnJob became one platform where recruiters, candidates, and vendors finally work in the same place — no more email-and-spreadsheet hand-offs, no more lost context.

The role-aware design system keeps three very different experiences feeling like one trustworthy product, and gives the team a foundation to add new sides and features quickly.

3
Portals unified
1
Shared design system
150+
Screens designed
Web + App
Candidate on every device