ImpactDeck

Show donor impact with a premium, boardroom-ready dashboard.

ImpactDeck is a premium multi-page presentation dashboard for Yuva Unstoppable to report impact, budget usage, and transformation milestones to a tier-1 corporate donor. It combines executive storytelling, financial clarity, and visually polished before-and-after proof so leadership teams can approve renewals and future funding faster.

Business Goals

  • Increase donor renewal intent by 20% within 2 quarters by presenting a clearer executive narrative and proof of outcomes.
  • Reduce time to produce a board-ready impact review from 5 days to under 1 day.
  • Improve stakeholder comprehension of budget allocation and progress by 30% as measured by post-review survey scores.
  • Support a 15% uplift in next-cycle funding discussions by packaging outcomes, utilization, and roadmap in one polished deck experience.

User Goals

  • Help funders quickly understand how money translated into real-world transformation.
  • Make financial utilization and remaining reserve immediately visible without needing a separate spreadsheet.
  • Show before-and-after evidence in a format that feels premium and credible.
  • Enable NGO teams to reuse the same template for multiple donors and quarters.
  • Provide a presentation flow that is easy to scan on laptops, large displays, and exported PDFs.

Non-Goals

  • Not a public-facing marketing website or general NGO brochure.
  • Not a full CRM, donation platform, or grant management system.
  • Not a complex analytics suite with custom chart authoring for every metric.
  • Not intended to edit source finance data directly inside the presentation layer.

Asha, NGO Partnerships Lead, 38 - Asha prepares quarterly updates for corporate donors and needs to present impact in a way that feels executive, credible, and visually polished. She is responsible for reducing prep time while increasing confidence in the story she tells.

Asha, NGO Partnerships Lead, 38

  • As a partnerships lead, I want a polished, reusable impact deck template, so that I can produce donor updates faster without hiring a designer each cycle.
  • As a partnerships lead, I want budget allocation and utilization displayed clearly, so that I can answer financial questions during the review meeting.
  • As a partnerships lead, I want before-and-after visuals alongside metrics, so that I can make the transformation feel tangible and memorable.

Rohan, Corporate CSR Manager, 44 - Rohan reviews multiple NGO partners and needs a concise, boardroom-quality summary that is easy to trust and quick to interpret. He cares about accountability, utilization, and visible outcomes tied to funding.

Rohan, Corporate CSR Manager, 44

  • As a CSR manager, I want to see impact, spend, and progress in one screen, so that I can judge performance without jumping between documents.
  • As a CSR manager, I want the experience to feel premium and clear, so that I can confidently share it with senior leadership.
  • As a CSR manager, I want the deck to highlight compliance and sustainability, so that I can justify continued partnership.

Neha, Program Operations Manager, 31 - Neha maintains project data from campuses, field teams, and finance logs. She needs a reliable way to turn raw updates into a consistent presentation without manual formatting errors.

Neha, Program Operations Manager, 31

  • As an operations manager, I want structured data inputs mapped to the deck, so that the final output stays consistent across schools and quarters.
  • As an operations manager, I want validation for totals and percentages, so that incorrect budget numbers are caught before the review.
  • As an operations manager, I want the visual sections to reuse the same layout, so that I can update new campaigns without rebuilding the deck.

Executive Presentation Layout System · High priority

  • Generate a 2-page or 3-page ultra-dark executive presentation layout with precise component placement, responsive rules, and export-ready spacing.
  • Use a three-column hero card row on page 1 with equal-width glassmorphic cards and consistent vertical rhythm.
  • Support a dual-brand header with left and right logo anchors and centered subtitle alignment.
  • Render page sections as distinct presentation pages with print-safe margins and page break control.
  • Allow the footer action bar to remain visually centered and prominent on the final page.
  • Ensure all content remains legible at 16:9 presentation scale and in exported PDF form.

