UI/UX Designer — Enterprise HR Module

## About the Project CrossNode is delivering a custom enterprise ERP platform for a regulatory authority in the Pacific region. We are entering Phase 1 development of the **HR & Payroll Module** — a web-based HR system covering 7 sub-modules: Employee Information Management, Leave Management, Payroll Contributions, Document & Compliance Management, Workforce Planning, and Performance Management. Phase 0 (discovery and design) is complete. A working React prototype has been validated with the client. We now need a designer to take that prototype to a production-quality UI — building a consistent design system, high-fidelity screens, and a polished user experience ready for development handoff. The system is used exclusively by HR and Payroll staff (5 distinct roles). It must be professional, efficient, and fully responsive on mobile. --- ## What You'll Be Designing You will own the visual and interaction design across the full HR module: **Core screens and flows:** - Employee profile — 11-tab profile covering 70 fields across personal, employment, identification, nationality, education, dependents, contributions, and documents - 8-step employee creation wizard with conditional steps (e.g. work permit shown only for non-citizens) - Leave management — leave recording with real-time balance calculation, half-day support, gender and probation validation - Payroll contributions — 3-layer contribution model (mandatory, voluntary super, savings & loans schemes) - Document repository — 15-category sidebar tree, version history panel, downloadable forms library - Workforce planning — org structure table with headcount by department, position linkage flow - Performance notifications dashboard — appraisal cycle tracking, notification templates **Design challenges to solve:** - Complex role-based UI — 5 roles (Senior HR Officer, Payroll Officer, Manager HR, Director Corporate Services, System Admin) with meaningfully different access. Same layout, different available actions. - Data-heavy tables — employee lists, contribution runs, leave records, document repositories — need to be scannable and actionable - Multi-step wizards — 8-step employee creation, PDF upload with anomaly resolution, probation review popup - Status communication — probation states, contract alerts, leave balance warnings, payroll anomalies — all requiring clear visual hierarchy - Mobile-first — all features must work on 375px screens --- ## Responsibilities - Build and maintain a **design system** in Figma: tokens (colors, typography, spacing), component library (tables, forms, badges, modals, sidebars), and documentation - Produce **high-fidelity screen designs** for all flows, covering all role variations and edge cases - Design **interaction specs** — hover states, empty states, error states, loading states, confirmation modals - Create **responsive layouts** — desktop and mobile (375px minimum) - Prepare **developer handoff** documentation — annotated screens, component specs, spacing notes — ready for React/Tailwind implementation - Collaborate with the CrossNode lead consultant to iterate on designs based on client feedback - Participate in client review sessions (async or video call — Pacific time zone) - Maintain design consistency with the validated prototype (navy `#1F3864` / blue `#2E5096` palette, existing component patterns) --- ## You Are **Required:** - 3+ years of UI/UX design experience, with a portfolio showing enterprise or SaaS products - Expert-level Figma (auto-layout, components, variables, prototyping) - Strong data-heavy interface design — forms, tables, dashboards, multi-step workflows - Experience designing for multiple user roles / permission states - Responsive design (mobile + desktop) - Comfortable working asynchronously with a small remote team - Fluent English (all documentation, client-facing deliverables, and meetings are in English) **Strong advantage:** - Experience with design systems for React/Tailwind applications — you understand that your components map directly to code - Familiarity with HR, ERP, or government software (complex workflows, compliance context) - Pacific region experience / awareness (cultural sensitivity for a regulatory environment) - Experience designing for low-bandwidth or mobile-primary users **Nice to have:** - Ability to review React/JSX to understand what already exists in the prototype - Experience with accessibility standards (WCAG 2.1) --- ## Tech Context (for reference) The development stack is React + TypeScript + Tailwind CSS + Shadcn/ui. You don't need to code, but understanding how Tailwind utility classes and component libraries work will help you design things that are buildable and consistent. The existing prototype uses: - Color palette: Navy `#1F3864`, Blue `#2E5096`, Light blue `#D6E4F7`, Green `#0F6E56`, Amber `#854F0B` - Typography: Arial, font sizes 20–44px - Components: tables with sticky headers, slide-in side panels, multi-step wizard with progress bar, dropdown menus, file dropzones, status badges --- ## Engagement - **Type:** Contract / freelance (project-based or time & materials) - **Duration:** Phase 1 — approximately 6–10 weeks (depending on scope) - **Availability:** Part-time or full-time considered — minimum 20 hours/week during active design phases - **Location:** Remote. Pacific / Asia-Pacific time zone strongly preferred for client meetings - **Rate:** Competitive, commensurate with experience. Please include your rate in your application.