# Ordio Mobile App – Navigation Flows

**Last Updated:** 2026-02-02

Navigation flows and user journeys for the Ordio Mitarbeiter-App. Flow is derived from screenshot sequence; refine after full AI analysis or manual review.

## Data Source

- **Sequence flow:** `docs/data/mobile-app-navigation-flows.json` (`sequence_flow` array)
- **Screen groups:** `docs/data/mobile-app-screen-groups.json` (`by_feature_area`)

## Flow by Screenshot Sequence

Screens are ordered by capture sequence (IMG_2655 → IMG_2745). Each step has:

- **step:** Order (1–90)
- **screenshot_id:** e.g. IMG_2655
- **screen_name:** From analysis (e.g. Screen 1 (IMG_2655))
- **feature_area:** From analysis (e.g. other; will be refined with full AI)
- **next:** Next screenshot_id in sequence

**Example (first steps):**

1. IMG_2655 → next: IMG_2656  
2. IMG_2656 → next: IMG_2657  
3. IMG_2657 → next: IMG_2658  
… (full list in `docs/data/mobile-app-navigation-flows.json`)

## User Journeys

### Primary User Journeys

#### 1. Login → Dashboard Journey

**Goal:** Access the app and reach the main dashboard

**Steps:**
1. Open Ordio Mitarbeiter-App
2. Enter credentials (email/phone and password)
3. Select workspace (if multiple workspaces available)
4. Complete onboarding (first-time users)
5. Land on dashboard with personalized greeting

**Navigation Pattern:** Linear (Login → Workspace Selection → Onboarding → Dashboard)

**Screens Involved:** 6 login screens, 1 workspace selection, 2-3 onboarding screens, 7 dashboard screens

**Alternative Paths:**
- Skip onboarding if already completed
- Direct to dashboard if single workspace

#### 2. View Shifts Journey

**Goal:** Check upcoming shifts and shift details

**Steps:**
1. From dashboard: Tap "Schichten" or calendar card
2. View shift calendar (weekly/monthly view)
3. Navigate to specific date
4. Tap shift for details (time, location, work area, notes)
5. Optional: Apply for open shifts or set availability

**Navigation Pattern:** Hub-and-spoke (Dashboard → Calendar → Shift Details)

**Screens Involved:** Dashboard → Shift Calendar → Shift Details → (optional) Shift Applications

**Alternative Paths:**
- Filter by location or department
- View availability calendar
- Apply for open shifts directly

#### 3. Time Tracking Journey

**Goal:** Clock in/out and track working time

**Steps:**
1. From dashboard: Tap "Zeiterfassung" or quick start button
2. View current shift countdown (if before shift start)
3. Tap "Starten" to clock in
4. During shift: Tap to start/end breaks
5. Tap "Beenden" to clock out
6. View time entry summary and working time account

**Navigation Pattern:** Linear with state management (Dashboard → Time Tracking → Clock In → Break Management → Clock Out)

**Screens Involved:** Dashboard → Time Tracking Interface → Clock In → Break Management → Clock Out → Time Summary

**State Transitions:**
- Before shift: Countdown timer
- During shift: Active time tracking with break options
- After shift: Time entry summary

**Error Recovery:**
- If clock in fails: Retry with error message
- If GPS required: Enable location services
- If shift not found: Contact manager

#### 4. Absence Request Journey

**Goal:** Request vacation or report absence

**Steps:**
1. From dashboard: Tap "Abwesenheiten" card or menu
2. View absence balance and recent requests
3. Tap "New Request" or "Request Absence"
4. Fill form: Start date, end date, type (vacation, sick, etc.)
5. Optional: Mark half-days, add notes, attach documents
6. Submit request
7. View confirmation and track status

**Navigation Pattern:** List-to-detail (Absences List → Request Form → Confirmation)

**Screens Involved:** Dashboard → Absences List → Absence Request Form → Confirmation

**Alternative Paths:**
- Quick request from dashboard card
- View absence history
- Cancel pending requests

#### 5. Complete Checklist Journey

**Goal:** Complete assigned checklist tasks