Impact Metrics Display · High priority

  • Present core NGO outcomes as large, high-contrast KPI tiles and supporting text that can be read instantly by executives.
  • Display metric values with distinct color emphasis rules for silver, emerald, and electric blue accents.
  • Support formatting for Indian currency and large-number abbreviations such as 8,000+ and 4,00,000+.
  • Render metric labels and values separately to preserve hierarchy and spacing.
  • Maintain accessible contrast ratios against the charcoal black background.
  • Prevent layout shift when metric values are long or localized.

Visual Transformation Showcase · High priority

  • Provide a before-and-after comparison area that communicates physical change through a side-by-side visual format.
  • Create two equal sub-panels inside a labeled transformation container.
  • Support image placeholders, optional uploaded photos, and descriptive captions for each side.
  • Keep the comparison header visible above both panels and align the visual baseline.
  • Support crop-safe framing for school infrastructure images and portrait or landscape source files.
  • Include fallback states if only one image is available or if images fail to load.

Financial Flow and Compliance Summary · High priority

  • Show budget allocation, quarterly utilization, and operational notes in a way that balances finance clarity with donor-friendly storytelling.
  • Render the budget flow as a simplified sankey-style stream or structured allocation list in the UI and export.
  • Show utilization rate as a horizontal progress loader with a numeric label and reserve balance callout.
  • Validate that allocation totals match the total budget and flag any variance above 1%.
  • Display compliance bullets as standardized text blocks with strong visual separation.
  • Support manual overrides for quarter-based reporting while preserving audit visibility.

Reusable Content and Export · Medium priority

  • Allow teams to reuse the template for future donor reviews and export it as a presentation-ready artifact.
  • Support editing of page titles, subtitles, metrics, and bullets from a structured content model.
  • Provide export to PDF and high-resolution PNG for meeting rooms and email sharing.
  • Store brand assets, logos, and theme tokens centrally for reuse across versions.
  • Preserve typography, spacing, and color fidelity across browsers and export outputs.
  • Enable versioned snapshots for quarterly reporting cycles.

Donor Review Setup

  • Select the donor and reporting cycle, then load the default Yuva Unstoppable theme.
  • Choose a 2-page or 3-page presentation layout depending on the meeting length.
  • Import metrics, budget allocations, and impact photos from a structured form or CSV.
  • Review automatic validation for totals, formatting, and missing assets.
  • Preview the deck in a 16:9 presentation canvas and export when ready, targeting under 10 minutes from start to first usable preview.

1. Brand Header and Theme Load

  • The user lands on a dark executive canvas with dual-brand header placement and a centered roadmap subtitle.
  • Load the charcoal background and liquid silver typography by default.
  • Place Yuva logo left and Mercedes-Benz star right with protected spacing.
  • Keep the centered subtitle locked to the page width for premium symmetry.

2. KPI Hero Cards

  • The first page surfaces the three headline outcomes in glassmorphic cards with bold numeric emphasis.
  • Render each card with equal width, consistent height, and subtle blur-backed surfaces.
  • Use emerald for budget, cyan for lives impacted, and silver for schools transformed.
  • If values are missing, show a placeholder state rather than collapsing the card.

3. Before and After Comparison

  • The center stage visually contrasts the previous condition with the transformed result using a side-by-side layout.
  • Show clear photo labels above each panel and preserve image aspect ratio.
  • Use a visible divider or whitespace gap to improve comparison scanning.
  • If photos are not approved, use structured placeholders with descriptive captions.

4. Budget Flow and Utilization

  • The second page explains where funds are going and how much has been used so far.
  • Display allocations in a clean stream or stacked breakdown with exact amounts.
  • Show the 65 percent utilization loader with reserve balance underneath.
  • Warn if totals exceed the approved budget or if reserve values are inconsistent.

5. Final Call to Action

  • The footer action bar closes the presentation with a donor-forward renewal message.
  • Center the emerald CTA bar with a glowing treatment and high contrast white text.
  • Keep the CTA visible and uncluttered so it reads as the final takeaway.
  • Support optional presenter notes below the CTA in export mode.

