Gig Overview:

This project involves designing a modern, responsive, and user-friendly UI for a Vendor Management System (VMS) using Figma. The system will streamline vendor onboarding, bidding, performance tracking, and communication, ensuring seamless integration with procurement workflows. The design must align with best UX/UI practices, ensuring intuitive navigation, accessibility, and a clean aesthetic.

A Figma design link has been provided (reference below) containing the company’s sidebar and top navigation bar—please use this for consistency.

Scope of Work:

1. Dashboard Design

Features:

1. Overview of active vendors, pending approvals, and performance alerts.
2. KPI cards (delivery timelines, quality ratings, response times).
3. Interactive charts for vendor performance trends.
4. Quick actions: "View Orders" "View Alerts."

Tasks:

1. Design a data-driven dashboard with a clear visual hierarchy.
2. Use auto-layout and components for scalability.
3. Ensure color-coded alerts (e.g., red for SLA breaches).

2. Vendor Bidding and Purchase Order

Features:

1. Active tab for Bidding/Selection and Purchase Order.
2. When Bidding/Selection is clicked, a table displaying a list of approved vendor’s bidding  from bid evaluations.
3. Bid submission portal for vendors. (Add Product form with upload field to upload Product, Product Availability, Delivery Timeline, Stock,  Payment Type, Payment Category and Payment Duration are dropdowns), NOTE: if payment time is Installments there will be another dropdown for Advance payment that comes with a Payment schedule button to click and input percentage else submit.
4. When Purchase Order is clicked, a table displaying a list of purchase other history with column -(Item, Purchase Order, Date, Status , Amount, Date, Payment Duration, Due Delivery Date, Due Payment Date, Payment Plan(there’s a view payment plan link with a modal inthe row), the Action(that has two buttons a Accept PO and Reject PO button.) when the button is clicked there should be a confirmation modal.

Tasks:

1. Design a responsive table with sort/filter and search options.
2. Create a bid submission form with file upload.
3. Implement modals for smooth interactions.
4. Status indicator with their various colors.
5. A visually responsive pagination.

3. Vendor Performance Management

Features:

1. Real-time KPI tracking (delivery, quality, responsiveness).
2. Alerts for SLA breaches (e.g., late deliveries).
3. Historical performance reports (charts, exportable data).

Tasks:

1. Design a performance dashboard with drill-down details.
2. Use badges/color coding for status (Green = Good, Red = Poor).
3. Include trend analysis graphs (e.g., monthly performance).

4. Communication & Collaboration Hub

Features:

1. Secure messaging between vendors and procurement teams.
2. Automated notifications (order updates, payment status).

Tasks:

1. Design a chat-like interface with timestamps.
2. Implement file-sharing functionality (e.g., delivery receipts).
3. Include notification badges for unread messages.

5. Audit & Reporting

Features:

1. Log of the vendor’s interactions (messages, orders, changes).
2. Exportable reports (PDF, CSV) for compliance.
3. Vendor scorecards for contract renewal decisions.

Tasks:

1. Design a searchable audit log with filters.
2. Create pre-built report templates (e.g., "Quarterly Vendor Review").
3. Ensure print-friendly formatting.

6. Profile Settings:

1. Account Setting : Details of Bank details and a button for Bank Information creation form (Bank Name, Bank Branch, Account Name, Account Number), for new vendors which is updated in the Account/Bank Details page.
2. Vendor Profile Details (with a picture field to upload logo).
3. Delivery Notes ( an invoice-like delivery notes entry for delivery note submissions with PO matching) there should be a submit button. Use this as sample https://mdprintshop.co.uk/products/delivery-note-ncr-pads-custom-printing-free-delivery-note-templates-uk
4. Invoice ( an invoice entry for invoice submissions) there should be a submit button.Sample  https://www.google.com/search?q=invoice&client=firefox-b-d&sca_esv=bf2c799dee4adccd&udm=2&biw=1265&bih=578&sxsrf=AHTn8zrvZfhhwKlzfoSA_avrdbmnbYWwgg1746608649500&ei=CSIbaOWnHrzPhbIP3b-s4Ak&oq=inv&gs_lp=EgNpbWciA2ludioCCAAyDRAAGIAEGLEDGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyChAAGIAEGEMYigUyDRAAGIAEGLEDGEMYigUyDRAAGIAEGLEDGEMYigUyChAAGIAEGEMYigUyCBAAGIAEGLEDMggQABiABBixA0iYJlDBBljtEnABeACQAQCYAY8CoAH5BaoBAzItM7gBAcgBAPgBAZgCBKACpwbCAgcQIxgnGMkCwgIGEAAYBxgewgIFEAAYgATCAg4QABiABBixAxiDARiKBcICCxAAGIAEGLEDGIMBmAMAiAYBkgcFMS4wLjOgB64QsgcDMi0zuAeXBg&sclient=img#vhid=dCu3zrDkeA4KDM&vssid=mosaic
5. Logout

7. Admin Dashboard:

  Features:

1. An Active Tab below summary cards  with All Vendors, Selected Vendors, Scheduled Vendors.
2. Summary Cards for All Vendors, Selected Vendors and Scheduled Vendors.
3. Each tab should have a tabular list with status indicators and action column to view a single vendor detailed page.
4. A filter/sort and  search fields for filtering and search for data on the table.
5. A well structured and nice pagination.

Task:

1. Design a Responsive table with a list of data and sort/filter and search options.
2. Use consistent UI elements to enhance usability.
3. Use components and auto-layout for scalability.
4. Use tooltips or placeholder text to assist users with unfamiliar terms.

8. Admin Notifications

  Features:

1. Admin should receive notification when the vendor accepts or rejects PO.
2. When the vendor sends a message.
3. When the vendor sends good delivery notes and invoices.

Task:

1. Design a user friendly notification feature that carries out the above features.
2. Responsive Design allows deleting on pinning notifications received.

9. Admin Good Received Notes and  Invoice

 Features:

1. A list of  good delivery notes and invoices with names of vendors that send it. 
2. An interface to view and save good received notes and invoices. 
3. A button to send good received notes using the same format as the good delivery notes sent by the vendor.

 Task:

1. Design a Responsive table with a list of data and sort/filter and search options with pagination.
2. Use consistent UI elements to enhance usability.
3. Use components and auto-layout for scalability.
4. A reusable button component.

10. Admin Communication Feature:

Features:

1. Secure messaging between admin and vendors.
2. Automated notifications (order updates, payment status).

Tasks:

1. Design a chat-like interface with timestamps.
2. Implement file-sharing functionality (e.g., delivery receipts).
3. Include notification badges for unread messages.

11. Admin Vendor Performance Management:

  Features:

1. Real-time KPI tracking (delivery, quality, responsiveness).
2. Alerts for SLA breaches (e.g., late deliveries).
3. Historical performance reports (charts, exportable data).

1. Vendor scorecards for contract renewal decisions.

Tasks:

1. Design a performance dashboard with drill-down details.
2. Use badges/color coding for status (Green = Good, Red = Poor).
3. Include trend analysis graphs (e.g., monthly performance).
4. Design a vendor detailed performance page for the admin.

Additional Features:

• Consistency: Reuse UI components (buttons, modals, tables).
• Responsiveness: Optimize for mobile, tablet, and desktop.
• Accessibility: Follow WCAG guidelines (keyboard nav, screen reader support).

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/SXNcZVUsD7dDZese0O2FgZ/Vendor-Mangement?node-id=1-155&m=dev&t=g7Ojh41Xo3qO9fX1-1