Original project visual
01 / Staffing
The challenge
Bring demand, availability and assignment decisions together so planners can see the consequences of a staffing choice.
Reading the problem / Staffing
A person’s name is not enough to justify an assignment.
Capacity planning combines project demand, competencies, availability and assignment review.
The planning workspace is an operations prototype with local persistence; its data does not represent a live employee system.
How can planners compare demand, competencies and availability before assigning people?
Evidence: the project account and the attributed artifacts on this page. Process drawings and interaction studies are reconstructed explanations; numerical research or business results are included only where separately supported.
02 / Staffing
The approach
Typed domain models connect project demand, competencies, assignments and capacity views. React state and local persistence support repeatable planning scenarios with a consistent component library.
03 / Staffing
My contribution
- Designed project, position and person views with connected inspection and search.
- Built assignment and approval flows with capacity-versus-demand comparisons.
- Implemented browser-local planning state and a shared suite of forms, tables and charts.
The process / Staffing
A direction.
A way to build it.
Planning compares demand, competencies and availability before reviewing the consequence of an assignment.
A schematic of sequence and overlap, not a dated project schedule.
Understand the planning decision
Identify which demand and availability information must be considered together.
Model the proposal
Separate a suggested assignment from its resulting capacity and conflicts.
Explore the planning workspace
Prototype demand, assignment and capacity views with illustrative data and local persistence.
Review the conflict route
Show how a proposal can be revised without losing the surrounding plan.
How can planners compare demand, competencies and availability before assigning people?
Demand, competencies and availability have to be considered together before a planner can judge an assignment. The review step matters because a locally sensible choice can still produce a capacity conflict elsewhere in the plan.
Journey map / Staffing
See the whole task in context.
Choose a step to connect the person’s intent with the interface and the design decision.
Current intent
Review demand
The planning workspace is an operations prototype with local persistence; its data does not represent a live employee system.
- Interface context
- Demand overview
- Review question
- Which information must be visible together to judge an assignment?
Representative task sequence and recovery path, not a measured emotional curve or historical research map.
Behind the experience
The visible task depends on work behind it.
For Staffing, this map connects “Review demand” to “Review capacity”. Read across to follow the task, then select a layer to inspect the interface, design and delivery references behind it.
| Layer | Review demand | Check availability | Propose assignments | Review capacity |
|---|---|---|---|---|
| The task | Review demand | Check availability | Propose assignments | Review capacity |
| Visible interface | Demand overview | Demand overview | Assignment workspace | Capacity review |
| Design checkpoint | The planning workspace is an operations prototype with local persistence; its data does not represent a live employee system. | Make project demand legible before choosing an assignee. | Compare availability and competency within the proposal. | Explain the capacity consequence of the assignment. |
| Implementation reference | Identify which demand and availability information must be considered together. | Separate a suggested assignment from its resulting capacity and conflicts. | Prototype demand, assignment and capacity views with illustrative data and local persistence. | Show how a proposal can be revised without losing the surrounding plan. |
| Recovery | Assignment exceeds availability → show the conflict → revise the proposal | |||
A reconstructed delivery map: the implementation row summarizes design-process dependencies, rather than claiming to document the original backend architecture.
Compare fit before commitment.
Reconstructed comparison of design approaches. These are review studies, not a claim that both directions were historically tested or shipped.
What this direction changes
Compare fit before commitment
Keeps eligibility and workload near the assignment decision.
Show the information needed to judge the proposal.
Demand overview, assignment workspace and capacity review are reconstructed as a decision sequence. A planner needs enough shared context to compare options, not separate screens that require remembering every value. Conflict feedback belongs with the proposal it affects.
01 / Demand overview
Staffing⌕
01Demand overview↗
02Assignment workspace↗
03Capacity review↗
Check availability
Make project demand legible before choosing an assignee.
02 / Assignment workspace
Staffing⌕
Review demandDemand overview
Check availabilityAssignment workspace ⌄
✓Propose assignments
Propose assignments
Compare availability and competency within the proposal.
03 / Capacity review
Staffing⌕
Review capacity
- Demand overview
- Review
- Assignment workspace
- Review
Review capacity
Explain the capacity consequence of the assignment.
Try the interaction
Staffing / Task & review study
Staffing01 / 03
View 01
Demand overview
Make project demand legible before choosing an assignee.
Keep this context visibleDemand overview
Make project demand legible before choosing an assignee.
Starting context
Review demand
Capacity values and dates need comparison-friendly alignment.
Align capacity values, dates, competencies and assignment states. Conflict messages need to explain the problem in words.
Illustrative type-role specimenStaffing
Review demand.
Review capacity.
HeadingAssignment workspace
24 / 30 px · regularBodyHow can planners compare demand, competencies and availability before assigning people?
16 / 26 px · regularLabelReview capacity
12 / 18 px · regularStateAssignment exceeds availability → show the conflict → revise the proposal
12 / 18 px · regularPortfolio-font hierarchy illustration; the source does not establish the exact client font or token scale.
Keep conflicts visible without losing the plan.
Which information must be visible together to judge an assignment?
Demand and availability should be readable in the same decision context. Otherwise selecting a person becomes an exercise in remembering values from another view.
How should a conflict be resolved without losing the rest of the planning context?
A capacity conflict needs to explain the mismatch and preserve the surrounding assignments. Resolving one proposal should not require reconstructing the entire plan.
Specify the assignment and its conflict state.
The prototype brings people, competencies, availability and project demand into a planning workspace. Implementation notes should identify how a proposed assignment is represented, which conflict it creates and how the review surface reports the resulting capacity.
Future coding-agent tasks should use fictitious planning examples and preserve local-persistence behavior. Review an over-capacity proposal as well as an available assignment, without implying that the prototype contains a live employee directory.
Staffing is a locally persisted planning prototype using illustrative operational data rather than a production workforce system.
Accessibility & standards
Access belongs in the design.
For these operational workflows, prioritize readable status data, non-color alerts, accessible approval controls and a 2D alternative to spatial inspection.
WCAG 2.2 AA · EN 301 549 · APCA · WAI-ARIA · Platform guidance
Complete the task without a mouse
Define tab order, visible and unobscured focus, named controls, table relationships and error recovery using native semantics and WAI-ARIA patterns.
Understand every state
Pair color with text or icons for selection, warnings and availability. Review text at WCAG contrast thresholds and use APCA alongside font size and weight for readability decisions.
Keep the workflow usable
Review zoom and reflow, 24 × 24 CSS-pixel minimum targets or qualifying spacing, alternatives to dragging, validation and accessible authentication where applicable.
Review scope & standards references
These are design references and review priorities, not a claim that this historical project passed a WCAG audit. Record criterion-level evidence, assistive-technology and device results, unresolved issues and retest outcomes before making a conformance statement.
APCA supplements the WCAG 2.2 contrast checks; it does not replace them. WCAG 3 remains a draft. EN 301 549 v4.1.1 is the latest published edition checked on 6 November 2026; its publication and its formal EU legal citation are separate matters. Confirm the applicable procurement or legal baseline with the client.
Outcomes & scope
What the work delivers.
- A working prototype using fictional Norwegian construction-project data. Matching and planning are application logic; no deployed AI recruiter, HR integration or enterprise authorization is claimed.
Results are described within the documented project scope. Illustrative studies are identified separately from original project artifacts.
Review & next iteration
What needs to hold up in use.
Use these questions to review Staffing against the behavior the design is intended to support.
- 01
Can a planner compare demand with availability?
- 02
Does a changed assignment expose its effect on capacity?
Project-specific acceptance questions for a future review, not reported usability-test results.
Reflection / Staffing
What I’d carry forward.
An assignment should support comparison before commitment. Eligibility, context and the consequences of a choice need to stay visible together.