JobzShala
Six interconnected recruitment portals — job seekers, employers, campus students, college admins, staffing agencies, and enterprise ATS — all sharing one design system. 240+ screens. 8 months. One designer. All live.
My Role
Sole Product Designer + Engineering Contributor
Duration
8 months
Year
2024
Tools
Figma · FigJam · React/Next.js · Chart.js · SCSS
Project Brief
Design the complete JobzShala platform ecosystem — six interconnected recruitment portals serving job seekers, employers, college students, placement coordinators, staffing agencies, and enterprise HR teams — from a single token-based design system, live in production.
Six interconnected recruitment portals — job seekers, employers, campus students, college admins, staffing agencies, and enterprise ATS — all sharing one design system. 240+ screens. 8 months. One designer. All live.
Platform Architecture
6 portals. 1 design system. All live.
Every portal in the ecosystem was designed by one freelance designer and went live in production — serving six distinct user types under a single unified brand.
Main Portal
Job Seekers & Employers
8–10 React/Next.js + Chart.js components implemented to unblock dev team
Hiring Portal
HR Teams & Employers
B2B SaaS — subscription tiers ₹35K–₹1.2L/yr; AI candidate search included
Campus Portal
College Students
B2B2C — Visume (video resume) feature; students access via institutional account
College Portal
Placement Coordinators
Bulk student upload with 6-state validation flow; 1,276-record test case confirmed
Recruit ATS
Staffing Agencies
Triple-entity model: Clients × Candidates × Team; 12-column recruiter analytics
ATS Landing Page
Enterprise Agency Prospects
Lead capture funnel → Recruit ATS sales pipeline
My Ownership Breakdown
The Problem
Six user types. Zero shared experience. Every participant in India's hiring lifecycle was using a different product — none of them talking to each other.
India's recruitment market was fragmented: job seekers on Naukri, employers on LinkedIn India, college placement cells in Excel sheets, staffing agencies running their own ATS. There was no platform bringing all six audiences into one coherent brand architecture — sharing candidate data, job listings, and business intelligence across the funnel.
No unified candidate identity
A job seeker on jobzshala.com was invisible to the Campus Portal student, the Hiring Portal employer, and the Recruit ATS recruiter — even if they were the same person.
Campus hiring was manual
College placement coordinators managed placement drives via WhatsApp groups, PDF schedules, and manual shortlisting — no digital workflow.
No subscription business model UX
The employer-side had no clear SaaS pricing architecture — no tiered plans, no credit system for candidate unlocks, no billing interface.
AI features with no design system
AI Resume Maker, AI candidate search, and AI screening questions were planned but had no consistent UI pattern for AI-generated content across portals.
UX Audit
What was broken before we redesigned
A heuristic evaluation of the existing system identified these critical issues before any design decisions were made.
No cross-portal IA strategy
Each portal being designed in isolation — no shared navigation pattern, no unified component language.
IANo design system foundation
Without tokens, six portals would visually diverge after the first sprint — impossible to maintain consistency solo.
Design SystemSubscription UX not designed
B2B pricing, credit-gated candidate access, and GST invoice management had no UX precedent in the codebase.
Business ModelOur approach: Design system first, then portals — not the reverse
Built the full token-based design system (6 colour palettes, 9-step scales, 13-size type system, 12+ button variants, 4 sub-brand logos) before designing a single product screen. Designed each portal in priority order with cross-portal interdependencies mapped upfront.
Process & Approach
How I approached the challenge
Ecosystem Architecture
Mapped all 6 portal relationships: College → Campus student identity chain, Hiring → Campus opportunities mode, Main Portal as SEO acquisition engine. Cross-portal data flows documented before design began.
Design System Build
6-palette, 9-step token scales; 13-size type scale (Major Third multiplier); 12+ button variants; 4 sub-brand logo variants; 3-tier icon library. System first, portals second.
Portal-by-Portal Design
Main Portal → Hiring Portal → Campus Portal → College Portal → Recruit ATS → ATS Landing. Cross-portal components shared from the design system throughout.
AI Feature Integration
Consistent AI UI patterns across portals: 'Hello I am JobZ AI' modal, AI Resume Maker flow, AI screening question generator — each with distinct machine-vs-human content differentiation.
Engineering Contribution
When dev team hit Chart.js implementation blockers on the Main Portal dashboard, stepped in to build 8–10 React/Next.js components directly — unblocking the team and shipping on schedule.
Design Principles
Platform coherence over portal identity
Six portals. Six user types. One truth: a user should never feel lost when they cross a portal boundary.
Token system = platform coherence
The design system token architecture is what made six portals feel like one brand. Without it, consistency would have been impossible to maintain solo across an 8-month engagement.
Empty states are first-class
The 13-section candidate profile and 11-section student profile both start empty for every new user. Every section was designed with populated AND empty states.
Subscription drives the information architecture
Every screen on the employer and agency side was designed with subscription tier in mind. Free users see locked features — not blank screens.
Design unblocks engineering
When Chart.js dashboard components were blocking the dev team, building them directly was the right call. A designer who can write production React is a force multiplier.
Six portals, one designer, eight months. The design system is what made that possible.
Why This Was Hard
Complexity signals
What set this project apart from standard product design work — the technical, systemic, and domain-specific challenges that demanded real depth.
6 interconnected portals, 1 design system
Solo freelance ownership of six distinct B2B and B2C web products under one unified token-based design system — designed sequentially over 8 months and shipped to production.
Cross-portal data interdependencies
College → Campus student identity chain, Hiring → Campus opportunities mode — architectural complexity that had to be mapped before any screen was designed.
13-section candidate profile
Every section has a populated and empty state, a completion percentage signal, and a privacy control. 13 sections × 3 states = 39 distinct design variants.
Bulk upload with 6-state validation
College Portal: drag-and-drop → parse → All/Without Errors/With Errors filter tabs → error row highlight (red) → confirm → import. 1,276-record test case confirmed.
AI features across 3 portals
AI Resume Maker, AI candidate search, AI screening questions — each with consistent UI patterns distinguishing machine-generated from human-authored content.
Designer who unblocked engineering
Built 8–10 React/Next.js + Chart.js components on the Main Portal when the dev team hit blockers — a commercially valuable capability that shipped the feature on time.
One freelance designer. Six portals. 240+ screens. Eight months. All live in production across real URLs.
Feature Highlights
Platform capabilities
6-Palette Token Design System
Navy #1B0F80, Yellow #FEC000, Sky Blue #2228F9 — each with 9-step scales. 4 sub-brand logo variants, 13-size type scale (Major Third multiplier).
Design SystemAI-Powered Recruitment Features
AI Resume Maker, AI candidate search, AI screening question generator — consistent UI patterns distinguishing machine from human content.
AI IntegrationVisume — Video Resume
First-in-category video resume feature on the Campus Portal — students record and submit video introductions alongside CVs.
Product InnovationBulk Upload + Error Validation
College Portal: drag-and-drop → parse → error row highlight (red inline) → All/With Errors/Without filter tabs → import. 1,276-record tested.
Enterprise UXDesign System
Tokens, typography & components
A shared token-based system built to ensure consistency across every screen and state.
Color Tokens
Type Scale
Components
User Flow
Job seeker core journey
Job Search
6-dimension filter
Profile Build
13 sections
Apply
1-click apply
Track Application
5-stage tracker
Hired
Offer stage
Tech Stack
Tools & technologies
Design
Frontend (Engineering Contribution)
React/Next.js
SCSSMy Contribution
What I owned
01
Sole Product Designer
End-to-end design ownership across 6 portals — token architecture, design system, 240+ high-fidelity screens, interactive prototypes.
02
Engineering Contributor
Built 8–10 React/Next.js + Chart.js components on the Main Portal to unblock the dev team — dashboard charts, data tables, and filter UI.
Impact & Performance
Delivery at a glance
6
Portals live
240+
Screens designed
8 Mo
Freelance duration
10+
React components built
Timeline
May 2024 → January 2025
May 2024
Discovery + Design System
Ecosystem architecture, competitive audit, 6-palette token system, component library.
Jun–Sep 2024
Main + Hiring + Campus + College Portals
240+ screens across 4 portals. AI feature UI patterns, bulk upload, Visume.
Oct 2024–Jan 2025
Recruit ATS + Engineering + Go Live
ATS triple-entity model, Chart.js engineering contribution, all 6 portals live.
Outcomes
The impact we shipped
Measured results from usability testing, stakeholder reviews, and post-launch adoption tracking.
6
Portals live
240+
Screens designed
8 Mo.
Freelance period
1
Designers
"Six interconnected recruitment portals went live in production — all publicly accessible — serving job seekers, employers, college students, placement coordinators, staffing agencies, and enterprise HR teams under a single coherent brand."
Learnings & Reflection
What I'd do differently
01
Map cross-portal dependencies before any screen
The College → Campus identity chain was discovered mid-project. Discovering it earlier would have saved a redesign of the student profile onboarding flow.
02
Build the system wider than you think you need
The token system initially covered 4 portals. Adding Recruit ATS required extending the sub-brand system. Design systems should be built for the whole ecosystem from day one.
Interested in working together?
Let's talk about your project or open role.
Live Prototype