📄General

Last updated: Invalid Date

User Guide Screenshots - Complete List

Overview

This document lists all screenshots needed for user guides, organized by priority and guide category.

Total Screenshots Needed: 47
Critical (Phase 1): 15
Important (Phase 2): 18
Nice-to-Have (Phase 3): 14

Screenshot Naming Convention

Format: {guide-category}_{screen-name}_{detail}.png

Example: getting-started_add-community-form_filled.png

Standard sizes:

  • Full screen: 1920x1080 (desktop)
  • UI element: Cropped to relevant section + 20px padding
  • Mobile: 375x812 (iPhone X/11/12)

Phase 1: Critical Screenshots (Getting Started)

1. Adding Your First Property

1.1. Settings Navigation

  • File: getting-started_settings-sidebar.png
  • Shows: Left sidebar with "Settings" highlighted
  • Used in: how-to-add-your-first-property.md
  • State: Hover state on Settings link

1.2. Communities Menu

  • File: getting-started_communities-menu.png
  • Shows: Settings page with "Communities" section highlighted in right menu
  • Used in: how-to-add-your-first-property.md

1.3. Add Community Button

  • File: getting-started_add-community-button.png
  • Shows: Communities page with "Add Community" button (top right)
  • Used in: how-to-add-your-first-property.md
  • State: Button should be prominent, maybe add arrow annotation

1.4. Add Community Form (Empty)

  • File: getting-started_add-community-form-empty.png
  • Shows: Modal with empty form fields
  • Fields visible: Name, Address, ZIP Code, Website, Manager dropdowns
  • Used in: how-to-add-your-first-property.md

1.5. Add Community Form (Filled)

  • File: getting-started_add-community-form-filled.png
  • Shows: Same form with example data:
    • Name: "Sunset Apartments"
    • Address: "123 Main Street, San Francisco, CA 94102"
    • ZIP: "94102"
    • Manager: "John Smith" selected
  • Used in: how-to-add-your-first-property.md

1.6. Success Message

  • File: getting-started_community-added-success.png
  • Shows: Green success toast: "Community added successfully"
  • Used in: how-to-add-your-first-property.md

2. Running a Survey

2.1. PriceWatch Navigation

  • File: getting-started_pricewatch-sidebar.png
  • Shows: Left sidebar with "PriceWatch" highlighted
  • Used in: how-to-run-a-survey.md

2.2. Community List

  • File: getting-started_community-list.png
  • Shows: PriceWatch page with community list on right side
  • Should show: 2-3 communities with different statuses (Complete, Processing, Queued)
  • Used in: how-to-run-a-survey.md, how-to-read-your-first-results.md

2.3. Survey Status - Queued

  • File: getting-started_survey-status-queued.png
  • Shows: Community card with blue "Queued" badge
  • Used in: how-to-run-a-survey.md

2.4. Survey Status - Processing

  • File: getting-started_survey-status-processing.png
  • Shows: Community card with yellow "Processing" badge + progress indicator
  • Used in: how-to-run-a-survey.md

2.5. Survey Status - Complete

  • File: getting-started_survey-status-complete.png
  • Shows: Community card with green "Complete" badge + timestamp
  • Used in: how-to-run-a-survey.md

3. Reading First Results

3.1. Metrics Cards - Overview

  • File: getting-started_metrics-cards-overview.png
  • Shows: Three metric cards above tabs:
    • Overall PSI (with Base Rent +3.5%, NER +5.2%)
    • CRI (Score: 62)
    • Market Concession Pressure (Moderate, 60%)
  • Used in: how-to-read-your-first-results.md
  • Note: This is THE most important screenshot for new users

3.2. PSI Card - Detailed

  • File: getting-started_psi-card-detail.png
  • Shows: Closeup of PSI card with tooltip or explanation visible
  • Used in: how-to-read-your-first-results.md

3.3. CRI Card - Detailed

  • File: getting-started_cri-card-detail.png
  • Shows: Closeup of CRI card showing percentile position
  • Used in: how-to-read-your-first-results.md

3.4. Overview Tab - Floor Plans

  • File: getting-started_overview-tab-floor-plans.png
  • Shows: Overview tab with floor plan breakdown table
  • Should show: 3-4 floor plans (Studio, 1BR, 2BR) with PSI/CRI for each
  • Used in: how-to-read-your-first-results.md

Phase 2: Important Screenshots (Core Functionality)

4. Understanding PSI/CRI

4.1. PSI Explanation Graphic

  • File: pricing-decisions_psi-explanation.png
  • Shows: Visual diagram of PSI calculation
  • Content: Your rent ($1,500) vs Comp average ($1,450) = +3.4% PSI
  • Used in: how-to-read-psi-cri.md
  • Type: Can be a designed graphic, not necessarily UI screenshot

