THE PROBLEM
Policy administrators needed to manage verification policies with complex states and dependencies. The critical challenge was preventing errors during bulk operations where mixed-status policies could have unintended consequences.

USER NEEDS
- Quick scanning of policy status
- Safe bulk operations
- Clear guidance for state-specific actions
- Error prevention over error recovery

DESIGN PROCESS
- Analyzed requirements and user workflows
- Prioritized edge case as highest risk area
- Built component system for consistency
- Designed progressive disclosure for bulk actions


KEY DESIGN DECISIONS
1. Table layout prioritizes rapid scanning
Built a dense table structure enabling faster vertical scanning than card layouts. Essential for admins managing 20-50 policies who need to quickly compare status, ownership, and dates across multiple items simultaneously.



2. Edge case modal groups outcomes by severity
Separated bulk selections into color-coded groups: green (safe), amber (warning), red (blocked). This prevents errors by showing exact consequences before execution – for example, revealing that draft policies will be deleted, not just disabled.

3. Status badges use triple redundancy for accessibility
Combined icon (checkmark, clock, alert, X) + color + text label. Ensures users with color blindness can distinguish statuses while maintaining quick visual recognition for others.

4. Progressive bulk action flow prevents accidental operations
Three-step verification: visual selection (blue rows) - bulk action bar (count display) - confirmation modal (outcome preview). Gives users multiple opportunities to verify before executing irreversible changes.

5. Detail views adapt to policy lifecycle stage
Created four state-specific layouts: Draft shows submission actions, Active shows editing/disabling, Needs Approval shows approval/rejection, Disabled shows re-enable. Eliminates invalid options and guides users toward correct next steps.

6. Auto-layout enables production-ready flexibility
Built all components with Figma auto-layout so content changes automatically adjust sizing. Policy names varying from Quick Verification to High-Risk Employment Verification maintain proper alignment while columns expand naturally.

7. Destructive actions use red styling despite being primary
The Continue with 2 Policies button uses red coloring to create visual friction and signal irreversibility. Gives users a final moment to reconsider before executing actions that may delete policies.

VISUAL DESIGNS
- Dashboard (default, selection, modal)
- Detail views (all 4 states)
- Component system
- Edge case flow