Mid-fi Designs: Result Page

[kirillakovalenko]

Description

To visualize the VROOM/OSRM output for our small business clients, the design team needs to create mid-fidelity wireframes for the Result Page. This screen serves as the critical review and handoff point where the Route Manager verifies the optimized plan before distributing it to drivers. Given our strict stateless architecture, the UI must efficiently structure the map and routing data for up to 250+ stops. The focus of this mid-fi phase is establishing the interaction model for the map (handling pins and details) and the information hierarchy of the expandable route lists.

Scope

• In Scope: * Mid-fidelity layouts for both Desktop and Mobile viewports.
  • Structural design of the interactive map component and its varying pin states.
  • Accordion-style layout for optimized routes (collapsed and expanded states).
  • Modal design for the Export overlay.
• Top-level navigation toggle.
• Out of Scope: * High-fidelity branding, typography, or final map styling (e.g., specific OpenStreetMap tile aesthetics).
  • Designs for the Edit Page.

Goal

To establish a clear, functional blueprint for the final optimized route output, ensuring Route Managers can easily digest complex routing data, verify estimated times of arrival, and manage driver handoffs intuitively across any device.

Acceptance Criteria

• Core Actions: The UI includes prominent buttons for "Save" and "Export".

• Navigation: The top-of-page toggle clearly indicates the user is on the Result View and allows switching back to the Edit Page.

• Map View Component: The wireframe must include a map area demonstrating:

  • Destination pins placed along a route.
  • A "draggable" interaction state for pins (e.g., visual cue when a pin is being manually adjusted).
  • A pop-up/overlay showing the "details of delivery" when a specific pin is clicked.

• Optimized Routes List (Accordion UI): The layout must support multiple routes that collapse and expand:

  • Collapsed state includes: Route number, Driver name, number of stops, total distance, estimated time, and vehicle type.
  • Open state includes: A numbered list of all deliveries containing the recipient's address, Name, phone number, estimated time of arrival (ETA), Note, and Package count.

• Export Overlay: A defined modal/overlay state triggered by the Export button, outlining options (e.g., CSV, JSON, Driver deep-links).

• Responsiveness: Completed for both Desktop and Phone screens, heavily prioritizing the mobile layout for on-the-go managers.

• Attach Figma Link and Screenshots

Assignee

@eltouami