{ "screenshot_id": "IMG_2683", "sequence_index": 28, "png_path": "v2/img/mobile-app/screens/png/IMG_2683.png", "basic_info": { "screen_name": "Availability Editor", "feature_area": "schichtplanung", "ui_elements": [ "Calendar grid", "Available button", "Reset button", "Availability details card", "Time picker", "Save button" ], "functionality_visible": [ "Set availability for a specific day", "Reset availability", "Select start and end times for availability" ], "navigation_paths": [ "Tap a day to edit availability", "Tap Save to confirm changes" ], "data_displayed": [ "Calendar dates", "Selected date", "Availability status", "Start and end times for availability", "Employee name", "Location" ], "user_actions": [ "Tap", "Select date", "Select time", "Save" ], "visible_text_labels": [ "Home", "Calendar", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "January 2026", "Available", "Reset", "Felix Knoerzer", "From", "To", "Save" ], "one_line_description": "This screen allows the user to set their availability for a specific day, including start and end times.", "screenshot_id": "IMG_2683", "sequence_index": 28, "png_path": "v2/img/mobile-app/screens/png/IMG_2683.png" }, "deep_understanding": { "screen_context": "The user sees this screen after selecting a day on the calendar and choosing to set their availability. It appears as a modal or pop-up on top of the calendar day view.", "user_goal": "The user wants to define their availability for a specific day by setting a 'from' and 'to' time.", "business_value": "This screen allows employees to communicate their availability to the business, enabling efficient shift scheduling and resource allocation. It helps avoid scheduling conflicts and ensures adequate staffing levels.", "state_information": { "data_shown": "The screen displays the date for which the availability is being set (Wednesday, 21. January), and 'From' and 'To' time selection fields.", "editable_fields": "The 'From' and 'To' times can be edited.", "read_only_fields": "The date (Wednesday, 21. January) is likely read-only, as it was selected on the previous screen.", "current_state": "The user is in the process of defining their availability for Wednesday, January 21st, 2026, and has set the 'From' time to 9:00 AM and the 'To' time to 5:00 PM." }, "interactions": [ { "action": "Tap the 'From' time (9:00 AM)", "outcome": "A time picker is displayed, allowing the user to select a different start time.", "next_state": "Time picker modal is displayed.", "error_possibilities": "The time picker might not load correctly, or the user might accidentally select the wrong time." }, { "action": "Tap the 'To' time (5:00 PM)", "outcome": "A time picker is displayed, allowing the user to select a different end time.", "next_state": "Time picker modal is displayed.", "error_possibilities": "The time picker might not load correctly, or the user might accidentally select the wrong time." }, { "action": "Tap the 'Save' button", "outcome": "The selected availability is saved for the specified date.", "next_state": "The screen closes, and the user is returned to the calendar day view, with the updated availability reflected.", "error_possibilities": "The save operation might fail due to network connectivity issues or data validation errors (e.g., 'To' time is earlier than 'From' time). An error message would be displayed." } ], "edge_cases": [ "The user might try to set an availability range that overlaps with an existing shift.", "The user might have permission restrictions that prevent them from setting availability for certain days or times.", "The user might try to set an invalid time range (e.g., 'To' time before 'From' time).", "The user might have different roles with different availability setting permissions.", "The user might not have any shifts scheduled for that day." ], "benefits": "This screen provides a simple and intuitive way for employees to manage their availability, improving communication and coordination within the workforce. It reduces the likelihood of scheduling conflicts and ensures that employees are only scheduled for shifts they are available to work.", "mental_model": "The screen supports a mental model of setting availability as a time range within a specific day. The 'From' and 'To' fields clearly represent the start and end times of the availability period. The 'Save' button reinforces the idea that the changes need to be explicitly saved." }, "relationships": { "connects_to": [ { "screen_type": "Calendar Day View", "trigger": "Saving the availability settings", "data_passed": "Updated availability data (start and end times) for the selected day", "purpose": "To reflect the changes made to the availability on the calendar day view" } ], "depends_on": [ { "screen_type": "Calendar Day View", "required_data": "Selected date (day) for which to edit availability", "purpose": "To know which day's availability to edit" } ], "data_flow": "Incoming: Selected date from the calendar day view. Outgoing: Updated availability data (start and end times) to the calendar day view.", "navigation_patterns": [ { "pattern_type": "modal", "description": "The availability editor appears as a modal overlay on top of the calendar day view. After saving, the modal closes and returns to the calendar day view." } ], "feature_dependencies": [ "schichtplanung", "calendar" ], "alternative_paths": [ "User might not edit availability and simply close the modal, returning to the calendar day view with no changes.", "User might reset the availability to default settings." ] }, "user_flows": { "user_journeys": [ { "journey_name": "Set Availability for a Day", "goal": "Set availability for a specific day in the calendar.", "steps": [ { "step_number": 1, "screen_type": "Shift calendar", "action": "Select a day (e.g., Wednesday, 21)", "outcome": "Navigates to the Calendar Day View screen." }, { "step_number": 2, "screen_type": "Calendar Day View", "action": "Tap 'Available'", "outcome": "Navigates to the Availability Editor screen." }, { "step_number": 3, "screen_type": "Availability Editor", "action": "Set 'From' time to 9:00 AM", "outcome": "Sets the start time for availability." }, { "step_number": 4, "screen_type": "Availability Editor", "action": "Set 'To' time to 5:00 PM", "outcome": "Sets the end time for availability." }, { "step_number": 5, "screen_type": "Availability Editor", "action": "Tap 'Save'", "outcome": "Saves the availability settings and returns to the Calendar Day View screen." } ], "happy_path": true, "alternative_paths": [] } ], "error_recovery_flows": [], "flow_variations": [] }, "benefits": { "user_benefits": { "employee": [ "Easily set your availability for work.", "Specify the exact hours you are available on a given day.", "Avoid being scheduled when you are unavailable.", "Manage your work-life balance by controlling your availability." ], "manager": [ "Ensure adequate staffing levels by knowing employee availability.", "Simplify scheduling by having clear availability information.", "Reduce scheduling conflicts by considering employee preferences.", "Improve employee satisfaction by respecting their availability." ], "hr_admin": [], "general": [ "Clear and intuitive interface for setting availability.", "Visual calendar for easy date selection.", "Ability to set availability for specific days and times." ] }, "business_value": { "problem_solved": "Difficulty in managing and communicating employee availability, leading to scheduling conflicts and understaffing.", "value_proposition": "Provides a simple and efficient way for employees to set their availability, ensuring accurate scheduling and optimized staffing.", "differentiators": "Integrated calendar view, easy time selection, and clear visual representation of availability.", "impact": "Reduces scheduling errors, improves employee satisfaction, and optimizes staffing levels, leading to increased productivity and reduced costs." }, "use_cases": [ { "scenario": "A restaurant employee needs to update their availability due to a change in their school schedule.", "user_type": "employee", "benefit": "The employee can easily update their availability, ensuring they are not scheduled during school hours." }, { "scenario": "A manager needs to create a schedule for the week and wants to see which employees are available on Wednesday.", "user_type": "manager", "benefit": "The manager can quickly view the availability of all employees and create a schedule that meets the needs of the business while respecting employee preferences." }, { "scenario": "An employee wants to set their availability for the next month, indicating they are only available on weekends.", "user_type": "employee", "benefit": "The employee can set their availability in advance, ensuring they are only scheduled on weekends." } ], "value_statements": [ "Effortlessly manage your availability with our intuitive calendar interface.", "Ensure accurate scheduling and avoid conflicts by setting your availability in advance.", "Optimize staffing levels and improve employee satisfaction with clear availability information.", "Take control of your work-life balance by managing your availability." ] } }