Gig Overview: This project involves designing a modern, responsive, and user-friendly UI for a Logistics and Fleet Management System using Figma. The design will focus on automating vehicle scheduling, real-time tracking, cost monitoring, and vendor management while ensuring seamless integration with the General Activities Calendar (GAC) and Vendor Management System (VMS). You have been provided with a figma design link below showing the companies sidebar and top navigation bar please use it for your design.Please request access to edit figma design.

Scope of Work:

1. Dashboard Design

1. Features:

   1. Overview of fleet status (available, booked, in transit).

   2. Real-time vehicle tracking (map integration).

   3. Quick access to pending approvals, upcoming trips, and alerts.

   4. Key metrics (total trips, cost trends, vendor performance).

   5. Trends for best or worst performing vendor/vehicle.

   6. Table for list of Fleet pagination of 5 items.

2. Tasks:

   1. Create a reusable table component using Vue.js Composition API.

   2. Design an interactive dashboard with cards, charts, and status indicators.

   3. Use auto-layout and components for scalability.

   4. Ensure data visualization clarity (e.g., bar charts for cost trends, pie charts for fleet utilization).

2. Vehicle Scheduling and Automation Page

1. Features:

   1. Auto-scheduling based on GAC events (name, date, time, location).

   2. Form for Request type selection (in-house vs. hired vehicle).

   3. List and View of Conflict resolution for logistics officers.

   4. Calendar view for fleet managers to see vehicle schedule (daily/weekly allocations).

2. Tasks:

   1. Design an intuitive scheduling interface with drag-and-drop functionality.

   2. Implement modals for trip requests.

   3. Forms for Request type selection with validation.

   4. Design visual and interactive tables.

   5. Ensure role-based UI variations (field staff vs. logistics officers).

3. Real - Time Tracking and Trip Management

1. Features:

   1. Live vehicle location tracking (map view).

   2. Trip details (driver, ETA, route deviations).

   3. Form to fill trips (passengers, distance, duration etc)

   4. List of trips for trip management(trip, driver, duration, vehicle) 

   5. Notifications system (SMS/email/in-app alerts).

2. Tasks:

   1. Design a user-friendly layout in Figma.

   2. Use components and auto-layout for scalability.

   3. Ensure color contrast and typography enhance readability.

   4. Design a map-integrated tracking panel.

   5. Create trip status cards (ongoing, delayed, completed).

   6. Ensure responsive behavior for mobile drivers. 

4. Cost Monitoring and Vendor Performance

1. Features:

   1. Graphical representation of fuel efficiency and cost(cost by trip) trends.

   2. List and modal for Fuel and Maintenance Logs per vehicle.

   3. Filters to customize report views.

   4. Report generation (PDF/Excel export).

   5. Vendor performance dashboard (SLA compliance,trip completion rate).

   6. Design a vendor invoice  collection field.

2. Tasks:

   1. Design a visually engaging analytics page with graphs and data visualization.

   2. Ensure consistency in design elements such as buttons and icons.

   3. Maintain clarity in data representation for easy comprehension.

   4. Design interactive tables with filters(by vendor, vehicle, time period).

5. Additional Features

1. Consistency:  Maintain uniform design components across all pages.

2. Responsiveness:  Ensure mobile, tablet, and desktop compatibility.

3. Accessibility:  Follow WCAG guidelines for inclusive design.

Required Skills:

1. Proficiency in Figma for UI design and prototyping.

2. Strong understanding of UX/UI principles and accessibility standards.

3. Ability to design responsive and scalable components.

4. Experience in creating wireframes, mockups, and design systems.

5. Knowledge of color theory, typography, and modern design trends.

Design & Aesthetic Requirements:

1. Color Scheme:

   1. Primary color: #D50036 

   2. Secondary color: #C4C4C4

   3. Primary-green: #00B454

   4. Primary-yellow:#F39D1C

   5. Primary-gray:#4B5054

   6. Primary-black:#0F151F

   7. Primary-red:#E50303

   8. Background color: #F5F5F5 

   9. Text color: #000000, #D50036, #FFFFFF 

   10. Button color: #D50036

   11. Border color: #E5E5E5

   12. These color codes are the company’s brand colors and design guide

2. Fonts: Modern and clean font like Source Sans.

3. Spacing: Generous padding and margins for clarity.

4. Layout: Use auto-layout and grids for alignment and consistency.

Expectations:

1. Timely Completion: Complete the gig within the given timeframe. If not, the project may be reassigned.

2. Communication: Stay in touch with the Community Manager for feedback and support.

3. Work-Ethic Alignment: Adhere to company standards and best design practices.

Figma Link: 

• https://www.figma.com/design/z4bkELvf9Rntzx8W7xn1FL/Fleet-Management?node-id=0-1&m=dev&t=ffrM05QinKkKds4M-1