Clever Recruit —
High-Density Pipeline for 200+ Candidates
End-to-end product design for a B2B recruitment platform — from user research and information architecture through to high-fidelity Figma prototypes, a scalable design system, and front-end implementation in React. This project demonstrates my complete design process and ability to bridge design and development.
Density as a
design value
CleverRecruit is a B2B recruitment platform I took from problem definition to shipped product. The design challenge: how do you give recruiters the information density they need (200+ candidates scannable at a glance) while keeping the interface learnable and accessible for occasional users like hiring managers?
I led the entire design process — user research, persona development, information architecture, wireframing, component-based design system in Figma, interaction design, usability testing, and responsive cross-platform strategy. Then I validated the design by building the complete front-end in React, proving every interaction, state, and edge case works in production.
Delivered screens: Dashboard · Candidates (full CRUD + filtering) · Jobs (lifecycle management) · Companies · Team · Calendar/Interviews · Reports/Analytics · Settings (profile, appearance, notifications) · Authentication · Dark mode · Global search (⌘K)
Designed for
two users
- 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
- Loses track of candidates across email threads
- No single source of truth for pipeline status
- Hiring managers respond slowly without structured prompts
- Review shortlisted candidates quickly on mobile
- Give structured feedback without navigating a complex system
- Make hiring decisions without leaving the tool
- 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
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. |
From research
to shipped product
This project followed a structured design thinking process — each phase produced concrete deliverables that informed the next.
• ATS competitive audit (5 tools)
• Jobs-to-be-done mapping
• Pain point synthesis
• Personas & user stories
• Role-based navigation strategy
• Cross-platform scope definition
• Design system & component library
• High-fidelity mockups
• Interaction specifications
• Hiring manager mobile test
• Interaction refinement
• Accessibility review
• Design-to-code validation
• Edge case resolution
• Production deployment
Every screen
mapped
| Screen / State | Purpose | Key elements & implementation |
|---|---|---|
| Dashboard | Pipeline overview & metrics | Stat cards (candidates, jobs, interviews, hires) · Recent activity feed · Clickable navigation to detail pages |
| Candidates | Full candidate database with CRUD | Sortable table with colour-coded status · Create/Edit/Delete modals · Filter by stage · Detail drawer with timeline · Search |
| Jobs | Active role management | Job table with company logos · Create/Edit/Delete · Close/Reopen actions · Detail drawer with candidate count |
| Companies | Company profiles & management | Card grid with live logos (DeBounce API) · Add/Edit/Delete · Detail drawer · Open positions count |
| Team | Team member directory | Member cards · Clickable detail drawer with stats · Managed candidates list · Role-based display |
| Calendar / Interviews | Interview scheduling | Month calendar view · Navigation arrows · Today button · Schedule interview modal · Event indicators |
| Reports / Analytics | Pipeline analytics | Time period selector · Pipeline funnel · Source effectiveness · Time-to-hire metrics · CSV export |
| Settings | User & app configuration | Profile management with avatar upload · Notification preferences · Appearance (light/dark) · Password change with validation |
| Login / Auth | Authentication & access control | JWT-based auth · Protected routes · UserContext for global state · Persistent sessions |
| App Shell | Global layout & navigation | Collapsible sidebar · Global search (⌘K) · Notifications panel · Light/Dark mode toggle · Responsive mobile drawer |
Step-by-step
journeys
Every choice
justified
Recruiters and hiring managers evaluate design thinking — not just visual output. Here's how I justified each core design decision with evidence, and what I deliberately rejected.
| 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. |
Results that
matter
Screen-level design
Desktop screens
Hiring manager experience
The mobile experience focuses on the hiring manager approval loop — review shortlisted candidates, add feedback, and approve or decline on the go. Tap through the live prototype below.
Interactive Prototype — Scroll & tap to explore
Swipe and tap to explore the mobile candidate review flow · Open in new tab
Interactive
walkthrough
Explore the live desktop application below — navigate through the dashboard, candidates, jobs, and more to experience the full recruitment workflow. For the hiring manager mobile flow, see the interactive prototype in the Mobile section above.
Tap the menu to navigate on mobile · Open in new tab
From design
to code
| Layer | Technology | Why chosen |
|---|---|---|
| Frontend | React 18 · Vite · TypeScript | Component-based architecture matches the design system; Vite for fast development iteration |
| UI Library | Mantine v7 | Accessible components, built-in dark mode, form handling, and notification system — minimal custom CSS needed |
| Icons | Tabler Icons | Consistent stroke-based icon set; native Mantine integration |
| Backend | Node.js · Express · TypeScript | Same language as frontend; Express for lightweight RESTful API |
| Database | PostgreSQL · Prisma ORM | Type-safe database access; auto-generated migrations; relational data model suits recruitment pipelines |
| Auth | JWT · bcryptjs | Stateless authentication; protected routes via React Context |
| State | TanStack Query · React Context | Server state caching with TanStack; global user/theme state via Context API |
Brand system
What this project demonstrates
This project shows my ability to own a product end-to-end: defining the problem through user research, structuring information architecture for complex data, designing scalable component systems in Figma, making deliberate interaction design decisions backed by rationale, and validating designs by building them. Every design decision on this page is justified — not decorative.
