Collaborative recruiting software
Redesigning the hiring workspace
01 Overview
Where hiring teams work together
Comeet is an applicant tracking system for companies that hire as a team. Recruiters, hiring managers and interviewers share a position’s workflow, move candidates step by step, and pick up the tasks it hands them.
-
My role
Product designer, end to end
I take projects from research and information architecture to dev-ready files and design QA, and turn what they need into documented components.
-
The problem
Hiring had outgrown the workspace
Positions buried candidates and workflows, sourcing lived outside the product with no home for leads, and duplicated components slowed every new screen.
Four chapters, one structure
Each project opens with its challenge and outcome, then the decisions that got it there.
-
2021 – 2022
Design system
A 39-component library with usage, states and writing rules.
-
2022 – 2023
Position redesign
A position page that opens on the hiring pipeline, built on four layout modes.
-
2022 – 2023
Candidate profile
A header, jump-to tabs and a workflow card with the next action.
-
2023
Leads & outreach
Sourcing inside each position, from a lead’s first email to their hiring workflow.
02 Design system
A component library the whole product shares
Challenge
Comeet runs on a modified Ant Design, and variants had piled up as features shipped: two buttons doing the same job, empty states in three sizes, no written rule for which to use.
Outcome
A Figma library of 39 components and 1,861 variants. Core ones — buttons, alerts, empty states — carry usage rules, anatomy, spacing, states, writing guidelines and a changelog.
The constraint
No visual overhaul — it would have stalled development for months. Same familiar look, fixed foundations underneath.
Before touching layout or flows I audited every component against the Ant Design base, merged duplicates, closed variant gaps and documented each core piece — one source of truth designers assemble from, developers build from, and recruiters recognize on every screen.
Comeet UI kit: primary, default and link buttons in general, neutral, danger and success variations, with icon, disclosure, disabled and loading states; colored tags; status pills and badges; candidate avatars in three sizes with a photo, a placeholder and a badge; step tiles in future, current, completed and automated states; a step progress bar; jump-to links and a compact empty state.
-
Candidate avatars
Candidates in three sizes, with placeholders, badges and step progress.
-
Step tiles
Hiring stages as tiles — future, current, completed, automated — with jump-to links.
03 Position redesign
A position page that starts with the work
Challenge
The position page buried candidates and the workflow behind an accordion in settings. Every page arranged itself differently, and a list and a candidate couldn’t sit side by side.
Outcome
A position page that opens on the hiring pipeline — the first milestone handed to development — built on a four-level layout later milestones extend to every section.
How might we
give recruiters an easier way to screen candidates with fewer clicks to the next step?
Starting from the anatomy of a page
The position page was the pilot. I sorted Comeet’s screens into page types — lists, tables, builders — and gave them one anatomy: constant top nav, hideable secondary nav, one working area.
Four levels, four modes
Four levels that switch between four modes — a structure later milestones extend to every page.
Switch modes, rebuilt in code
Navigation mode. The sidebar is open and the list takes the rest of the screen.
Compare versions
Drag to compare the original position page with the redesign. A teammate’s name in the original is blurred.
A roadmap that ships in steps
A full redesign needed a new information architecture, so I planned it in milestones. The first two bring candidates and the workflow onto the main page inside today’s navigation; the last two replace the architecture and the navigation around it.
Vision: the new layout and navigation
Milestone 4 sketches where the product heads next: one icon rail for the main areas, with tasks, inbox, dashboard and positions a click away. Today they hide in the profile menu, where people struggle to find them.
User feedback
The side-by-side list and profile people loved stayed put, and a full-screen overview added what was missing — the whole flow now reads at a glance.
04 Candidate profile
A profile that leads with the next step
Challenge
One long page: step boxes and a duplicate warning above the candidate’s name, details in two columns, activity in the middle, and the resume, evaluation and positions in tabs at the very bottom.
Outcome
A header for who they are and where they stand, tabs with jump-to links for everything they sent, and a rail with the current step, its action and the activity around it.
From one long page to next-step-first
The original stacked step boxes, details, activity and tabs into one scroll. The redesign gives each a place: a header for the person, tabs for what they sent, a rail for what to do now.
Drag to compare the original profile with the redesign, shown here beside the list. Contact details and teammate names in the original are blurred.
What to do next, with nothing hidden
The next step now leads. Every detail stays one jump away.
A workflow card that answers “what now?”
The card follows the candidate: dots for past, current and upcoming steps, an assignee per step, and one main button — the step’s own action.
User feedback
Users liked a profile that tells them what to do: the minimized card scans in seconds, the expanded one carries the full picture.
05 Leads & outreach
Sourcing inside the position, not beside it
Challenge
Someone a recruiter found on LinkedIn had no status, no outreach from inside Comeet, and nothing to tell them apart from an applicant. The emails that turn strangers into hires lived outside any workflow.
Outcome
A Leads tab on every position with outreach statuses, email workflows that send automatically or wait for approval, and one-click conversion into the hiring workflow.
Leads and the outreach that moves them
Leads are the who: their own tab on the position, grouped by outreach status, each profile opening beside the list.
Outreach is the how: email steps with waits between them, moving leads through those statuses until a reply converts one into a candidate.
Email: Intro
Pending
ACME Company
Intro to ACME
Dear [Candidate’s Name], greetings from [Your Company]! Your skills and experience caught our attention, and we’d love to tell you about a role on our team.
Edge cases covered
- Possible duplicates flagged when a lead is added
- Bulk actions for selected leads
- Quota states for admins and non-admins
- A Discover action when a lead has no email
- Not interested and No response follow the Withdrawn flow
- Interested follows the flow back to In progress
06 Impact
What changed across the product
Four projects turned a fixed shell into a workspace that adapts to the task: a page that leads with the work, a profile that says what to do next, sourcing where hiring happens — every screen drawn from one documented library.
-
Position redesign
Challenge: One fixed arrangement for every page
Design response: Four levels and four modes, with a transition spec
-
Position page
Challenge: Status counters, with the workflow a tab away
Design response: A hiring pipeline with task filters and assignee photos
-
Candidate profile
Challenge: One long page with the tabs at the bottom
Design response: A header, jump-to tabs and a workflow card with the next action
-
Sourcing
Challenge: No place for people before they applied
Design response: A Leads tab with outreach statuses and one-click conversion
-
Outreach
Challenge: Emails sent outside any workflow
Design response: Automated and manual email steps with waits, quotas and statuses
-
System
Challenge: Overlapping variants and no usage rules
Design response: 39 components, with usage and writing rules for the core ones
07 Takeaways
What this work taught me
-
Design the rules, not every screen
Four levels and four modes cover pages that don’t exist yet. A mockup per screen never could.
-
A calmer page, same map
Shipping a calmer page inside the old information architecture meant nobody had to relearn where things live.
-
Words decide what people see first
Leads instead of prospects, Not contacted instead of Sourced, pending tasks instead of all candidates: naming changed the product as much as the layout did.
