Mid-fi Designs: Landing Page Funnel

[kirillakovalenko]

Description

Transition the approved low-fidelity landing page flow into detailed mid-fidelity wireframes. This funnel serves as the gateway to the application, routing users based on their role (Route Manager vs. Driver) and their session status (New vs. Returning). Because the Delivery Optimizer is a stateless PWA without user accounts, the onboarding experience relies heavily on clear file ingestion interfaces. The mid-fi designs must meticulously map out the structure of these upload zones, interaction states, and manual entry pathways, establishing a frictionless entry experience prior to applying final visual styling.

Scope

• In Scope: * Mid-fidelity structural designs for all branches of the provided landing page flow diagram.
  • Desktop and mobile layouts.
  • Detailed UI components for file upload areas (drag-and-drop zones, file browse buttons).
  • Explicit empty states for the entry screens.
• Out of Scope: * High-fidelity visual design (colors, branding, final typography).
  • Designs for the Edit Page, Result Page, or Driver View.

Goal

To solidify the interaction design, information architecture, and specific UI components of the account-free onboarding funnel, ensuring users can quickly and intuitively upload their required data (CSV, JSON, or Route files) to access their respective workspaces.

Acceptance Criteria

• Role Selection UI: Mid-fi design of the initial landing screen clearly presenting the choice between "Manage Route" (Route Manager) and "Drive Route" (Driver).
• Route Manager Flow (First Time): Detailed UI presenting the choice between "Upload CSV" and "Manual Entry" (including the structural layout for the CSV upload zone).
• Route Manager Flow (Returning): Detailed UI for the "Upload Save Point JSON" dropzone.
• Driver Flow: Detailed UI for the "Upload Route" dropzone.
• Empty States: Explicit mid-fi designs demonstrating the empty state for all file upload interfaces (i.e., the default appearance of the upload zones before a user interacts with them or selects a file).
• Interactive States: Structural representations of drag-and-drop active states (what the UI looks like when a file is hovering over the dropzone).
• Responsiveness: Wireframes are completed for both Mobile and Desktop viewports.
• Attach Figma Link and Screenshots

Assignee

@eltouami