ANODA Discuss your product

HRIS design for three roles, one workforce lifecycle

HRIQ is Remote Leverage’s HRIS for onboarding, paying and offboarding a global workforce.We designed it for Talent, Business Managers and Remote Leverage Managers.

HRIQ Timesheets for a contractor: Time Doctor sync status, payable time, missing entries, commissions and bonuses above a week of daily rows with their status; HRIQ onboarding list for a Remote Leverage manager: talent with department, rate, role and onboarding progress, with a row menu open
3
roles Talent, Business Manager and Remote Leverage Manager
Hire
to offboarding documents, time and payments, all connected
Tailwind
-aligned system and UI kit for the client’s React team

We designed Remote Leverage’s HRIQ workforce-operations web platform around the contractor lifecycle, from onboarding and documents to time, payments and offboarding. Our product design connected contractor, manager and staff responsibilities without losing plan-specific permissions. UX and UI , prototypes and a Tailwind-aligned design system gave the client’s developers a defined experience and its states.

What one contractor’s month passes through

One chain, from the offer to the exit:

Our enterprise software design guide connects responsibilities across timesheets, document review and offboarding without flattening every role into one dashboard.

  1. Sign-up

    • Choose a role
    • Password
    • Verification

  2. Onboarding

    • Checklist
    • Personal details
    • Orientation call

  3. Documents

    • Upload and sign
    • Manager review
    • Templates

  4. Time

    • Daily entries
    • Time Doctor sync
    • Submit for approval

  5. Payments

    • Payout method
    • Pay periods
    • History and receipts

  6. Offboarding

    • Last day
    • Final pay
    • Access removal
Read-only visibility Operational control
A client’s manager gets a clear view without the buttons that change a contractor’s pay or documents.
Many companies One manager
Remote Leverage staff switch between organisations, and the screen always says which company they are acting in.
Their services Our screens
Identity checks, signatures, payouts and time sync show up as states people can read, in the product’s own voice.

A week of work, read in one look

Found
Hours, sync status, missing days, pay extras and the submit button all compete on the timesheet, and a contractor who cannot tell what is still open submits late or not at all.
Decided
The week and its source first, then the totals that matter to pay, then one row per day with its own status. The actions sit above, in the order a contractor uses them.
For the user
A contractor sees which days are logged, which are pending and which are missing before pressing Submit.
HRIQ Timesheets: side menu, Time Doctor sync status, sync, request time off, modify pay and submit buttons, four totals and a table with one row per day of the week
After: the contractor’s timesheet; the figures are example data

  1. The week, the actions

    Date range, last sync, one primary action.

  2. What it adds up to

    Payable time, missing entries, bonuses.

  3. One row per day

    Times, worklog, source, a note and a status chip. Odd days are flagged in place.

How the work progressed

From documentation that mixed roles and tasks to a product and a system the client’s developers could build from.

  1. Discovery

    What the platform had to do, for whom, and which requirements contradicted each other

    Artifact Normalised requirements

  2. UX Audit

    Where the existing flows and documents confused roles and permissions

    Artifact A UX audit for the client

  3. Information Architecture

    Who is allowed to see, submit, approve and change each thing, in one model

    Artifact The information architecture and role model, the source of truth for everything after

  4. User Flow

    How onboarding, documents, time, payments and offboarding connect for each role, and where one role hands over to another

    Artifact Role- and workflow-based user flows and screen maps

    A screen map of the HRIQ product: timesheets, payments, verification, onboarding checklist, offboarding, onboarding list, documents, a contract preview and payment settings, laid out together

  5. Wireframes

    Where each role’s tables, panels and actions sit, before any colour or styling

    Artifact Wireframes for every module and role

  6. UI & Design system

    One set of tables, panels, dialogs, chips and states shared by all three roles

    Artifact High-fidelity UI, clickable prototypes, a complete design system aligned to Tailwind, a UI kit and a component library

  7. Animation

    How the product behaves while it works: panels, loading, upload, toasts and success

    Artifact Interaction and state specifications, and animation and loading behaviour

  8. Delivery

    What the client’s engineers needed to build every screen and state without guessing

    Artifact Handoff documentation, screen-level states and permissions, and the final Figma and asset export

