Gig  Overview: This project focuses on designing a modern, responsive, and visually appealing UI for a Strategy Management System using Figma. The UI will provide a seamless experience for users to manage strategic plans, track performance metrics, and collaborate on organizational goals. 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 it for your design.

Scope of Work:

1. Dashboard Design

Features:

-A visually appealing and data-driven dashboard layout.

-Sections for KPIs, strategic goals, and real-time progress tracking.

-Interactive charts and graphs to display analytics. (for example KPI by Department).

Tasks:

-Design a user-friendly dashboard layout in Figma.

-Use components and auto-layout for scalability.

-Ensure color contrast and typography enhance readability.

2. Strategic Goal Management Page

Features:

-Section for adding, viewing, and updating strategic goals.

-Drag-and-drop interface for organizing objectives.

-Status indicators (e.g., In Progress, Completed, Pending Review).

-A responsive table listing documents uploaded with a download button in the action column

-A button to submit documents , when clicked brings out a modal that has fields (Document Title , Document Type, Operation Month, Operation Year which are all dropdown fields and an upload field for documents)

Tasks:

-Design an intuitive workflow for managing strategic goals.

-Use consistent UI elements to enhance usability.

-Implement modals and dropdowns for smooth interactions.

3. Performance Metrics & Reporting Page

Features:

-Graphical representation of performance data.

-Downloadable reports in multiple formats.

-Filters to customize report views.

Tasks:

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

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

-Maintain clarity in data representation for easy comprehension.

4. Additional Features:

-Consistency:  Maintain uniform design components across all pages.

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

-Accessibility:  Follow WCAG guidelines for inclusive design.

Required Skills:

-Proficiency in Figma for UI design and prototyping.

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

-Ability to design responsive and scalable components.

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

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

Design & Aesthetic Requirements:

Color Scheme:

Primary color: #D50036 

Secondary color: #C4C4C4

Primary-green: #00B454

Primary-yellow:#F39D1C

Primary-gray:#4B5054

Primary-black:#0F151F

Primary-red:#E50303

Background color: #F5F5F5 

Text color: #000000, #D50036, #FFFFFF 

Button color: #D50036

Border color: #E5E5E5

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

-Fonts: Modern and clean font like Source Sans.

-Spacing: Generous padding and margins for clarity.

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

Expectations:

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

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

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

Figma Link: https://www.figma.com/design/SXNcZVUsD7dDZese0O2FgZ/Strategy-Management?node-id=0-1&m=dev&t=tV7P4qAKNofQgEPa-1