Gig  Overview:

This project focuses on designing a modern, responsive, and visually appealing UI for a Finance Obligation Vendor Management using Figma. The UI will provide a seamless experience for users to manage vendor payments, track vendor performance metrics, and process vendor payments. The design should align with best UX/UI practices, ensuring intuitive navigation, clean aesthetics, and accessibility. You have been provided with a figma design link below showing the companies sidebar and top navigation bar -please use this for consistency.

Scope of Work:

1. Vendor Management Table

   1. Features:

      1. Section for viewing  vendor data.

      2. Active Tab for Selected Vendors, Due Vendors, Paid Vendors Table.

      3. Drag-and-drop interface for organizing objectives.

      4. Status indicators (e.g., Selected, Overdue,Due, Pending Payment, Paid).

   2. Summary Cards at the top of each Table displaying (Total Vendors, Total Selected Vendors, Total Due Vendors, Total Paid Vendors)

   3.   A responsive table with pagination

   4. Single Detailed page for each vendor.

2.  Columns include:

   1. Vendor Name

   2. Product Name

   3. Amount

   4. Status

   5. Due Date Created

   6. Actions (with a "View" button to navigate to a single detailed page).

3. Tasks:

   1. Design a user-friendly finance obligation vendor management layout in Figma.

   2. Use components and auto-layout for scalability.

   3. Use tool-tips or placeholder text to assist users with unfamiliar terms.

   4. Drag-and-drop should provide visual feedback (e.g., highlight drop zones).

   5. Visual pleasing interface.

1. Performance /Trends Analysis:

1. Interactive Charts & Graphs:

i. Selected Vendor Trends Over Month (Line Chart) – Displays monthly selected vendors.

ii.Vendors by Due Date (Bar).

iii.Overdue Vendors by Money Range ( Stacked Bar Chart).

iv.Status-wise Vendor Distribution (Doughnut Chart) – Shows Paid, Overdue, Pending Payment.

v.Summary Cards

2. Real-time Updates: Charts dynamically adjust when filters are applied.

3. Hover Effects: Displays exact figures when hovering over data points.

4. Filters for Customized Report Views:

i.Date Range Picker (Daily, Weekly, Monthly, Quarterly, Yearly, Custom).

ii.Vendor Data Filter (Paid, Due, Selected, Completed).

iii.Status Filter (Completed, Paid, OverDue, Pending Payment).

iv.Search Functionality (Quickly find specific records).

2. Tasks:

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

   2. Summary cards displaying Total Money Paid, Total OverDue, Total Pending

   3. Primary charts (Trends, Breakdown) at the top.

   4. Secondary charts (Status-wise) below.

   5. Consistent colors for status and charts .

   6. Status indicators match the Vendor Management page.

   7. Filter Button (Funnel icon with dropdown).

   8. Download Button (Cloud download icon with format options).

   9. Refresh Button (Sync icon for real-time updates) and help text appears when hovering over icons/filters.

   10. Clear labels for charts, adjust for mobile & desktop views and avoid clutter; highlight key metrics.

1. Payment Schedule and Process Payment:

1. Section for payment scheduling and processing .

2. Active Tab for Payment Schedule and Payment Process.

3. Drag-and-drop interface for organizing objectives.

4. Design a payment schedule page that allows finance officers to schedule vendor payment with date ,time, product, vendor name, and payment details.

5. Design a processing page for finance officer’s to update scheduled vendor’s  payment that has been processed.

6. Summary Cards at the top of each page displaying (Total Scheduled Payment, Total Processed Payment, Total Payments).

3. 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/Eyo7gPdT7hDqM5urnBJ9pM/Finace-Obligaftion?node-id=0-1&m=dev&t=56l6QWdNBSAybSDu-1