Back to Selected Work
UI/UX Design by DJGraphix
Case Study // Project 01UI/UX Design (Web + Mobile)

NeoJobz — AI Job Matching & Career Platform

Unified Web and Mobile interface design for intelligent candidate discovery, automated resume matching, and recruiter applicant triage.

PROJECT
NeoJobz
MY ROLE
UI/UX Designer
PLATFORMS
Web + Mobile
SERVICES
UX Design · UI Design · Responsive Design · Mobile App UX · Design System
Attribution Notice:

DJGraphix was responsible for the UI/UX design architecture, user flows, and wireframes. Product development and technical implementation were handled separately by other development teams.

DJGraphix Design Canvas // NeoJobz
https://www.neojobz.com/
NeoJobz — AI Job Matching & Career Platform Desktop Web UI
Primary Desktop Web Experience
9:41
100%
NeoJobz — AI Job Matching & Career Platform Mobile App UI
Native Mobile Application
Section 01

Project Overview & Scope

Comprehensive UX blueprinting and visual system engineering.

Designed a comprehensive end-to-end digital experience for NeoJobz spanning both responsive web platform and companion Android mobile application. DJGraphix was responsible for the complete UI/UX design architecture, user journey mapping, wireframing, and component library.

My Role — UI/UX Designer
  • Led the entire UI/UX design lifecycle from user journey mapping to final screen components.
  • Built structured component tokens, typography rules, and responsive auto-layout structures.
  • Delivered high-fidelity handoff specifications for separate frontend development teams.
Section 02

Design Challenge & Approach

Identifying friction points and formulating ergonomic user flows.

The Core ChallengeDesign Audit

Job seekers frequently encounter clunky multi-step applications and poorly formatted job matches, while hiring managers waste hours triaging unranked candidate resumes on disconnected platforms.

Customizable Research Slot:

Specific user research metrics, recruiter interview findings, and conversion targets can be added here when provided.

The Design Approach

Constructed an interconnected design system tailored for two primary user personas: an effortless 1-click apply and skills-matching interface for candidates, paired with a high-density, filterable applicant pipeline for recruiters across web and native mobile apps.

Section 03

User Flows & Interaction Architecture

Step-by-step progression mapping frictionless user paths through key product workflows.

01

Smart Onboarding & Profile Sync

Frictionless resume parsing and skills tagging with instant profile score feedback.

02

Intelligent Job Discovery

Real-time faceted search filters, salary benchmarks, and AI compatibility percentage badges.

03

1-Click Application & Tracking

Quick-apply modal with custom cover note toggles and live application status timeline.

04

Recruiter Triage & Interview Stage

Kanban candidate stage progression with inline scorecard evaluations and direct messaging.

Section 04

Design System & UI Components

Atomic component library with structured color tokens and accessible typography hierarchy.

Color Palette Tokens
Brand Navy
#0B1E3D
Action Blue
#1D68F2
Success Green
#10B981
Neutral Slate
#64748B
Surface White
#FFFFFF
Typography Scale
Plus Jakarta Sans (Display & Body)

Calibrated for high data density, clear contrast ratios, and comfortable mobile reading.

Component Library Specs
54 Modular UI Components
Figma Auto-Layout 5.0

Interactive component states (Default, Hover, Focused, Disabled, Active).

Section 05

Final High-Fidelity UI Screens

Key interfaces engineered for NeoJobz .

SCREEN 01

Candidate Discovery & Search Facets

Pixel-perfect handoff specs with responsive auto-layout padding and semantic color tokens.

SCREEN 02

Job Detail View with Skills Match Breakdown

Pixel-perfect handoff specs with responsive auto-layout padding and semantic color tokens.

SCREEN 03

Candidate Application Pipeline & Status Tracker

Pixel-perfect handoff specs with responsive auto-layout padding and semantic color tokens.

SCREEN 04

Recruiter Candidate Triage & Resume Inspector

Pixel-perfect handoff specs with responsive auto-layout padding and semantic color tokens.

SCREEN 05

Mobile Android Home & Swipe Feed

Pixel-perfect handoff specs with responsive auto-layout padding and semantic color tokens.

SCREEN 06

Mobile Candidate Profile & Application History

Pixel-perfect handoff specs with responsive auto-layout padding and semantic color tokens.

Implemented In Production

See It Live

The final product was implemented by a separate development team based on the UI/UX designs provided by DJGraphix.

Next Case Study

WhiteRobe — Medical Uniforms & Healthcare Apparel Commerce

UI/UX Design (Web + Mobile) · Web + Mobile

Explore Next Case Study