Power Features and Edge Cases

  • Theme token controls for color, spacing, blur intensity, and glow levels.
  • Auto-scaling typography for long organization names or longer metric labels.
  • Image quality checks that flag low-resolution or poorly cropped photos before export.
  • Quarter-over-quarter template duplication with locked brand assets and editable data blocks.
  • Fallback design for missing logos, missing photos, or incomplete finance data.
  • Presenter mode with page navigation, keyboard controls, and full-screen preview.

Visual and Interaction Standards

  • Ultra-dark executive theme with strong contrast and restrained neon accents.
  • Glassmorphic cards with subtle shadows, soft borders, and premium depth cues.
  • Accessibility support with keyboard navigation, semantic headings, and readable contrast.
  • Print-safe 16:9 composition that preserves spacing in PDF export.
  • Performance optimized with lazy-loaded images, memoized layout blocks, and minimal reflow.
  • Consistent alignment grid so every page feels intentional and boardroom ready.

Asha, the partnerships lead, has one day to prepare a quarterly review for Mercedes-Benz. Previously, she had to gather photos, write impact notes, and reconcile budget numbers across spreadsheets and slide decks, which made the final presentation feel rushed and inconsistent.

With ImpactDeck, she loads the donor, imports the quarter’s metrics, and sees the story assembled into a premium executive layout. The deck immediately shows schools transformed, budget allocation, utilization, and before-and-after visuals, which makes the review easier to trust and much faster to present.

When Rohan, the CSR manager, opens the deck, he can see both the emotional transformation and the operational discipline in one place. That clarity increases confidence in the partnership, shortens follow-up questions, and strengthens the case for continued funding.

User-Centric Metrics

  • 90 percent of users can generate a first review draft in under 10 minutes.
  • At least 85 percent of donor reviewers rate clarity of impact narrative 4 out of 5 or higher.
  • Reduce manual formatting edits by 70 percent after the first template version.
  • Achieve a 95 percent completion rate for required impact and finance fields before export.
  • Keep average preview load time under 2 seconds on standard office laptops.

Business Metrics

  • Increase renewal meeting conversion by 15 percent within 2 reporting cycles.
  • Reduce presentation production time by 80 percent compared with manual slide creation.
  • Improve quarterly repeat usage among NGO staff to 75 percent or higher.
  • Raise average stakeholder satisfaction score by 20 percent within 6 months.

Technical Metrics

  • 99.9 percent uptime for the presentation service.
  • P95 page interaction latency under 120 milliseconds.
  • PDF export success rate above 98 percent.
  • Zero critical security issues in quarterly dependency scans.

Tracking Plan

  • Track deck_created when a new donor presentation is initialized.
  • Track metric_imported when financial or impact data is loaded successfully.
  • Track photo_uploaded when before or after imagery is attached.
  • Track validation_error when totals, formatting, or missing asset checks fail.
  • Track preview_opened when the user enters full-screen or presentation preview.
  • Track export_pdf when a PDF export completes successfully.
  • Track cta_clicked when the final action bar is engaged or copied.

Technical Needs

  • Use Next.js with React for the presentation surface and routing.
  • Implement Tailwind CSS or CSS modules for precise dark-theme styling and spacing control.
  • Use a component library only for primitives; custom design system tokens should drive final visuals.
  • Store structured content in a JSON schema with versioning for each donor cycle.
  • Use server-side rendering or static generation for fast first paint and reliable PDF capture.
  • Support headless PDF generation with Playwright or Puppeteer.
  • Add image optimization and CDN delivery for large campus photography.

Integration Points

  • Google Drive or Dropbox for asset import and versioned image storage.
  • Supabase or Firebase for structured content persistence and authentication.
  • Google OAuth or Microsoft Entra ID for enterprise sign-in.
  • Slack or email notifications for export completion and review sharing.
  • Optional CSV or Airtable import for finance and impact data.

Data Storage & Privacy

  • Store donor-specific content in tenant-isolated records with access controls.
  • Encrypt sensitive data at rest and in transit using standard cloud managed keys.
  • Limit photo retention to approved reporting cycles and support deletion requests.
  • Keep audit logs for edits, exports, and approvals for compliance review.
  • Provide GDPR and CCPA-ready data deletion workflows for any personal or identifiable content in photos or notes.

