Creative UI/UX Design for managing candidate information, leveraging the HeroUI library's design principles.
Budget: ₹600 – ₹1,500 INR
Tool: Figma or Penpot or Any other relevant tool
Target User: Recruiters, hiring managers, and team members involved in the hiring process.
Overall Style: Adhere to the HeroUI design language, which emphasizes a clean, modern, and
accessible aesthetic. Utilize HeroUI's styling and theming to maintain consistency and a unified
look. It is supposed to be a drawer component so make the design with a temporary
background, and make the drawer take 50% of screen width. Also design both Dark and Light
mode if possible.
Sections & Functionality:
Profile Section:
● Purpose: Display detailed information about a candidate.
● Functionality:
○ Showcase the candidate's basic information (name, contact details, location)
prominently.
○ Present the candidate's education history in a clear and organized manner.
○ Display the candidate's projects, including relevant details and links.
○ Represent the candidate's skills.
○ Show the candidate's professional experience, highlighting roles and
responsibilities.
Conversation Section:
● Purpose: Enable real-time communication with candidates.
● Functionality:
○ Display a message history area with clear timestamps and sender information.
○ Provide a space for users to input and send messages to the candidate.
● Timeline Section:
● Purpose: Visualize the candidate's progression through the hiring process.
● Functionality:
○ Present a chronological sequence of status changes, such as "Applied,"
"Screening," "Interview," and "Offer."
○ Display the date and time for each status change.
○ Provide context or description for each stage in the process.
● Tasks Section:
● Purpose: Manage to-dos and reminders related to a candidate.
● Functionality:
○ Display a list of tasks for that candidate assigned to multiple users.
○ Allow users to see due dates and assignee information for each task.
○ Provide interaction for managing and completing tasks.
Design Task Deliverables:
● Figma/Penpot File: A fully designed interface showcasing the 4 sections described
above, using HeroUI principles to build the UI components.
Specific Instructions:
● Utilize HeroUI's Styling: Adhere to the HeroUI design language, pay attention to
spacing, typography, color palette, and overall style. Use their theme configuration to
maintain consistency throughout the design.
● Be Responsive: While not a primary focus, consider how your layout would adjust to
different screen sizes.
● Focus on Usability: Design for a smooth, intuitive user experience.
● Add Some Real Data: Don't just use placeholder text; insert some real-world examples
to bring your design to life.
● Component Choice: Select appropriate HeroUI components that fit the design you
intend to use, and use them to implement the sections above.
Figma UI Kit: HeroUI Figma Kit (Community) | Figma
Target User: Recruiters, hiring managers, and team members involved in the hiring process.
Overall Style: Adhere to the HeroUI design language, which emphasizes a clean, modern, and
accessible aesthetic. Utilize HeroUI's styling and theming to maintain consistency and a unified
look. It is supposed to be a drawer component so make the design with a temporary
background, and make the drawer take 50% of screen width. Also design both Dark and Light
mode if possible.
Sections & Functionality:
Profile Section:
● Purpose: Display detailed information about a candidate.
● Functionality:
○ Showcase the candidate's basic information (name, contact details, location)
prominently.
○ Present the candidate's education history in a clear and organized manner.
○ Display the candidate's projects, including relevant details and links.
○ Represent the candidate's skills.
○ Show the candidate's professional experience, highlighting roles and
responsibilities.
Conversation Section:
● Purpose: Enable real-time communication with candidates.
● Functionality:
○ Display a message history area with clear timestamps and sender information.
○ Provide a space for users to input and send messages to the candidate.
● Timeline Section:
● Purpose: Visualize the candidate's progression through the hiring process.
● Functionality:
○ Present a chronological sequence of status changes, such as "Applied,"
"Screening," "Interview," and "Offer."
○ Display the date and time for each status change.
○ Provide context or description for each stage in the process.
● Tasks Section:
● Purpose: Manage to-dos and reminders related to a candidate.
● Functionality:
○ Display a list of tasks for that candidate assigned to multiple users.
○ Allow users to see due dates and assignee information for each task.
○ Provide interaction for managing and completing tasks.
Design Task Deliverables:
● Figma/Penpot File: A fully designed interface showcasing the 4 sections described
above, using HeroUI principles to build the UI components.
Specific Instructions:
● Utilize HeroUI's Styling: Adhere to the HeroUI design language, pay attention to
spacing, typography, color palette, and overall style. Use their theme configuration to
maintain consistency throughout the design.
● Be Responsive: While not a primary focus, consider how your layout would adjust to
different screen sizes.
● Focus on Usability: Design for a smooth, intuitive user experience.
● Add Some Real Data: Don't just use placeholder text; insert some real-world examples
to bring your design to life.
● Component Choice: Select appropriate HeroUI components that fit the design you
intend to use, and use them to implement the sections above.
Figma UI Kit: HeroUI Figma Kit (Community) | Figma