Hi-fi Designs: Landing Page Funnel

[kirillakovalenko]

Description

Transform the approved mid-fidelity landing page funnel into high-fidelity, developer-ready visual designs. As the first touchpoint for both Route Managers and Drivers, this onboarding funnel must communicate trust, simplicity, and the secure, stateless nature of the PWA. It is critical that all updates from the mid-fi wireframes to these hi-fi mockups strictly adhere to our established Design System, utilizing the finalized color palette, typography scale, component library, and "B2 with love for humanity" branding.

Scope

• In Scope:
  • High-fidelity visual designs for the complete landing page flow across both desktop and mobile viewports.
  • Application of the Design System to the Role Selection screen, First-Time Manager flow (CSV/Manual entry), Returning Manager flow (JSON upload), and Driver flow (Route file upload).
  • High-fidelity styling for all file upload states (empty, drag-over, uploading, error).

Goal

To deliver pixel-perfect, stakeholder-approved mockups for the application's account-free onboarding funnel, ensuring a seamless handoff to the engineering team for Phase 1 implementation.

Acceptance Criteria

• The designs strictly follow the established Design System guidelines for all typography, spacing, colors, buttons, and icons.
• Full-page hi-fi mockups are delivered for both Desktop and Mobile screens.
• The initial Role Selection screen features a finalized UI that clearly separates the "Manage Route" and "Drive Route" paths.
• The First-Time Route Manager flow includes finalized, styled options for "Upload CSV" and "Manual Entry".
• The Returning Route Manager flow includes a visually distinct, finalized dropzone for uploading a "Save Point JSON" file.
• The Driver flow includes a visually distinct, finalized dropzone for uploading a finalized route file.
• All file upload interfaces include detailed visual treatments for default empty states, active drag-and-drop states, and file validation error states.
• Attach Figma Link and Screenshots

Assignee

@eltouami