# Positive Pay Simulation Demo PRD

## Product Goal
Create a guided, click-through Positive Pay simulation that helps new users quickly understand the most important workflows before go-live. The experience must feel like the real product UI once users leave the home screen.

## Why This Exists
- Reduce onboarding friction for new users.
- Let users safely practice key tasks in a no-risk simulation.
- Highlight the three business-priority flows with clear entry points.

## Audience
- New Positive Pay users
- Existing clients transitioning from the old product
- Internal training/support teams

## Experience Architecture
1. `Home` (marketing/onboarding entry point)
   - Uses approved brand palette for this project:
     - Dark teal: `#1b6875`
     - Dark teal hover: `#137f8b`
     - Apple green: `#a9c23f`
   - Introduces simulation value and available flows.
   - Contains 3 CTA cards that route users into specific guided flows.
2. `In-App Simulation` pages
   - Must match actual product look and layout direction from screenshots.
   - Shared sticky top navigation + shared footer across all in-app pages.
   - Active nav state uses green underline bar and carrot indicator (`#538A30`).
   - First implemented in-app screen: Exceptions dashboard with 4 cards/charts.

## Scope for Initial Build
### Included
- Static HTML/CSS/JS foundation.
- Home screen with 3 CTA flow entry points.
- Reusable global nav/footer for all in-app pages.
- First in-app page: Exceptions dashboard with:
  - Exceptions (6-Month Check Only) card
  - Exceptions by Decision [Check Only] donut chart (Pay/Return)
  - Exceptions by Reason [Check Only] horizontal bars
  - Exceptions by Return Reason [Check Only] empty-state chart card
- Placeholder pages for:
  - Home
  - Issued Checks
  - Presented Checks
  - Exceptions
  - Settings

### Not Included Yet
- Authentication
- Real data/API integration
- True upload or decision workflows
- Role/permission handling
- Persisted progress tracking

## Content Inputs from Account Activation Guide
- Users activate through emailed invite and Okta setup.
- Login includes email/password and identity verification (phone/email/Okta Verify).
- Notification settings are critical for new exceptions.
- Simulation should eventually include these onboarding touchpoints as flows.

## Visual and Interaction Rules
- Home page can use new brand palette and educational CTA framing.
- In-app pages should mirror legacy production styling direction in provided screenshots.
- Keep layout and hierarchy stable; avoid visual redesign.
- Use Font Awesome for navigation and utility icons.
- Maintain responsive behavior for desktop, tablet, and mobile.

## Accessibility Baseline
- Semantic headings and landmarks (`header`, `main`, `footer`, `nav`).
- Keyboard-focusable links/buttons.
- Color contrast mindful of light backgrounds and muted UI text.
- Clear labels and legends for chart-like visuals.

## Folder Structure
- `index.html` - Home experience with 3 flow CTAs
- `app/` - In-app simulation pages
- `css/` - Shared and page-specific styles
- `js/` - Layout and page behavior scripts
- `assets/` - Logo and reusable visual assets
- `docs/` - PRD and future project notes

## Implementation Phases
1. Foundation and design tokens
2. Home screen + CTA routing
3. Global nav/footer componentized across in-app pages
4. Exceptions dashboard first-screen build
5. Add guided flow states and step overlays
6. Add realistic interactions and scenario branching

## Success Criteria (Phase 1)
- User can land on home page and pick one of 3 flows.
- User enters in-app page that visually resembles current product.
- Navigation is consistent and sticky across in-app pages.
- Exceptions dashboard displays all 4 required cards and chart placeholders.
- Layout is usable on mobile/tablet without breaking hierarchy.