Challenge Overview
Welcome to “Onsite Interviews Panel UI Prototype Challenge Part 2”. On this challenge we are looking to complete the front end coding of this responsive application, using desktop and mobile phone as target devices. Your final deliverable must be HTML files.
You will be working using the winning source code from previous challenge. It can be download from “Documents” thread on this challenge’s forum.
For now you can take a look here:
https://onsite-interviews.herokuapp.com/
Registration will be open until the end of submission phase.
We already completed the full UI Prototype for an upcoming application, but we need to create a simulated real scenario for demo purposes. On this challenge we are focusing on creating the use cases for two main users (A) for Recruiters and (B) Panelists.
Required Tasks
A) Recruiters Workflow
1) Clean all the mockups texts from the tables on the following screens:
Dashboard
- https://onsite-interviews.herokuapp.com/dashboard.html
Feedback
- https://onsite-interviews.herokuapp.com/feedback.html
Forms
- https://onsite-interviews.herokuapp.com/form.html
With tables we mean the one that looks like this: take.ms/eSwRk
2) Create Form
- There is not storyboard created for this screen, but basically it will look like this screen:
https://onsite-interviews.herokuapp.com/edit-form.html
- Will be accessed by clicking on this button: take.ms/QjjMP
From this screen: https://onsite-interviews.herokuapp.com/form.html
Considerations for this screen (Important):
- Please refer to this: take.ms/MrhBi
1) “Job code” is an input field, leave the number how it is now.
2) “Department” is a dropdown. Add “Select” as an option and make it default
3) Remove “Delete” and “Send To” buttons
4) “Technical, Candidate Highlights, Deliver Results… etc” will work as tabs. User can change to next section by clicking on any tab or “Next” button. Thise “next” and “back” buttons/functions are implemented here:
https://onsite-interviews.herokuapp.com/interview-form.html
5) 4 Questions must be input fields.
6) Clicking on “+ Add question” will create a new input field below last one with placeholder “Type your question here”.
7) User must be able to delete the questions as well.
8) On last step, “Lead & Influence Other” button should be “Save” and clicking on save should show a modal confirmation view as the same one provided here:
https://onsite-interviews.herokuapp.com/interview-form.html
9) Confirmation modal text should say “Interview form created successfully”
Finally, when created a form, should be able to appear on the table “Form” (previously empty) from this screen https://onsite-interviews.herokuapp.com/form.html
2) Create New Modal Screen
- On form screen
We need to create the modal views that will be launched when the “Send to” button is clicked: take.ms/MDHOZ
Storyboard and PSD are provided in forum.
Considerations (Important): http://take.ms/aEoXY
Basically the behavior and final look is very similar to the one on this screen:
https://onsite-interviews.herokuapp.com/panelists.html (click on same button).
Search feature is not required for this challenge.
3) Sending the form to Panelist
- Once the form is created, user must be able to send it to a Panelist by clicking on “Send to” button previously mentioned on “2) Create New Modal Screen”.
- User click on a Panelist and then click send
http://take.ms/wwlAx
When clicking on “Send” a confirmation message should be shown. There is one already coded on panelist section: take.ms/FbOLe
B) Panelists Workflow
Panelist is the user who actually do the interview. You will be working using the following screen: https://onsite-interviews.herokuapp.com/interview-form.html
Considerations for this screen (Important):
Please refer to: take.ms/8SjXs
1) All tabs (circles with icons) should start with inactive class (black), but not the first one “Technical”.
2) Once user select the answer and click “Next” a class “active” is added to the next tab.
3) You might notice that there is an Average Rating number on yellow tag. For now just show 5 o all, once the active class is added. Is not on the scope of this challenge to calculate that rating.
4) Once the user “submit” that form, it should be able to be seen on “Recruiters Workflow Dashboard” (Previously empty):
https://onsite-interviews.herokuapp.com/dashboard.html
Things to consider
- You are free to use any open source framework or technology that allow you to achieve the expected solution.
- We invite you to use Angular, however is not mandatory to use it.
- If you consider any other solution like using browsers cache, jquery or javascript; it will be also accepted.
- The goal on this challenge is to deliver the simulated scenario.
- You don’t need to focus on fixing or changing anything from current layout, only the requested and specified tasks.
- All other pages already coded and not mentioned on this challenge, like "login" page for example, must be in your final submission. We need to simulate a real escenario on a demo.
Target Devices
- Desktop and Phone only
Javascript Requirements
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Browser Requirements
- Desktop: Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows). IE11+ is not mandatory for this challenge.
- Mobile: Chrome / Safari for mobile browser
You will be working using the winning source code from previous challenge. It can be download from “Documents” thread on this challenge’s forum.
For now you can take a look here:
https://onsite-interviews.herokuapp.com/
Registration will be open until the end of submission phase.
Final Submission Guidelines
BackgroundWe already completed the full UI Prototype for an upcoming application, but we need to create a simulated real scenario for demo purposes. On this challenge we are focusing on creating the use cases for two main users (A) for Recruiters and (B) Panelists.
Required Tasks
A) Recruiters Workflow
1) Clean all the mockups texts from the tables on the following screens:
Dashboard
- https://onsite-interviews.herokuapp.com/dashboard.html
Feedback
- https://onsite-interviews.herokuapp.com/feedback.html
Forms
- https://onsite-interviews.herokuapp.com/form.html
With tables we mean the one that looks like this: take.ms/eSwRk
2) Create Form
- There is not storyboard created for this screen, but basically it will look like this screen:
https://onsite-interviews.herokuapp.com/edit-form.html
- Will be accessed by clicking on this button: take.ms/QjjMP
From this screen: https://onsite-interviews.herokuapp.com/form.html
Considerations for this screen (Important):
- Please refer to this: take.ms/MrhBi
1) “Job code” is an input field, leave the number how it is now.
2) “Department” is a dropdown. Add “Select” as an option and make it default
3) Remove “Delete” and “Send To” buttons
4) “Technical, Candidate Highlights, Deliver Results… etc” will work as tabs. User can change to next section by clicking on any tab or “Next” button. Thise “next” and “back” buttons/functions are implemented here:
https://onsite-interviews.herokuapp.com/interview-form.html
5) 4 Questions must be input fields.
6) Clicking on “+ Add question” will create a new input field below last one with placeholder “Type your question here”.
7) User must be able to delete the questions as well.
8) On last step, “Lead & Influence Other” button should be “Save” and clicking on save should show a modal confirmation view as the same one provided here:
https://onsite-interviews.herokuapp.com/interview-form.html
9) Confirmation modal text should say “Interview form created successfully”
Finally, when created a form, should be able to appear on the table “Form” (previously empty) from this screen https://onsite-interviews.herokuapp.com/form.html
2) Create New Modal Screen
- On form screen
We need to create the modal views that will be launched when the “Send to” button is clicked: take.ms/MDHOZ
Storyboard and PSD are provided in forum.
Considerations (Important): http://take.ms/aEoXY
Basically the behavior and final look is very similar to the one on this screen:
https://onsite-interviews.herokuapp.com/panelists.html (click on same button).
Search feature is not required for this challenge.
3) Sending the form to Panelist
- Once the form is created, user must be able to send it to a Panelist by clicking on “Send to” button previously mentioned on “2) Create New Modal Screen”.
- User click on a Panelist and then click send
http://take.ms/wwlAx
When clicking on “Send” a confirmation message should be shown. There is one already coded on panelist section: take.ms/FbOLe
B) Panelists Workflow
Panelist is the user who actually do the interview. You will be working using the following screen: https://onsite-interviews.herokuapp.com/interview-form.html
Considerations for this screen (Important):
Please refer to: take.ms/8SjXs
1) All tabs (circles with icons) should start with inactive class (black), but not the first one “Technical”.
2) Once user select the answer and click “Next” a class “active” is added to the next tab.
3) You might notice that there is an Average Rating number on yellow tag. For now just show 5 o all, once the active class is added. Is not on the scope of this challenge to calculate that rating.
4) Once the user “submit” that form, it should be able to be seen on “Recruiters Workflow Dashboard” (Previously empty):
https://onsite-interviews.herokuapp.com/dashboard.html
Things to consider
- You are free to use any open source framework or technology that allow you to achieve the expected solution.
- We invite you to use Angular, however is not mandatory to use it.
- If you consider any other solution like using browsers cache, jquery or javascript; it will be also accepted.
- The goal on this challenge is to deliver the simulated scenario.
- You don’t need to focus on fixing or changing anything from current layout, only the requested and specified tasks.
- All other pages already coded and not mentioned on this challenge, like "login" page for example, must be in your final submission. We need to simulate a real escenario on a demo.
Target Devices
- Desktop and Phone only
Javascript Requirements
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Browser Requirements
- Desktop: Latest Firefox, Latest Safari & Chrome Browsers (Mac & Windows). IE11+ is not mandatory for this challenge.
- Mobile: Chrome / Safari for mobile browser