Toppick.io
The AI-powered control center for modern recruitment
Toppick.io is a B2B SaaS platform that helps companies automate and streamline their entire hiring pipeline — from posting vacancies and screening candidates to conducting AI-powered interviews and generating data-driven reports.
My role on this project was dual: I designed the full product from the ground up in Figma, then built it in React — owning both the user experience and the frontend implementation end-to-end.
Everything at a glance — the HR command center
The dashboard gives HR teams an instant overview of their recruitment health: active jobs, total applications, CV count, and a real-time "time saved" metric that visualises the platform's direct value. Application trends and an interview calendar keep the full pipeline visible without switching screens.
Dashboard — live stats, application table, interview calendar
Key feature highlights from the landing page
Create, track, and manage every vacancy in one place
The jobs board gives HR managers a full overview of all active, passive, and draft vacancies in a card-based layout. Each card surfaces the key details at a glance — role, location, type, and application count — without needing to open the job.
- Filter by date, department, and position
- Active / Passive / Draft status system
- One-click job creation with a structured form
- Direct link to candidate pipeline per vacancy
A public job board built for candidates too
Beyond the HR dashboard, Toppick also serves job seekers with a clean public vacancies page. Candidates can filter by work type, date, and employment type, then apply directly — all within the same platform.
- Advanced filters: date, work type, employment type
- Email alerts for new vacancies
- Real-time listing with apply-now flow
- Consistent design language with the HR product
Landing page & About Us — converting visitors into customers
The marketing side of Toppick was also fully designed and built. The landing page leads with the core value proposition, showcases key features, social proof from real hiring teams, and a strong conversion CTA. The About Us page tells the company story with clear mission and vision statements.
Landing Page · About Us
Clean, structured account management
The profile section keeps account management simple — tabbed navigation separates profile info, settings, password, and usage limits so users always know exactly where to go. The layout scales cleanly for both individual and company accounts.
- Tabbed layout: Profile · Settings · Password · Usage Limit
- Company branding upload
- Minimal, distraction-free form design
Designed it. Then built it.
Working as both Product Designer and Frontend Developer on the same product meant every design decision was made with implementation in mind — and every component I built in code matched exactly what was in Figma.
- Full product design in Figma — flows, wireframes, high-fidelity UI, component library
- Frontend development in React — translating every screen from design to code
- Design system ownership: tokens, components, spacing, and interaction states
- Close collaboration with the backend team on API integration and data display
- Continuous iteration based on user feedback post-launch
See it in the real world
Toppick.io is live — explore the platform yourself.