From sign-up to exit

Found
Each step of the lifecycle belongs to a different role and screen, and a person who loses the thread stops and asks support.
Decided

Every path drawn with its states before the UI: three runs of screens, and a menu that shows each role only its own places.

Our user-flow guide settles each role, permission and recovery path before screens multiply.

  1. Sign-up

    Choose a role, set a password, then choose how to get paid.

    Open the full map
    Three sign-up pieces: Create your account with Talent chosen, Create a password with a strength meter, and an Add Wise dialog asking for account holder, Wise tag, currency and country

  2. The contractor’s checklist

    A welcome with what is done and what is next, a review before submitting, and the same checklist for leaving.

    Open the full map
    Three screens: the onboarding checklist with progress, Review and submit listing personal details, and the offboarding checklist with progress

  3. Offboarding, four steps

    The last day, the final pay, what is switched off, and one confirmation.

    Open the full map
    Four offboarding panels: details with last workday and reason, final pay and timesheet, access and assets removal as a list of steps, and review and confirm
Two side menus: the contractor’s with Home, Notifications, Timesheets, Payments and Documents; the manager’s with an organisation switcher and Team, Timesheets, Onboarding, Offboarding, Documents and Payments

One menu, different for each role

The contractor sees five places. A manager sees the whole lifecycle and an organisation switcher, so they always know which company they are acting in.

  • Role-aware navigation and access
  • Organisation switching for Remote Leverage staff
  • User flows and screen maps

Six jobs the platform has to get done

In the order a contractor meets them, then the manager’s side.

Contractors waiting on managers and support explaining every status point to a disconnected lifecycle. Bring ANODA’s HRTech design team that journey: we clarify the next action while keeping rights distinct.

Time a contractor can stand behind

Found
Hours arrive from a tracker, get corrected by hand and are questioned later. A contractor needs to see what is odd before a manager does.
Decided
Odd days flagged in the row with a plain explanation, a day editable in place, time off and pay changes as requests that say they need a manager’s approval, and errors named next to the field.
Three timesheet rows: an overtime day, a day with check-in and check-out fields open for editing with a tick button, and a day with fewer hours than expected
Timesheet rows with a tooltip on the overtime flag: Overtime Detected, you logged more hours than your expected daily schedule, confirm your entry or contact your manager
Request Time Off dialog with type, date period and note fields and an information box saying the request needs manager approval before it is applied to pay
Edit hours dialog with two fields outlined in red: a time that is not in HH:MM format and a check-out time that must be after check-in

Documents checked once, in one place

Found
Contracts, IDs and tax forms arrive from many contractors across many companies, and a manager has to know which are waiting, which are verified and which went back.
Decided
One list with type and status on every row, a preview with approve and reject side by side, a reason required to send a document back, and templates kept in their own tab for signing through DocuSeal.
Documents list for a manager: organisation switcher, tabs for all documents, pending approvals and templates, and rows with title, type, talent, upload date, status and changes
Document preview of a service contract with the contract text, the version switcher and red Reject and purple Approve buttons
Reject this document dialog with a required reason field offering illegible, wrong document, expired, missing signature and details do not match, and a red Reject button
Templates tab: a list of document templates with type and last edit, and a row menu with view, edit, rename, duplicate and delete

Payments a contractor can read

Found
A payout is a period, an amount, a method and a status, and when one is stuck or failed a contractor’s only option is to write to support.
Decided
One history with a status on every payout, a panel that breaks the amount into hours, extras and deductions with its own timeline, and a payout method that says what is locked until identity is verified.
Payments: totals for paid, this period and pending, and a table of pay periods with amount, payout method, a status of processing, completed or failed, and pay date, with a row menu
Payment details panel: the amount paid, period, method, dates and reference number, a breakdown from hours and rate to total paid, and a status timeline from submitted to initiated
Payment Settings with a banner asking to verify identity to withdraw, and a centred message: complete identity verification, only withdrawals are locked and platform access is unaffected
Payment Settings with the identity banner and a current payout method card for Wise, marked active, with a Remove link and the last updated time