4.2. CRI Spectrum Graphic

  • File: pricing-decisions_cri-spectrum.png
  • Shows: 0-100 scale with zones marked:
    • 0-30: Aggressively priced (green)
    • 30-60: Market-aligned (blue)
    • 60-90: Premium pricing (yellow)
    • 90-100: Outlier (red)
  • Used in: how-to-read-psi-cri.md
  • Type: Designed graphic

4.3. PSI Range Interpretation

  • File: pricing-decisions_psi-ranges.png
  • Shows: Table or infographic:
    • -10% to -5%: Significantly below market → Raise rents
    • -5% to -2%: Slightly below → Consider raising
    • -2% to +2%: Market-aligned → Ideal
    • +2% to +5%: Slightly above → Acceptable
    • +5% to +8%: Above market → Monitor vacancy
    • +8%+: Significantly above → Likely overpriced
  • Used in: how-to-read-psi-cri.md
  • Type: Designed graphic or table screenshot

5. Making Pricing Decisions

5.1. Decision Tree Flowchart

  • File: pricing-decisions_decision-tree.png
  • Shows: Flowchart starting with vacancy rate:
    • Vacancy < 5% → Check PSI → Raise/Hold
    • Vacancy 5-10% → Check PSI → Hold/Monitor
    • Vacancy > 10% → Lower or Add Concessions
  • Used in: how-to-decide-on-rent-changes.md
  • Type: Designed graphic (not UI screenshot)

5.2. Overview Tab - Outlier Floor Plan

  • File: pricing-decisions_outlier-floor-plan.png
  • Shows: Overview tab with ONE floor plan highlighted showing PSI > +10%
  • Annotation: Red box around the problematic floor plan
  • Used in: how-to-decide-on-rent-changes.md

5.3. Vacancy Tab - Trend

  • File: pricing-decisions_vacancy-trend.png
  • Shows: Vacancy tab with 14-day and 30-day trends visible
  • Should show: Upward trend (concerning) or downward trend (improving)
  • Used in: how-to-decide-on-rent-changes.md

6. Weekly Pricing Review

6.1. Portfolio View (No Selection)

  • File: weekly-routines_portfolio-view.png
  • Shows: PriceWatch with NO community selected
  • Content: Portfolio-level summary stats (if available)
  • Used in: how-to-do-weekly-pricing-review.md

6.2. Community Selection

  • File: weekly-routines_select-community.png
  • Shows: Community list with cursor hovering over one community
  • Used in: how-to-do-weekly-pricing-review.md

6.3. Metrics Cards - Urgent Property

  • File: weekly-routines_urgent-property-metrics.png
  • Shows: Metrics cards with RED FLAGS:
    • PSI: +11.4% (red)
    • CRI: 82 (yellow)
    • Vacancy: 14% (red)
  • Used in: how-to-do-weekly-pricing-review.md

6.4. Overview Tab - All Floor Plans

  • File: weekly-routines_overview-all-floor-plans.png
  • Shows: Full overview tab with 4-5 floor plans
  • Purpose: Show how to scan all floor plans quickly
  • Used in: how-to-do-weekly-pricing-review.md

6.5. Trend Tab - 6 Month View

  • File: weekly-routines_trend-6-month.png
  • Shows: Trend tab with "6mo" filter selected
  • Should show: Price changes over time for subject + comps
  • Used in: how-to-do-weekly-pricing-review.md

6.6. Checklist Printout

  • File: weekly-routines_checklist.png
  • Shows: Formatted checklist (can be designed, not UI)
  • Content: Weekly review checklist with checkboxes
  • Used in: pricing-review-checklist.md
  • Type: Printable PDF-style graphic

7. Positioning Analysis

7.1. AI Insights Card Location

  • File: positioning_ai-insights-location.png
  • Shows: PriceWatch page with AI Insights card visible
  • Annotation: Arrow pointing to where it appears
  • Used in: how-to-use-positioning-analysis.md

7.2. Positioning Tab (if separate)

  • File: positioning_positioning-tab.png
  • Shows: Positioning tab in PriceWatch tabs
  • Used in: how-to-use-positioning-analysis.md
  • Note: Only if positioning is a separate tab

7.3. The Five Sections - Overview

  • File: positioning_five-sections-overview.png
  • Shows: All 5 sections of positioning analysis visible:
    1. Key Differentiators
    2. Unique Selling Points
    3. Must-Mention Attributes
    4. Objection Handling
    5. Pricing & Concession Advice
  • Used in: how-to-use-positioning-analysis.md
  • Note: Can be scrolling composite screenshot

