# Onboarding, top to bottom *CASE STUDY 01 · ONBOARDING* A new-hire onboarding platform for PrismHR’s new HCM product: personalized for new hires, trackable for admins. *Image: Onboarding 1.0, Electronic Consent step: a nine-step progress sidebar beside an electronic signature pad with Decline and Accept buttons.* ## Project details Designed PrismHR’s new-hire onboarding for its HCM product, with personalized workflows for new hires, real-time tracking for admins and built-in guardrails that protect the first paycheck. - **Role:** Lead product designer - **Team:** 2 designers · 3 PMs · 6 engineers - **Timeline:** v1.0: ~12 months (2024–2025) · Redesign concept: ~2 months - **Platform:** Responsive web app, 1920px down to 320px - **Tools:** Figma (v1.0) · Angular + Claude Code (redesign prototype) - **Outcome:** ~30% faster onboarding · ~80 clients - **Status:** v1.0 shipped 2025 · Redesign concept (self-initiated) ## Overview ### One place to onboard, built for a new product. PrismHR’s legacy PEO platform had an onboarding flow that was dated and one-size-fits-all. When PrismHR built its new HCM product, onboarding was rebuilt from the ground up. The new platform gives new hires one place to complete every required and optional form. HR admins get templates and custom workflows tailored to the person, the role or the department. ### My role - Lead designer for v1.0, from first flows to launch - Owned UX flows and UI design end to end, designed in Figma and handed off to front end - Designed the new components and layouts the platform needed beyond the existing design system - Led a junior designer; partnered with 3 product managers and 6 engineers ## The problem ### Generic, outdated and easy to get wrong. The legacy onboarding treated every new hire the same. Admins couldn’t tailor it to a role or department, and it looked and felt outdated. Tax forms couldn’t be completed inside the workflow. A missing or incorrect form could hold up a new hire’s first paycheck, and admins had little visibility into who was stuck. *Image: Legacy onboarding in PrismHR Global: a single list of workers with draft, contract and start-date steps, plus Continue, View Worker and Send Reminder actions.* ## Research ### Closing the gaps the old platform left. Feedback on the legacy platform, combined with input from product managers and stakeholders, defined what the new platform had to do better: - Complete every tax form a new hire’s location requires, inside the flow - Make sure 100% of pay is allocated in direct deposit, so no pay goes missing - End with a clear summary of everything submitted - Show admins where each new hire is, who’s stuck and what’s overdue - Alert hiring managers when their new hire is done, so they can finish their part *Image: Admin Onboarding Plans table listing new hires with hire and start dates and a status for each: Completed, In Progress, Overdue or Not Started. An actions menu offers Send Reminder, View, Edit and Delete.* ## Key decisions ### 1. Personalized workflows, not one generic form Admins build onboarding from templates and custom workflows by person, role or department, and each new hire sees only what applies to them. The goal was engagement: a first week that feels like a welcome, not paperwork for just another employee. ### 2. Real-time tracking for admins and managers An admin view shows every new hire’s progress at a glance, including who’s stuck and who’s overdue. When a new hire finishes, their hiring manager is alerted to complete their part. That means less chasing, and new hires and managers are ready for day one sooner. ### 3. Guardrails that protect the first paycheck The Symmetry Tax Engine is built into the flow and walks each new hire through the tax forms their location requires. Direct deposit won’t let anyone continue until 100% of their pay is allocated, so no pay is missed. ## The solution ### Onboarding 1.0 New hires move through a guided, step-by-step flow, from welcome and electronic consent through tax forms, direct deposit and documents, ending with a clear summary. Admins configure the workflow once with templates, then track every new hire from a single view. Every screen is responsive from 1920px down to 320px, so new hires can finish onboarding on any device. *Image: Three mobile screens of the I-9 Employment Eligibility step. The stepper shows sub-steps for attestation and citizenship, preparer certification and document upload, with Back and Next buttons.* *Image: Desktop I-9 Employment Eligibility step. A ten-step onboarding menu on the left, and on the right the Upload Documents sub-step with List A, B and C document options, a document type dropdown and a drag-and-drop upload area.* *Image: Mobile Pay Method step before any pay is set up: a note that 100% of pay must be allocated to continue, with Paper Checks Only and Add Pay Method options.* *Image: Mobile Pay Method step with a warning: Not Enough Pay Allocated, only 80% of pay is allocated. A checking account card shows the 80% amount and a Pending status.* ## Results - **~30%** faster to complete onboarding - **~80** clients adopted the platform - **~0** paper forms left in the process Because the platform was built around the employee experience, it became a key tool in sales demos. ## Reflection ### What I’d do differently, and what came next I’d run more A/B testing early to validate key decisions, especially the direct deposit flow. After launch, I designed a redesign concept on my own initiative over about two months, and built the prototype in Angular with Claude Code. Version 1.0 allowed an open-ended number of sections, which could feel daunting to someone on their first day. The concept condensed it to at most seven sections, each with a guided workflow inside, alongside a refreshed, modern UI. I also redesigned and built a new stepper component, with better mobile responsiveness, a clearer indication of where you are in the process, and sub-steps within each section that rebuild dynamically based on the user’s answers in certain workflows. It wasn’t planned to ship, but I expect it would improve completion and time to complete. --- Web page: https://mikemona.com/work/onboarding Contact: mikemonaphoto@gmail.com · LinkedIn: https://www.linkedin.com/in/mikemona Resume (PDF): https://mikemona.com/assets/Mike-Mona-Resume.pdf