Hi-fi Designs: Edit Page

[kirillakovalenko]

Description

Transform the approved mid-fidelity wireframes for the Edit Page into finalized, developer-ready high-fidelity designs. This involves applying the full visual identity specified in the existing Design System (color palette, typography, spacing, shadows, component libraries, and iconography). The hi-fi designs must account for complex interactions like modal overlays, the drag-and-drop state, and error handling for address validation. As a completely stateless PWA, the final designs must convey a modern, reliable, and secure feel, ensuring Route Managers feel confident in processing their sensitive data locally.

Scope

• In Scope: * Finalized visual designs for both Desktop and Mobile viewports for the entire Edit Page.
  • Application of the Design System to all elements.
  • Design of required modal overlays (Import CSV, Add Address).
  • Explicit designs for all component states (default, hover, active, error, loading, empty, drag-over).
• Out of Scope: * Hi-fi designs for the Result Page.

Goal

To produce finalized, stakeholder-approved visual mockups that allow the front-end engineering team to proceed with pixel-perfect implementation. The hi-fi designs should enhance usability through proper visual hierarchy and clear feedback states while reinforcing the privacy-first nature of the product.

Acceptance Criteria

• All designs must adhere to the provided Design System guidelines.

• Full-page hi-fi mockups delivered for Desktop and Mobile screens.

• Navigation: The Top of the Page toggle to switch between Edit and Result View is visually distinct and indicates the active state (Edit).

• Core Actions: Buttons for "Save" (local file or session state), "Export", and "Optimize" are prominent and use appropriate primary/secondary styling.

• Vehicle Details Section: Finalized input fields, labels, and iconography for:

  • Name of Driver
  • Type of Vehicle
  • Capacity measures (units)
  • Capacity of Vehicle (value)
  • Departure time
  • Delete Button (with confirmation styling)
  • Availability toggle (designed in active/inactive states).

• Delivery Section: Finalized input fields, labels, and iconography for:

  • Recipient details (Name, Address, Phone number)
  • Time buffer
  • Delivery quantity
  • Notes field
  • Delete Button (with confirmation styling)
  • Dropdown menu for Delivery constraints: Options for "Delivery by" / "Delivery between".

• Address Ingestion UI: Optimized layout for the Search address bar, the "Upload" button, and the "Add New Address" button.

• Pagination: Hi-fi styled controls for delivery list pagination (250+ stops).

• Interactive States: explicit designs included for:

  • Drop Files here upload state: Visual overlay applied when a CSV file is dragged over the target area.
  • Empty States: Clear, encouraging illustrations/text for when there are no vehicles or delivery items.
  • Error state: Specific design showing how fields (e.g., an incorrect/unrecognized address) are highlighted when validation fails.

• Modal Overlays: Design separate states/components for:

  • Import CSV overlay: Including a simplified UI for mapping CSV column headers to the required delivery fields.
  • Add address overlay: Full manual entry form for a single stop.

• Branding: "B2 with love for humanity" branding applied to the page footer.

• Attach Figma Link and Screenshots

Assignee

@katherinyuh