**Steps:**
1. From dashboard: Tap "Checklists" card
2. View pending checklists (today's and permanent)
3. Tap checklist to open
4. Complete each task (mark complete, add photos, signatures)
5. Submit checklist
6. View confirmation and archive

**Navigation Pattern:** List-to-detail (Checklists List → Checklist Detail → Task Completion → Submission)

**Screens Involved:** Dashboard → Checklists List → Checklist Detail → Task Items → Submission → Archive

**Checklist Types:**
- HACCP checklists (temperature checks, signatures)
- Cleaning checklists (coffee machine, cutlery)
- General task checklists

#### 6. Upload Document Journey

**Goal:** Upload required documents

**Steps:**
1. From dashboard: Tap "Documents" card
2. View required documents list
3. Tap document to upload
4. Download template (if available)
5. Upload document (camera or gallery)
6. View upload status and verification

**Navigation Pattern:** List-to-detail (Documents List → Document Detail → Upload → Status)

**Screens Involved:** Dashboard → Documents List → Document Upload → Status

### Secondary User Journeys

#### Shift Application Journey

**Goal:** Apply for open shifts

**Steps:**
1. From shift calendar: View open shifts
2. Filter by location, department, or date
3. Tap open shift to view details
4. Tap "Apply" or "Apply Now"
5. View application status
6. Receive notification on approval/rejection

**Navigation Pattern:** Calendar → Shift Details → Application → Status

#### Availability Management Journey

**Goal:** Set availability for shift planning

**Steps:**
1. From shift calendar: Tap availability button
2. Select dates and time slots
3. Mark as available/unavailable
4. Save availability
5. View availability calendar

**Navigation Pattern:** Calendar → Availability Selection → Confirmation

#### Dashboard Customization Journey

**Goal:** Customize dashboard widgets

**Steps:**
1. From dashboard: Tap edit button
2. Reorder widgets (drag and drop)
3. Enable/disable widgets
4. Save changes
5. View customized dashboard

**Navigation Pattern:** Dashboard → Edit Mode → Customization → Save

## Navigation Patterns Identified

### Pattern 1: Hub-and-Spoke

**Description:** Central dashboard with spokes to feature areas

**Examples:**
- Dashboard → Schichtplanung
- Dashboard → Zeiterfassung
- Dashboard → Abwesenheiten
- Dashboard → Checklists
- Dashboard → Documents

**Benefits:** Single entry point, consistent navigation, quick access

### Pattern 2: Linear Flow

**Description:** Sequential progression through related screens

**Examples:**
- Login → Workspace Selection → Dashboard
- Clock In → Break Management → Clock Out
- Request Form → Confirmation → Status

**Benefits:** Clear progression, guided workflow, predictable navigation

### Pattern 3: List-to-Detail

**Description:** List view → Detail view → Action

**Examples:**
- Checklists List → Checklist Detail → Task Completion
- Documents List → Document Detail → Upload
- Absences List → Absence Request Form → Submission

**Benefits:** Overview first, then details, efficient navigation

### Pattern 4: Modal/Overlay

**Description:** Overlay screens for quick actions or details

**Examples:**
- Shift details overlay from calendar
- Quick time tracking actions from dashboard
- Filter menus

**Benefits:** Quick access, context preservation, non-intrusive

## Error Recovery Flows

### Login Errors

**Error:** Invalid credentials
**Recovery:** Show error message, allow retry, provide "Forgot Password" link

**Error:** Network unavailable
**Recovery:** Show offline message, allow retry when online

### Time Tracking Errors

**Error:** Clock in before shift start
**Recovery:** Show countdown timer, allow early clock-in with confirmation

**Error:** GPS required but disabled
**Recovery:** Prompt to enable location services, provide instructions

**Error:** Shift not found
**Recovery:** Show error message, suggest contacting manager

### Form Submission Errors

**Error:** Required fields missing
**Recovery:** Highlight missing fields, prevent submission

**Error:** Invalid date range
**Recovery:** Show validation error, suggest correct range

**Error:** Network error during submission
**Recovery:** Save draft locally, retry when online

## Flow Variations

### By User Role

**Employee:** Full access to all features
**Manager:** Additional approval workflows
**HR/Admin:** Administrative access (web app primarily)

### By Data State

**First-time user:** Onboarding flow required
**Returning user:** Direct to dashboard
**No shifts assigned:** Different dashboard view
**Pending requests:** Highlighted in dashboard

### By Context

**Before shift:** Countdown timer, preparation info
**During shift:** Active time tracking, break options
**After shift:** Time summary, next shift info

## Related Documentation

- [mobile-app-documentation.md](mobile-app-documentation.md) – Main mobile app documentation
- [mobile-app-user-flows.md](mobile-app-user-flows.md) – Detailed user flow documentation
- [mobile-app-feature-relationships.md](mobile-app-feature-relationships.md) – Feature relationships
- [mobile-app-diagrams.md](mobile-app-diagrams.md) – Navigation diagrams

## Refining Flows

- Run full AI analysis: `python3 v2/scripts/mobile-app/analyze-screenshots-ai.py`
- Re-run validation: `python3 v2/scripts/mobile-app/validate-and-group-analysis.py`
- Update `mobile-app-navigation-flows.json` and this doc with feature_area and logical flows (e.g. login → dashboard → schichtplanung).

## Related Documentation

- [mobile-app-documentation.md](mobile-app-documentation.md) – Main mobile app documentation
- [mobile-app-screens.md](mobile-app-screens.md) – Screen-by-screen list
- [mobile-app-diagrams.md](mobile-app-diagrams.md) – Mermaid flow diagrams