Onboarding a manager can steer

Found
A manager starts several contractors at once, each at a different step, and has to see who is waiting on whom without opening every profile.
Decided
A list by status with progress on each row, a panel per person that shows what is done and what is next, and a guided start: details, the orientation call, the paperwork to send, then a review.
Onboarding Details panel for one talent with a progress bar and four steps: personal details done, orientation call not started and optional, paperwork and forms in review, final review not started
Start onboarding, step one of four: personal details for two selected talents, each with email, department, date of birth and phone number, and Edit and Remove links
Paperwork and forms step: a list of document templates with type, last edited date and a mandatory toggle, and Save and close and Continue buttons

Offboarding that leaves nothing open

Found
Leaving means final pay, a final timesheet, accounts switched off in other tools and assets returned. Miss one and the exit is not finished.
Decided
A list that surfaces who is at risk or blocked, a panel that lists every step with the tool it touches and what state it is in, and a template a manager can edit once for every future exit.
Offboarding: counts of at risk, blocked, in progress and completed, and a table of talent with role, last workday, progress and status, with an At Risk tooltip explaining what needs attention
Offboarding Details panel with progress and steps: final report done, platform access revoked, an off-platform removal as draft, and a removal from a workspace tool as to do with an error note
Offboarding settings panel: a standard template of steps with reversible tags and required toggles, and a list of optional steps to add

Verified before paid

Found
A new contractor cannot start earning until identity, personal details and a payout method are done, and an unclear checklist reads as a wall.
Decided
Three cards with a progress meter, each saying what it is for and that it is still needed, and a payout method chosen in a dialog that lists the options and asks for one.
Complete your verification: a progress meter at zero of three, and cards for personal information, identity verification and payment information, each marked as needed
Add payment information dialog with a step bar and three payout methods: Wise chosen, bank transfer and Cadana, and a Next button

One design system under three roles

Found
Tables, panels, dialogs and status chips repeat in every module and every role, and drawn one screen at a time they drift apart.
Decided
A complete design system aligned to Tailwind conventions, with a UI kit and components for the states each piece can be in, so the client’s developers build one panel, not eleven.

One panel shell

Different jobs, the same right-hand panel with a title, a body and actions at the foot.

  • Send Document for Signature panel with template, signer, message and due date fields and Cancel and Upload buttons
    Send for signature: Pick a template and a signer, add a message and a due date.
  • Upload Document panel with a choice of company space or attach to a talent, and a drop zone for PDF, PNG or JPG files
    Upload a document: Choose where it goes, then drop the file.

When there is nothing to show, and when it has to be someone

An empty state that says what will appear, and a dialog that asks who.

  • Empty payments state: an icon and the message no payments yet, your payouts will appear here once your first pay period is approved and paid
    Empty
  • Who are you offboarding dialog with a search field, a list of active talent with roles, and Cancel and Confirm and start buttons
    Choose who

Where the platform ended up

HRIQ designed and handed off in full for three roles: sign-up and verification, onboarding, documents, time, payments and offboarding, with a Tailwind-aligned design system, a UI kit, clickable prototypes and screen-level notes on states and permissions.

We designed it; development, the integrations with the external services and launch belong to the client’s team, and some Business Manager rights can vary by plan and client agreement.

Talent, Business Manager, Remote Leverage Manager
3 roles
onboarding, documents, time, payments, offboarding
Lifecycle
a Tailwind-aligned design system and UI kit
System
documentation for the client’s React and Tailwind engineers
Handoff

Who sees what in your product, and who can change it?

Contractors, client managers and your own staff use one platform with different rights. Bring us your roles and your onboarding-to-payment flow, and we’ll show where someone acts in the wrong context or waits on a permission they should not need.

Discuss your product Explore more case studies

What we brought to Remote Leverage

The product

The method and its system

Read more about the design decisions

All articles