# Visual Documentation Plan for Product Features **Last Updated:** 2026-01-08 Plan for creating visual documentation (screenshots, diagrams, flowcharts) for all product features. ## Visual Documentation Standards ### Screenshot Standards **Format:** - **Web:** WebP format (better compression, quality) - **Detailed:** PNG format (for complex screenshots requiring pixel-perfect detail) - **Size:** Maximum 1920px width, optimized for web - **Quality:** 85-90% quality for WebP, 80-85% for PNG **Naming Convention:** - `[feature-slug]-[view-type].webp` - Examples: `abwesenheiten-dashboard.webp`, `lohnabrechnung-mobile.webp` **Alt Text Format:** - "[Feature name] [view type] showing [key elements]" - Example: "Abwesenheiten dashboard showing vacation calendar and pending requests" **Placement:** - After relevant text section - Include caption describing what's shown - Use responsive image markup with srcset ### Diagram Standards **User Flow Diagrams:** - Format: SVG (scalable) or PNG (if complex) - Show step-by-step processes - Include decision points clearly - Use consistent symbols and colors - Tools: Mermaid (for markdown), Draw.io, or similar **Integration Diagrams:** - Format: SVG preferred - Show how features connect to other systems - Include data flow arrows - Label all components clearly **Architecture Diagrams:** - Format: SVG or PNG - Show system components and relationships - Use consistent styling - Include legend if needed ## Screenshot Requirements by Feature ### 1. Abwesenheiten **Required Screenshots:** - Dashboard view: `/v2/img/screenshots/abwesenheiten-dashboard.webp` - Shows: Calendar view, pending requests, availability overview - Alt: "Abwesenheiten dashboard showing vacation calendar and pending requests" - Mobile view: `/v2/img/screenshots/abwesenheiten-mobile.webp` - Shows: Mobile app interface for requesting absences - Alt: "Abwesenheiten mobile app showing absence request form" - Request form: `/v2/img/screenshots/abwesenheiten-request.webp` - Shows: Absence request interface - Alt: "Abwesenheiten request form with date picker and reason selection" **Diagrams:** - User flow: Absence request → Approval → Calendar update - Integration: Connection to Schichtplanung and Zeiterfassung ### 2. Lohnabrechnung **Required Screenshots:** - Payroll dashboard: `/v2/img/screenshots/payroll-dashboard.webp` - Shows: Payroll overview, employee list, calculation status - Alt: "Lohnabrechnung dashboard showing payroll overview and employee calculations" - Calculation view: `/v2/img/screenshots/payroll-calculation.webp` - Shows: Detailed payroll calculation interface - Alt: "Lohnabrechnung calculation view showing hours, deductions, and net pay" - DATEV export: `/v2/img/screenshots/payroll-datev-export.webp` - Shows: DATEV export interface and options - Alt: "Lohnabrechnung DATEV export interface showing export options" **Diagrams:** - User flow: Time tracking → Payroll calculation → DATEV export - Integration: DATEV, Zeiterfassung, Schichtplanung ### 3. Dokumentenmanagement **Required Screenshots:** - Document library: `/v2/img/screenshots/dokumentenmanagement-library.webp` - Shows: Document list, categories, search - Alt: "Dokumentenmanagement library showing categorized documents and search" - Document upload: `/v2/img/screenshots/dokumentenmanagement-upload.webp` - Shows: Upload interface with drag-and-drop - Alt: "Dokumentenmanagement upload interface with drag-and-drop functionality" - Deadline management: `/v2/img/screenshots/dokumentenmanagement-deadlines.webp` - Shows: Deadline calendar and reminders - Alt: "Dokumentenmanagement deadline calendar showing upcoming document deadlines" **Diagrams:** - User flow: Document upload → Categorization → Deadline tracking - Integration: Digitale Personalakte, Abwesenheiten ### 4. Digitale Personalakte **Required Screenshots:** - Employee file view: `/v2/img/screenshots/personalakte-employee-file.webp` - Shows: Complete employee file with all documents - Alt: "Digitale Personalakte employee file showing all documents and information" - Document management: `/v2/img/screenshots/personalakte-documents.webp` - Shows: Document organization within employee file - Alt: "Digitale Personalakte document management interface" - Form builder: `/v2/img/screenshots/personalakte-forms.webp` - Shows: Personalfragebogen creation interface - Alt: "Digitale Personalakte form builder for creating employee questionnaires" **Diagrams:** - User flow: Employee onboarding → Document collection → File completion - Integration: Dokumentenmanagement, Abwesenheiten, Zeiterfassung ### 5. Checklists **Required Screenshots:** - Checklist dashboard: `/v2/img/screenshots/checklists-dashboard.webp` - Shows: List of checklists, status, assignments - Alt: "Checklists dashboard showing active checklists and completion status" - Checklist detail: `/v2/img/screenshots/checklists-detail.webp` - Shows: Individual checklist with tasks and status - Alt: "Checklists detail view showing tasks and completion status" - Mobile checklist: `/v2/img/screenshots/checklists-mobile.webp` - Shows: Mobile app interface for completing checklists - Alt: "Checklists mobile app showing task completion interface" **Diagrams:** - User flow: Checklist creation → Task assignment → Completion tracking - Integration: Zeiterfassung, Dokumentenmanagement ### 6. Mobile Apps **Required Screenshots:** - App store view: `/v2/img/screenshots/mobile-apps-store.webp` - Shows: App store interface with available apps - Alt: "Mobile Apps store showing available Ordio mobile applications" - App features: `/v2/img/screenshots/mobile-apps-features.webp` - Shows: Key mobile app features - Alt: "Mobile Apps features overview showing main functionality" - Integration view: `/v2/img/screenshots/mobile-apps-integrations.webp` - Shows: Available integrations in app store - Alt: "Mobile Apps integrations view showing available third-party integrations" **Diagrams:** - Architecture: Mobile app → Backend API → Core features - Integration: All feature integrations ### 7. Events **Required Screenshots:** - Event dashboard: `/v2/img/screenshots/events-dashboard.webp` - Shows: Event list, upcoming events, team assignments - Alt: "Events dashboard showing event list and team assignments" - Event planning: `/v2/img/screenshots/events-planning.webp` - Shows: Event creation and planning interface - Alt: "Events planning interface for creating and managing events" - Team assignment: `/v2/img/screenshots/events-team-assignment.webp` - Shows: Assigning team members to events - Alt: "Events team assignment interface showing employee selection" **Diagrams:** - User flow: Event creation → Team assignment → Schedule generation - Integration: Schichtplanung, Zeiterfassung ### 8-9. Webinar & Payroll Webinar **Required Screenshots:** - Webinar registration: `/v2/img/screenshots/webinar-registration.webp` - Shows: Webinar registration form - Alt: "Webinar registration form showing signup interface" - Webinar details: `/v2/img/screenshots/webinar-details.webp` - Shows: Webinar information and schedule - Alt: "Webinar details page showing schedule and topics" **Diagrams:** - User flow: Registration → Confirmation → Attendance ### 10-11. Schichtplanung & Zeiterfassung (Enhancement) **Additional Screenshots Needed:** - Enhanced workflow diagrams - Integration diagrams - Mobile app screenshots ## Diagram Requirements ### User Flow Diagrams **Required for:** - Abwesenheiten: Request → Approval workflow - Lohnabrechnung: Calculation → Export workflow - Dokumentenmanagement: Upload → Categorization workflow - Digitale Personalakte: Onboarding → File completion workflow - Checklists: Creation → Completion workflow - Events: Creation → Team assignment workflow **Format:** Mermaid diagrams in markdown or SVG files ### Integration Diagrams **Required for:** - Feature relationships: How features connect - System architecture: Backend → Frontend → Mobile - External integrations: DATEV, Personio, etc. **Format:** SVG preferred for scalability ## Implementation Plan ### Phase 1: Screenshot Creation 1. **Access to Product** - Need access to Ordio product (staging or production) - Create test accounts for each feature - Set up test data for realistic screenshots 2. **Screenshot Capture** - Use browser DevTools for web screenshots - Use device emulation for mobile screenshots - Ensure consistent styling and data 3. **Image Optimization** - Convert to WebP format - Optimize file sizes - Add proper alt text and captions ### Phase 2: Diagram Creation 1. **User Flow Diagrams** - Create Mermaid diagrams in markdown - Or create SVG diagrams using Draw.io - Include in documentation files 2. **Integration Diagrams** - Map feature relationships - Show data flow - Include in technical sections ### Phase 3: Integration 1. **Add to Documentation** - Insert screenshots in appropriate sections - Add diagrams to technical/user experience sections - Update alt text and captions 2. **Validate** - Check all images load correctly - Verify alt text is descriptive - Ensure responsive behavior ## File Organization **Screenshot Directory:** - `/v2/img/screenshots/` - All feature screenshots **Diagram Directory:** - `/v2/img/diagrams/` - All feature diagrams **Naming Convention:** - Screenshots: `[feature-slug]-[view-type].webp` - Diagrams: `[feature-slug]-[diagram-type].svg` ## Related Documentation - [Best Practices Report](BEST_PRACTICES_REPORT.md) - [Content Enhancement Plan](CONTENT_ENHANCEMENT_PLAN.md) - [Documentation Template](../../DOCUMENTATION_TEMPLATES.md)