Scalability & Performance

  • Precompute layout data so rendering remains fast even with high-resolution images.
  • Lazy-load comparison images and defer noncritical animations until after initial paint.
  • Cache theme tokens and reusable components for repeated quarterly decks.
  • Support concurrent viewing and export jobs without blocking the editor experience.

Potential Challenges

  • High-resolution images may slow load times; mitigate with automatic compression and responsive image variants.
  • Budget data inconsistencies can undermine trust; mitigate with validation rules and a pre-export reconciliation check.
  • Brand asset mismatch may cause visual drift; mitigate with locked template tokens and approved logo uploads.
  • PDF exports may differ from on-screen rendering; mitigate with server-side capture and print-specific styling.
  • Overly decorative visuals can hurt readability; mitigate with strict contrast checks and accessibility review gates.

Team & resourcing - Small team - 2 frontend engineers, 1 designer, 1 part-time product manager, shared QA support

Phase 1: MVP Presentation Shell · Weeks 1–2

  • Dark executive theme and design tokens
  • Three-page or two-page layout framework
  • Brand header, hero metrics, and CTA block
  • Static before-and-after comparison module

Phase 2: Data Binding and Validation · Weeks 3–4

  • Structured JSON content model
  • Budget allocation and utilization components
  • Validation for totals, missing assets, and formatting
  • Basic preview mode with responsive scaling

Phase 3: Export and Sharing · Weeks 5–6

  • PDF export pipeline
  • High-resolution image export
  • Shareable preview links
  • Audit log for edits and exports

Phase 4: Reusable Template System · Weeks 7–8

  • Quarterly duplication workflow
  • Asset library and saved brand settings
  • Keyboard navigation and presenter mode
  • Polish pass for accessibility and performance

Paste this into Cursor, Bolt, Lovable, or v0 to start building.

Build a premium multi-page donor impact presentation web app called ImpactDeck for Yuva Unstoppable.

Goal: create a boardroom-ready 2-page or 3-page dashboard/presentation with an ultra-dark executive theme and precise spacing, suitable for a corporate donor review. Use a 16:9 canvas, export-ready layout, and clean responsive behavior.

Tech stack:
Next.js, React, TypeScript, Tailwind CSS, Framer Motion for subtle transitions, Lucide icons, and Playwright or Puppeteer for PDF export.

Core screens and flows:
1. Page 1: Core Impact and Identity
   Header with Yuva Unstoppable logo on the left, Mercedes-Benz star logo on the right, centered subtitle: TRANSFORMING LIVES: CORPORATE IMPACT & ROADMAP 2026.
   Three glassmorphic KPI cards in a row: Schools Transformed 8,000+, Total Corporate Budget ₹15 Crores, Smiling Lives Impacted 4,00,000+.
   Large before-and-after comparison section with two equal panels labeled BEFORE PHOTO and AFTER PHOTO.
2. Page 2: Financial Velocity and Compliance
   Left section with budget allocation summary for Smart Classrooms & Tech 6 Cr, Hygiene & Sanitation Hubs 4 Cr, Clean Drinking Water Plants 3 Cr, Sports Infrastructure 2 Cr.
   Right section with a horizontal progress bar showing Quarterly Utilization Rate 65 percent achieved and Remaining Reserve ₹5.25 Crores for Q3-Q4 execution.
   Below, show two compliance bullets with strong typography.
3. Page 3 or footer block
   Centered emerald CTA bar with glowing treatment and bold white text: PARTNER IN THE NEXT 1,000 TRANSFORMATIONS.

Design requirements:
Background #121212 charcoal black, primary text #F5F5F7 liquid silver, accent cyan #00E6FF, accent emerald #00E676. Use glassmorphism, subtle neon glows, high contrast, and luxury dashboard styling. Make the layout feel premium, minimal, and highly readable.