7.4. Objection Handling Section - Example

  • File: positioning_objection-handling-example.png
  • Shows: Section 4 with 2-3 real objections and responses visible
  • Used in: how-to-handle-common-objections.md

7.5. Pricing Advice - "Increase" Recommendation

  • File: positioning_pricing-advice-increase.png
  • Shows: Section 5 with "Increase" recommendation:
    • Green indicator
    • Specific floor plans mentioned
    • Suggested increase amount
  • Used in: how-to-use-pricing-recommendations.md

7.6. Pricing Advice - "Reduce" Recommendation

  • File: positioning_pricing-advice-reduce.png
  • Shows: Section 5 with "Reduce" recommendation:
    • Red indicator
    • Reasons listed (high vacancy, overpriced PSI)
    • Alternative options (lower rent OR add concessions)
  • Used in: how-to-use-pricing-recommendations.md

7.7. Concession Advice - "Review" Recommendation

  • File: positioning_concession-advice-review.png
  • Shows: Concession section with "Review" recommendation
  • Content: Market pressure indicator + suggested concessions
  • Used in: how-to-use-pricing-recommendations.md

8. Comps Tab

8.1. Comps Tab - Map View

  • File: comps_map-view.png
  • Shows: Comps tab with map (left 2/3) and list (right 1/3)
  • Should show: Subject marker + 8-10 comp markers
  • Used in: navigating-comp-data.md (existing)

8.2. Comps Tab - List View

  • File: comps_list-view.png
  • Shows: Closeup of comp list showing:
    • Comp names
    • Addresses
    • Distance from subject
    • Click to view details
  • Used in: navigating-comp-data.md (existing)

8.3. Comp Drawer - Open

  • File: comps_comp-drawer-open.png
  • Shows: CompDrawer slid up from bottom with comp details
  • Content: Name, address, distance, mini map, floor plans
  • Used in: navigating-comp-data.md (existing)

Phase 3: Nice-to-Have Screenshots (Advanced Features)

9. Team Management

9.1. Team Settings Page

  • File: team_team-settings-page.png
  • Shows: Settings → Team page with team member list
  • Used in: inviting-team-members.md (existing)

9.2. Invite Team Member Form

  • File: team_invite-form.png
  • Shows: Invitation modal with fields:
    • Email
    • Name
    • Role dropdown (Admin/Member)
  • Used in: inviting-team-members.md (existing)

9.3. Pending Invitations List

  • File: team_pending-invitations.png
  • Shows: List of pending invitations with:
    • Name
    • Email
    • Role
    • Status: "Pending"
    • Resend/Cancel buttons
  • Used in: inviting-team-members.md (existing)

10. CSV Import

10.1. Upload CSV Button

  • File: communities_upload-csv-button.png
  • Shows: Communities page with "Upload CSV" button
  • Used in: csv-import-communities.md (existing)

10.2. CSV Upload Modal - Step 1

  • File: communities_csv-upload-step1.png
  • Shows: File upload dropzone or file picker
  • Used in: csv-import-communities.md (existing)

10.3. CSV Preview & Mapping

  • File: communities_csv-preview-mapping.png
  • Shows: Preview table with column mapping dropdowns:
    • CSV column → Aryna field mapping
    • Preview of first 5 rows
    • Continue button
  • Used in: csv-import-communities.md (existing)

10.4. CSV Import Success

  • File: communities_csv-import-success.png
  • Shows: Success modal with:
    • "X communities imported successfully"
    • Button to view communities
  • Used in: csv-import-communities.md (existing)

11. Billing

11.1. Billing Settings Page

  • File: billing_settings-page.png
  • Shows: Settings → Billing page with:
    • Current plan
    • Billing interval (Monthly/Annual)
    • Property count
    • Next billing date
  • Used in: subscription-management.md (existing)

11.2. Invoice List

  • File: billing_invoice-list.png
  • Shows: Invoice history table with:
    • Date
    • Amount
    • Status
    • Download PDF button
  • Used in: Billing guides

12. API Keys

12.1. API Keys Settings Page

  • File: api_api-keys-page.png
  • Shows: Settings → API Keys page with:
    • List of API keys
    • Create new key button
  • Used in: api-key-management.md (existing)

12.2. Create API Key Form

  • File: api_create-key-form.png
  • Shows: Modal with:
    • Key name field
    • Scope checkboxes
    • Create button
  • Used in: api-key-management.md (existing)

12.3. API Key Created - Show Once

  • File: api_key-created-show-once.png
  • Shows: Modal with:
    • "Copy this key now - you won't see it again" warning
    • Full API key visible
    • Copy button
  • Used in: api-key-management.md (existing)

13. Reference Graphics (Designed, Not UI)

13.1. PSI Zones Infographic

  • File: reference_psi-zones-infographic.png
  • Type: Designed graphic
  • Content: Visual representation of PSI ranges with color coding
  • Used in: psi-cri-definitions.md

