Job Ads Portal Design

[kylecdrck]

As a

UI/UX Dev

I want to

Create a web portal design

In order to

To provide UI/UX plans for the PPH Job Ads Portal

---

Acceptance Criteria

• [ ] UI/UX Dev team must create a design document for the UI/UX plans for the PPH Job Ads portal
• [ ] The design draft must include all necessary flows that show all validation messages, errors, and success states
• [ ] Use a Professional-feeling color palette and design.

Notes

• Inform POs if you need certain accounts for drafting. As much as possible let's use free ones.

[ghost]

https://www.figma.com/team_invite/redeem/cCbLn4oQX3KgCCt7AKAMUt

link to figma design

[Gerv-G]

Common Job Ad form fields

Note

• This is a non-exhaustive list. You can take some liberties with the design. Just keep in mind that simplicity is still our objective (e.g. leave out some fields that you feel aren't important). When in doubt, post a question in our Discord channel.
• Fields in bold and marked with asterisks (*) should be required

• **Job Title***
• Posting date (auto-generated)
• Closing date - until what date the position is available
• **Employer / Company name***
• **Work type*** (dropdown)
  • Casual
  • Contractual
  • Part-time
  • Full time
• **Location***
  • WFH (if checked, disable the free text field
  • free text (stretch goal: autocomplete location)
• **Salary range (in PHP)***
  • Minimum*
  • Maximum
• **Job Description*** (text area; stretch goal: markdown support / rich text area)
• External URL (e.g. to company website, LinkedIn, or other job boards)

[Gerv-G]

A few options for WSIWYG editors

• https://tiptap.dev/
• https://lexical.dev/
• https://www.tiny.cloud/

But if we don't have the luxury of time, we could just stick with a simple text area for the first iteration

[LueKely]

RE: Job Ads Portal Design

Good day, me and @Jiseeeh finished a current Mockup of the Job Ads Portal Design. We focused more on the form first and we'd like to get some feedback. We tried our best to stay close to the designed wireframe by the other members. Colors are not final.

Thank you.

[kylecdrck]

@LueKely for the job details, I think it will be good to mark the required fields with an asterisk or any marker to indicate that those fields are required.

For the Post button, rename it to "Submit Job Ad" and add a space before the submit button that will allow insertion of a CAPTCHA component to prevent spams