HR AI-Powered Platform Frontend Mock
Budget: €300 – €600 EUR
Project Overview
We need a non-functional UI prototype for an AI-powered HR platform that helps manage absenteeism, leave requests, and burnout detection. The prototype should be visually appealing, interactive (clickable), and closely follow the Terap.me branding and UX style.
Scope of Work
The developer/designer will create three primary UI screens:
HR Dashboard (Main Analytics & Insights)
AI-Powered Chatbot Interface (Employee Self-Service)
Reports & Analytics Page (Absenteeism & Burnout Trends)
The prototype should be created using Figma (preferred for UI design) or Webflow (for a low-code interactive version). It must be fully responsive and optimized for both desktop and mobile views.
1. HR Dashboard (Analytics & Insights)
Description:
Displays key HR metrics including:
Predicted Absenteeism Rate (progress bar, percentage-based)
Burnout Risk Levels (heatmap or risk scoring system)
Pending Leave Requests (list view, with status labels)
Total Absences (historical data trends in a graph)
Navigation Menu: Links to Chatbot & Reports
Actionable Alerts: Notify HR about high-risk absenteeism cases
Branding: Soft blue and white tones, consistent with Terap’s design style
Components:
Graphical Elements:
Line charts for absenteeism trends
Progress bars for risk indicators
Cards: Interactive summary cards for leave approvals & alerts
Buttons: "View Details," "Approve Leave," "Generate Report"
2. AI-Powered Chatbot Interface (Employee Self-Service)
Description:
Simulates an HR chatbot for employees to request leave, check absence policies, or inquire about wellness programs.
Includes a message-based UI, similar to a modern chatbot (WhatsApp-style chat bubbles).
The chatbot should display pre-defined conversation flows:
"Request Sick Leave"
"Check My Leave Balance"
"How Do I Apply for Medical Leave?"
Employees input responses via a text field with a “Send” button.
AI Avatar or Icon to indicate chatbot presence.
Components:
Chat Bubbles:
User messages (green, right-aligned)
Chatbot messages (blue, left-aligned)
Input Field: Placeholder text "Type a message…"
Quick Reply Buttons: Suggested actions below the chat (e.g., "Apply Leave")
Loading Animation: Chatbot "typing" effect simulation
3. Reports & Analytics Page (Absenteeism & Burnout Trends)
Description:
Displays detailed reports on absenteeism trends and burnout risk factors.
Uses interactive visualizations to highlight workforce well-being.
Should include filters for HR to customize reports (by department, role, timeframe).
Components:
Graphical Data Visualizations:
Pie chart (Absenteeism Breakdown by Department)
Bar chart (Burnout Risk Over Time)
Heatmap (High-Risk Departments)
Export Button: "Download Report as PDF"
Dropdown Filters: "Select Date Range," "Department Filter"
Design & Branding Guidelines
✅ Minimalist, modern UI inspired by Terap.me
✅ Soft color palette: Light blue, white, subtle greys
✅ Rounded buttons and smooth animations for a modern feel
✅ Google Material Design principles for intuitive navigation
✅ Responsive layout (must work on desktop & mobile)
Deliverables
? Figma Prototype (if using Figma) – with interactive clickflows.
? Webflow Hosted Preview (if using Webflow) – to simulate real UI.
? Exported Screenshots for reference in development.
? Design System Documentation (Typography, Colors, Components).
Expected Timeline & Budget
⏳ Timeline: 1 week max.
? Budget: $300 - $600 (depending on interactivity & animations)
We need a non-functional UI prototype for an AI-powered HR platform that helps manage absenteeism, leave requests, and burnout detection. The prototype should be visually appealing, interactive (clickable), and closely follow the Terap.me branding and UX style.
Scope of Work
The developer/designer will create three primary UI screens:
HR Dashboard (Main Analytics & Insights)
AI-Powered Chatbot Interface (Employee Self-Service)
Reports & Analytics Page (Absenteeism & Burnout Trends)
The prototype should be created using Figma (preferred for UI design) or Webflow (for a low-code interactive version). It must be fully responsive and optimized for both desktop and mobile views.
1. HR Dashboard (Analytics & Insights)
Description:
Displays key HR metrics including:
Predicted Absenteeism Rate (progress bar, percentage-based)
Burnout Risk Levels (heatmap or risk scoring system)
Pending Leave Requests (list view, with status labels)
Total Absences (historical data trends in a graph)
Navigation Menu: Links to Chatbot & Reports
Actionable Alerts: Notify HR about high-risk absenteeism cases
Branding: Soft blue and white tones, consistent with Terap’s design style
Components:
Graphical Elements:
Line charts for absenteeism trends
Progress bars for risk indicators
Cards: Interactive summary cards for leave approvals & alerts
Buttons: "View Details," "Approve Leave," "Generate Report"
2. AI-Powered Chatbot Interface (Employee Self-Service)
Description:
Simulates an HR chatbot for employees to request leave, check absence policies, or inquire about wellness programs.
Includes a message-based UI, similar to a modern chatbot (WhatsApp-style chat bubbles).
The chatbot should display pre-defined conversation flows:
"Request Sick Leave"
"Check My Leave Balance"
"How Do I Apply for Medical Leave?"
Employees input responses via a text field with a “Send” button.
AI Avatar or Icon to indicate chatbot presence.
Components:
Chat Bubbles:
User messages (green, right-aligned)
Chatbot messages (blue, left-aligned)
Input Field: Placeholder text "Type a message…"
Quick Reply Buttons: Suggested actions below the chat (e.g., "Apply Leave")
Loading Animation: Chatbot "typing" effect simulation
3. Reports & Analytics Page (Absenteeism & Burnout Trends)
Description:
Displays detailed reports on absenteeism trends and burnout risk factors.
Uses interactive visualizations to highlight workforce well-being.
Should include filters for HR to customize reports (by department, role, timeframe).
Components:
Graphical Data Visualizations:
Pie chart (Absenteeism Breakdown by Department)
Bar chart (Burnout Risk Over Time)
Heatmap (High-Risk Departments)
Export Button: "Download Report as PDF"
Dropdown Filters: "Select Date Range," "Department Filter"
Design & Branding Guidelines
✅ Minimalist, modern UI inspired by Terap.me
✅ Soft color palette: Light blue, white, subtle greys
✅ Rounded buttons and smooth animations for a modern feel
✅ Google Material Design principles for intuitive navigation
✅ Responsive layout (must work on desktop & mobile)
Deliverables
? Figma Prototype (if using Figma) – with interactive clickflows.
? Webflow Hosted Preview (if using Webflow) – to simulate real UI.
? Exported Screenshots for reference in development.
? Design System Documentation (Typography, Colors, Components).
Expected Timeline & Budget
⏳ Timeline: 1 week max.
? Budget: $300 - $600 (depending on interactivity & animations)