13.2. CRI Percentile Explanation

  • File: reference_cri-percentile-graphic.png
  • Type: Designed graphic
  • Content: Bell curve showing CRI distribution
  • Used in: psi-cri-definitions.md

13.3. Vacancy Rate Benchmarks

  • File: reference_vacancy-benchmarks.png
  • Type: Designed graphic or table
  • Content: Industry benchmarks by market type
  • Used in: vacancy-rate-benchmarks.md

Screenshot Specifications

Technical Requirements

Resolution:

  • Desktop: 1920x1080 (full screen) or 2560x1440 (retina)
  • UI elements: Crop to relevant area + 20px padding
  • Export at 2x resolution for retina displays

Format:

  • PNG (lossless)
  • 72 DPI for web
  • Optimize with ImageOptim or similar (target: < 500KB per image)

Browser:

  • Chrome (latest version)
  • Zoom level: 100%
  • Clear cookies/cache for clean UI

State:

  • No personal data visible (use demo data)
  • Consistent demo property names across all screenshots
  • Show realistic but clean data (no edge cases)

UI State Guidelines

Demo Data to Use:

  • Property names: "Sunset Apartments", "Riverside Tower", "Metro Place"
  • Addresses: "123 Main St, San Francisco, CA 94102"
  • User names: "John Smith", "Jane Doe"
  • Company: "Demo Property Management"

UI Elements:

  • Mouse cursor: Visible when showing hover states
  • Tooltips: Open when relevant to the step
  • Modals: Centered and fully visible
  • Loading states: Only if explicitly showing loading process

Annotations:

  • Red box or arrow: To highlight key UI elements
  • Numbers: For multi-step screenshots
  • Text labels: Only when UI element names aren't clear

Screenshot Capture Workflow

Tools Needed

  • Screenshot tool: CleanShot X, Snagit, or macOS built-in (Cmd+Shift+4)
  • Annotation tool: Skitch, Markup, or CleanShot X
  • Image optimization: ImageOptim or TinyPNG

Process

  1. Set up demo account with consistent data
  2. Navigate to the screen/state to capture
  3. Clear notifications/toasts (unless that's what you're showing)
  4. Take screenshot
  5. Crop to relevant area (if not full screen)
  6. Add annotations if needed
  7. Optimize image size
  8. Name according to convention
  9. Save to public/guides/screenshots/ directory

Organization

public/
└── guides/
    └── screenshots/
        ├── getting-started/
        │   ├── settings-sidebar.png
        │   ├── add-community-form-filled.png
        │   └── ...
        ├── pricing-decisions/
        │   ├── psi-explanation.png
        │   └── ...
        ├── weekly-routines/
        │   └── ...
        ├── positioning/
        │   └── ...
        └── reference/
            └── ...

Priority Summary

Must-Have for Launch (Phase 1): 15 screenshots

  • Getting started flow (6 screenshots)
  • Survey status (3 screenshots)
  • First results (5 screenshots)
  • Overview tab (1 screenshot)

Timeline: 2-3 hours to capture

Important for Completeness (Phase 2): 18 screenshots

  • PSI/CRI explanations (3 screenshots)
  • Decision-making (3 screenshots)
  • Weekly review (6 screenshots)
  • Positioning analysis (6 screenshots)

Timeline: 3-4 hours to capture

Nice-to-Have (Phase 3): 14 screenshots

  • Team management (3 screenshots)
  • CSV import (4 screenshots)
  • Billing (2 screenshots)
  • API keys (3 screenshots)
  • Reference graphics (2 screenshots)

Timeline: 2-3 hours to capture + design time for graphics

Total Effort Estimate

  • Screenshot capture: 7-10 hours
  • Annotation/editing: 2-3 hours
  • Designed graphics: 3-4 hours (PSI/CRI diagrams, decision trees)
  • Optimization/organization: 1-2 hours
  • Total: 13-19 hours

Notes

  1. Designed Graphics vs Screenshots: Some items (decision trees, PSI zones) should be designed graphics, not UI screenshots. Consider hiring a designer for these 5-6 graphics for better visual consistency.

  2. Annotations: Keep minimal. Use only when UI element might be missed. Prefer clean screenshots.

  3. Dark Mode: Decide if screenshots should show dark mode. Recommend: Light mode for consistency, add dark mode versions only if resources allow.

  4. Updates: Screenshots will need updating when UI changes. Document what version of the app each screenshot represents.

  5. Accessibility: All screenshots should have descriptive alt text in the markdown files where used.

Was this article helpful?

Related Articles

📄General

Still Have Questions?

Our support team is happy to help you.

Email SupportBrowse All Articles