Recruitment · B2B SaaS · Lead UI/UX Designer
Clever Recruit —
High-Density Pipeline for 200+ Candidates
Hiring teams manage hundreds of candidates across multiple roles using spreadsheets, email threads, and disconnected tools. CleverRecruit was designed to consolidate the entire process into a single, structured workflow.
Overview
Density as a
design value
CleverRecruit is an all-in-one recruitment platform with a status-driven candidate pipeline at its core, designed in Figma with a scalable design system. Every candidate entry shows current stage (colour-coded), job title, contact details, and next action — visible at a glance from the master list. The responsive mobile companion app is purpose-built for hiring manager approvals — not a shrunken desktop.
Two distinct user types shaped every design decision: recruiters who need high-density overview of all candidates at once, and hiring managers who need focused, actionable information about a specific role — primarily on mobile.
Key screens: Candidate pipeline (table view) · Candidate detail · New candidate form · Job listings · Job detail (pipeline per role) · Interview scheduler · Reports · Mobile pipeline · Mobile candidate card
Personas
Designed for
two users
Petra H.
Senior Recruiter · Daily power user
Goals
- See all 200+ candidates across 15 roles at once
- Move candidates through pipeline with minimal clicks
- Get quick decisions from hiring managers without chasing them
Pain Points
- Loses track of candidates across email threads
- No single source of truth for pipeline status
- Hiring managers respond slowly without structured prompts
Marko L.
Hiring Manager · Approver
Goals
- Review shortlisted candidates quickly on mobile
- Give structured feedback without navigating a complex system
- Make hiring decisions without leaving the tool
Pain Points
- Gets unstructured CV attachments via email with no context
- No clarity on why a candidate was shortlisted
- Mobile experience on most ATS tools is practically unusable
Discovery
Research
findings
| Finding / Insight | Design Response |
|---|---|
| Recruiters need to scan 20+ candidates at once — density is a feature, not a problem | Table view as default: sortable columns, status colour-coding, bulk actions. Whitespace is a liability for power users. |
| Hiring managers primarily use the system for approvals, not pipeline management | Mobile companion designed specifically for the approval use case — not a shrunken desktop. |
| Status is the primary organiser in every recruiter's mental model | Status as the dominant visual element — colour-coded, always visible, sortable by default. |
| Bulk operations are essential for recruiters processing high daily volumes | Bulk select with checkbox column; bulk action toolbar appears on any selection. |
| Saved filters are essential for recruiters managing multiple simultaneous roles | Persistent filters at session level; named filter presets for saved common views. |
Process
From research
to prototype
Week 1
Research
• User research & recruiter interviews
• ATS competitive audit
• Pain point mapping
• ATS competitive audit
• Pain point mapping
Week 2
IA & Structure
• Information architecture
• Role-based IA comparison
• Cross-platform responsive strategy
• Role-based IA comparison
• Cross-platform responsive strategy
Weeks 2–3
Wireframes
• Wireframing (desktop table + mobile)
• Mobile-first approval view
• Filter system interaction design
• Mobile-first approval view
• Filter system interaction design
Weeks 4–5
Visual Design
• Figma design system & component library
• Status colour system
• Responsive breakpoints
• Status colour system
• Responsive breakpoints
Week 6
Prototype & Test
• Usability testing (recruiter walkthrough)
• Hiring manager mobile test
• Iteration on key flows
• Hiring manager mobile test
• Iteration on key flows
Information Architecture
Every screen
mapped
| Screen / State | Purpose | Key elements & decisions |
|---|---|---|
| Dashboard | Pipeline overview & metrics | Candidates by stage · Recent activity · Outstanding actions · Quick filters |
| Candidates (master list) | Full candidate database with filtering | Sortable table: name, title, email, stage (colour-coded), last contact · Bulk select · Search · Add new |
| Candidate Detail | Single candidate profile | Contact info · Application history · Interview notes · Status timeline · File attachments · Email log |
| New Candidate | Manual candidate creation form | Name · Contact · Role · Source · Stage assignment · CV upload — minimal required fields |
| Jobs | Active role management | Job list with candidate count per stage · Open/filled/paused status · Create new job |
| Job Detail | Per-role pipeline view | Kanban or table view per job · Candidates grouped by stage · Stage move actions |
| Interview Scheduler | Calendar-based interview management | Available time slots · Send invite · Calendar integration · Confirmation flow |
| Reports | Pipeline analytics | Time-to-hire · Source effectiveness · Stage conversion rates · Export to CSV |
| Mobile: Pipeline | Condensed pipeline for hiring manager approvals | Card view by stage · Swipe for quick status change · Filter by role |
| Mobile: Candidate | Candidate detail on mobile | Key info · Quick action buttons (approve/decline/message) · Notes input |
| Settings | System configuration | User management · Stage name customisation · Email templates · Notification rules |
User Flows
Step-by-step
journeys
Recruiter — processing a new applicant
Applicant received→
Add to Candidates→
Assign to role→
Stage: Applied→
Review CV→
Stage: Screening→
Schedule call→
Shortlist or Reject→
Notify hiring manager
Hiring manager — mobile approval flow
Email notification→
Open mobile app→
View shortlisted candidates→
Review each profile→
Add feedback note→
Approve / Decline→
Recruiter notified→
Next stage triggered
End-to-end pipeline
Job created→
Candidates sourced→
Screening stage→
Interview stage→
Assessment stage→
Offer stage→
Hired→
Job closed→
Report generated
Design Decisions
Every choice
justified
| Decision Made | Why — Rationale | Alternative Rejected |
|---|---|---|
| Table view as default | Recruiters with 200+ candidates need density. A table shows 20+ rows simultaneously with sortable columns. Whitespace is a liability for power users. | Kanban as default — available as a per-job view for hiring managers, but too sparse for the master candidate list. |
| Status colour-coding | Stage must be readable scanning 50 rows in 0.5 seconds. Colour achieves this; text labels alone require reading time. | Text-only status labels — tested slower for scan-and-identify tasks in competitive audit. |
| Mobile as approval tool | Full desktop parity on mobile compresses a dense B2B tool into unusability. Different users, different jobs, different designs. | Responsive desktop — tested and rejected; table-based workflows do not compress to mobile without losing core value. |
| Persistent filters | Recruiters who filter by role or stage need that filter to persist. Resetting on every page load adds repetitive friction for daily users. | Reset-on-navigate — standard pattern but hostile to power users who filter once and work within that view all day. |
| Bulk actions | Recruiters process candidates in batches after screening calls. One-at-a-time stage changes for 15 candidates is 15× the work. | Individual actions only — simpler to build but fails the primary use case of batch processing. |
Outcomes
Results that
matter
200+ rows
Scannable at a glance with colour-coded status pipeline
2 platforms
Desktop for recruiters (density) · Mobile for hiring managers (approvals)
< 3 clicks
Dashboard to any pipeline action
Wireframes
Screen-level design
Mockups
Desktop screens
Mobile
Hiring manager experience
Style Guide
Brand system
Colour Palette
Primary
Blue 0
#e7f5ff
Blue 2
#a5d8ff
Blue 4
#4dabf7
Blue 6
#228be6
Blue 8
#1971c2
Blue 9
#1864ab
Secondary
Gray 0
#f8f9fa
Gray 3
#dee2e6
Gray 6
#868e96
Gray 7
#495057
Gray 8
#343a40
Gray 9
#212529
Success
Teal 0
#e6fcf5
Teal 3
#63e6be
Teal 6
#12b886
Teal 9
#087f5b
Warning
Yellow 0
#fff9db
Yellow 4
#ffd43b
Yellow 6
#fab005
Yellow 9
#e67700
Danger
Red 0
#fff5f5
Red 4
#ff8787
Red 6
#fa5252
Red 9
#c92a2a
Typography — Roboto
Light
ABCDEFGHIJK LMNOPQRSTU VWXYZ
Regular
ABCDEFGHIJK LMNOPQRSTU VWXYZ
Medium
ABCDEFGHIJK LMNOPQRSTU VWXYZ
Semi Bold
ABCDEFGHIJK LMNOPQRSTU VWXYZ
Bold
ABCDEFGHIJK LMNOPQRSTU VWXYZ
Iconography — Tabler Icons
Border Radius
0px — Tables
4px — Badges
8px — Cards
12px — Panels
50% — Avatars
Spacing Scale
8px
12px
16px
24px
32px
48px
Design case study exploring the tension between information density and usability in B2B recruitment tools. Full information architecture, user stories, interaction design, cross-platform Figma prototype, and design system completed; not implemented in production.