Component requirements:
Reusable HeroMetricCard, TransformationComparePanel, BudgetFlowList, UtilizationBar, ComplianceBulletList, FooterCTA, BrandHeader, PageContainer.
Support placeholder states for missing logos or photos. Include accessibility, keyboard navigation, semantic headings, and responsive scaling. Ensure typography never overflows, cards stay aligned, and export to PDF preserves the same visual composition.

Data model:
Create a typed presentation schema with fields for brand assets, subtitle, KPI cards, beforeAfterImages, budget allocations, utilizationPercent, reserveAmount, complianceBullets, and footerCTA.

Build the app with editable mock data and a polished demo state ready to present immediately.

Business Idea

Act as an elite UI/UX Developer specializing in corporate investor decks and luxury data dashboards. I need a fully realized, pixel-perfect front-end prototype for a social impact presentation. The dashboard is tailored for an NGO named 'Yuva Unstoppable' to deliver a premium performance review to its tier-1 anchor donor, 'Mercedes-Benz'. Execute a multi-page dashboard blueprint utilizing an Ultra-Dark Executive Theme (Background: #121212 Charcoal Black, Primary Text: #F5F5F7 Liquid Silver, Accent 1: #00E6FF Electric Cyan, Accent 2: #00E676 Emerald Green). Follow this precise structure across a 2-page or 3-page layout: PAGE 1: CORE IMPACT & IDENTITY - HEADER: Dual-branding horizon setup. 'Yuva Unstoppable Logo' aligned absolute left, 'Mercedes-Benz Star Logo' aligned absolute right. Centered subtitle: "TRANSFORMING LIVES: CORPORATE IMPACT & ROADMAP 2026". - HERO SECTION: Three high-contrast glassmorphic horizontal cards aligned side-by-side: * Card 1: "SCHOOLS TRANSFORMED" -> Metric: "8,000+" in bold neon silver typography. * Card 2: "TOTAL CORPORATE BUDGET" -> Metric: "₹15 Crores" highlighted in Emerald Green. * Card 3: "SMILING LIVES IMPACTED" -> Metric: "4,00,000+" highlighted in Electric Blue. - CENTER STAGE (VISUAL EMOTION SLIDER): A wide container labeled "VISUAL TRANSFORMATION: BEFORE & AFTER". Left sub-panel hosts a photo placeholder for [BEFORE PHOTO: Dilapidated Structure, Broken Sanitation Hub at Bhadaj Primary School]. Right sub-panel hosts a photo placeholder for [AFTER PHOTO: Equipped with Tech Lab, Clean Drinking Water Plant at Bhadaj Smart Campus]. PAGE 2: FINANCIAL VELOCITY & COMPLIANCE - FINANCIAL STREAM LOGS: Left column tracks "BUDGET FLOW & ALLOCATION (SANKEY STREAM)" itemizing: * Smart Classrooms & Tech: 6 Cr * Hygiene & Sanitation Hubs: 4 Cr * Clean Drinking Water Plants: 3 Cr * Sports Infrastructure: 2 Cr - PROGRESS GAUGE: Right column renders an interactive horizontal progress loader labeled "QUARTERLY UTILIZATION RATE (65% ACHIEVED)". Underneath, add subtext: "Remaining Reserve: ₹5.25 Crores for Q3-Q4 operational execution". - CHIEF HIGHLIGHTS LOG: Standardized text section with two heavy bullets: * "• Mandated Focus: Fast-tracking deep structural development across the Western Hubs (Bhadaj & Gota Campuses)." * "• Sustainability SLA: 100% of transformed setups are fully integrated with localized community maintenance logs." PAGE 3 / FOOTER NAVIGATION BLOCK: - FOOTER ACTION BAR: A prominent, centered, glowing rectangle filled with high-vibrancy Emerald Green, displaying bold white centered text: "PARTNER IN THE NEXT 1,000 TRANSFORMATIONS". Generate the comprehensive UI layout, CSS flexbox mapping, and element dimensions to make this presentation look stunning, easy to read, and ready to trigger instant corporate standing ovations.

Make My PRD

Design by The Resonance | Powered by GPC – The AI Transformation Company

    PRD: Act as an elite UI/UX Developer specializing in...