Practice Challenges

HR Employee Salary Grid

StaffOps lists 200 contractors. The rows are dense with text, and there are no zebra stripes or border lines. Managers struggle to match the employee's name with their salary column on wide monitors.

Select a Challenge Brief (5)

“

An HR manager accidentally pays the wrong contractor because the employee table rows align poorly.

Intermediate— Requires managing dense row tables, column sorting headers, and inline action items.

Context & Background

StaffOps lists 200 contractors. The rows are dense with text, and there are no zebra stripes or border lines. Managers struggle to match the employee's name with their salary column on wide monitors.

Target Users

HR administrators who manage payroll and contractor logs daily and need high visual alignment precision.

Inspiration & Benchmarks

Retool Tables— Highly customizable B2B database grids and filters.
Airtable— Excellent data row rendering and sorting controls.

Your Task

Design a web data table containing employee name card rows, department tags, salary numbers, and inline status dropdowns.

Hard Constraints

  • Desktop view
  • Table must support column header sorting triggers
  • Include zebra-striping or clear border lines

Concepts This Tests

Visual HierarchyGestalt Principles

Evaluate Yourself

0/4 completed (0%)