Consultant & Payroll Dashboard
Designed a responsive, multi-role dashboard — contracts, invoices, transactions, insurance and payroll — for an internal Karra Info Systems product, across desktop, tablet and mobile with full light and dark theme support.
Role
Product Designer
Tools used
Figma
Platform tags
Enterprise Dashboard
Overview
Designed a responsive, multi-role consultant dashboard for an internal Karra Info Systems product, unifying contracts, documents, invoices, transactions and insurance into a single payroll-focused view for consultants like independent contractors and freelance staff.
Problem statement
Consultants working across multiple contracts needed one place to track outstanding payments, payroll status, and recent transactions — without the interface changing meaning or losing clarity across the desktop, tablet and mobile devices they used throughout the day.
Research & discovery
Mapped how the same payroll and outstanding-balance information needed to reflow across three very different screen sizes without losing hierarchy or requiring horizontal scrolling.
Identified that consultants often work at different times of day in different lighting conditions, making full light/dark theme parity — not just a color inversion — a real usability requirement rather than a visual nicety.
Defined a consistent card-based pattern (Total Outstanding, Payroll Summary, Recent Transactions) that could scale down from a two-column desktop layout to a single stacked column on mobile.
Design decisions
The same dashboard needed to work identically across desktop, tablet and mobile without losing key information.
Built a responsive card-based layout where Total Outstanding, Payroll Summary and Recent Transactions reflow from a multi-column desktop grid to a single-column mobile stack, preserving hierarchy at every breakpoint.
A simple color-inverted dark mode wasn't sufficient for extended, low-light use.
Designed full light and dark theme variants with adjusted contrast, chart colors and card elevation — not just inverted colors — validated across all three device sizes.
Consultants needed to scan payment status at a glance across multiple active contracts.
Used a consistent payment-status color system (payment, pending, paid) and a donut-chart payroll summary repeated identically across every breakpoint and theme for fast recognition.
Visuals
Desktop
Tablet
Mobile
Complete case study
Want the full breakdown?
This page shows a preview of the case study. For the complete write-up — additional screens, detailed process documentation, and outcomes — request access below.
Outcome / impact
Outcome
A fully responsive, dual-theme dashboard system — 6 validated layout/theme combinations — giving consultants a consistent way to track payroll and contracts regardless of device or time of day.
Focus
Dashboard UX · Responsive Design · Design Systems · Dark Mode