Synergy - Campus Recruitment Web Application Design Challenge

Welcome to the  Synergy - Campus Recruitment Web Application Design Challenge. We recently completed wireframes for this challenge, now we are looking for your help to come up with designs based on the provided wireframes, using the required UI guidelines and branding.

About the Application:
As part of automation of Hiring Module for Campus Graduates, the change is to enable the entire process from end to end to automate the hiring for Engineering & Non engineering graduates in campus/colleges. By automation of the requirements - all the approvals are online and makes the overall process simple.

Very excited to see your designs for this challenge!

Round 1

Submit your initial design refinements for Checkpoint Feedback
A. Campus Placement Coordinator (CPC)
B. Location Campus Manager (LCM)

You must upload your submission to MarvelApp so we can provide direct feedback on your designs.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

Round 2

Your Final designs for all the required designs with all Checkpoint Feedback implemented.
A. Campus Placement Coordinator (CPC)
B. Location Campus Manager (LCM)
C. Candidate

You must upload your submission to MarvelApp, for the final submission - you can reuse the prototype that you shared for checkpoint
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)

For this challenge we are providing you the wireframes from the previous challenge which will act as a reference for the content and we are looking for your help to improve user experience wherever possible. It is also required that your designs align to the provided UI guidelines and branding.

Design Problem:
Current process of hiring Module for Campus Graduates requires lot of approvals and these offline transaction can be mitigated. Allocation of resources were not accurate and tracking becomes was not an easy job.

We also have an existing application which looks very complex in-terms of design as well as the functionality / overall flow of the application looks complicated. Through this challenge we are looking for your help to give us an design direction and most importantly help us improve the overall user experience and flow of entire application as you see fit.

Design Considerations:
- Clean and streamlined design and user flow
- Looking for a fresh user-experience!
- We have provided wireframes that were created in the previous challenge, use these as reference for content.
- Improve the overall user experience and flow of entire application as you see fit.
- You are free to suggest any feature that you think would help with the user experience.
- Design your screens focussing Desktop, so have the resolution as 1366px width and height as required.

Required Screens/ Functionality
We need below concepts in your designs, feel free to add any pages that you think is necessary to show the flow!

00 Login:
Reference: login.html
- All users will be required to login into their account
- To login they will enter their username and password
- What else do you think need to be shown in this page?
- Reset password option should be provided in the Login page

A. Campus Placement Coordinator (CPC)
02 College Registration:
Reference: college_register.html
- Will have ability to enter details about the college (add new college)
- Details that will be entered are “Type of College, Institute Name, Authorized Personnel, Address, State, City , contact information“
- Once all details Submit the Details about the college
- On Successful registration, we need to show the success message (please show success message along with reference number)
- This college that was registered will need to be approved by LCM (see below) after which CPC user will move onto the next step which involves entering detailed information about college in the empanelment form.

03 CPC User Landing Page / Dashboard
Reference: cpc_user.html > “1. Welcome for first login” (this link is available in the right side of the page)
- This is the landing page for the CPC user that shows welcome message and also includes the progress of the information completed by the user in empanelment form
- Feel free to come up with better ideas to show the progress completed in the form.

04 Dashboard:
Reference: cpc_user.html > “2. View normal homepage” (this link is available in the right side of the page)
- Follow the content as shown in the wireframe and we are looking for your thoughts on how to present it in a better way

05 Empanelment Form:
Reference: faculty_details.html, institue_profile.html, placement_details.html, quantitative_details.html, student_details.html
- This form includes the following sections “Institute profile, Quantitative Details, Faculty Details, Students details, Placement history”
- We need to show the progress across each sections
- Each of these sections will have specific details that need to be entered by the user, follow the wireframes
- Looking forward to your thoughts on how the progress in each of the sections can be shown / how will the user know the section they are entering details for, please look to improve the user experience wherever possible.

B. Location Campus Manager (LCM):
06 Dashboard:
Reference: lcm_user.html
- User will see the statistics, think on how to show them (please see wireframe for some ideas on what details to be shown).

College Approval / Rejection:
- Show list of colleges waiting for approval, how will the user approve / reject them!
- We need a way to show the college details, click on “College name” in wireframe to see a model window with the details.
- How will the user bulk approve or reject the list of colleges

Events:
- Show list of events that were already created and have options to edit them
- Once the event is completed, user will need a way to sign off the event.
- These events will have a status associated with them.
- Should have options to filter through the list, how this can be shown in your designs.
- Expanding an event some minimum details about the event, do you think there is a better way to show the details? Should have a link that takes them to a page with all details about the event.
- Provide a way to create a new event.

07 Event Details:
Reference: event_details.html
- User should be able to view all event details in this page
- Provide a way for the user to modify the event
- Include tooltip style incase if the user wants to see additional details about a field, please hover over the blue info icon in “Job Code” field to see which the tooltip content (note: we will be following the same style for all tooltips across the application).

08 Event Creation:
Reference: Create New Event - Step 1.html
- To create an event user will search and first see the list of MJC (job codes), from that they will be able to choose job code for which the event need to be created / provide option to filter this list.
- Once they select the college they will be able to proceed further.
- It’s good to show the progress of where the user is in the creation of an event.
- In all the steps, we need to make sure user has options to save the progress or cancel the event creation process and also should a way to navigate between steps (prev or next buttons)

Events Details:
Reference: Step 2 - Event Details.html
- User will be required to enter some details in the form
- User will choose whether the event is being created for single event of group event (in the wireframe, in field “Campus Type Event”, based on what you choose “single or group”.. The corresponding field changes)

Single Event
- You will need to create all the required form elements for the design (for ex: Date picker, drop-down styles, etc)
- How will user select multiple hiring domains?
- How will the user select or remove a CPM? please see the field “CPM select” under ‘Facilities Required’ section. For adding a CPM, user will search and view a list, from which they will select a CPM (Click on the “+” icon to see a modal window - please make sure to show this in your designs).

Group Event:
Reference: group_-_step_3_-select_colleges.html
- This is same as a single event, except that this will have an additional step after event details are entered / so this change should also reflect the overall progress / steps that’s being shown to users.
- In this additional step, user will be able to search and add college that will be participating in the event - please see the wireframes to get the idea.

Summary:
Reference: Single - Step 3 - Summary.html
- This shows the summary of the details entered in the previous steps.
- Please create two versions of this page (one for single event and another one for group event), so details will almost be the same..just that, group event summary will have the additional details of the colleges that can participate in the event.
- Provide option to edit each of the sections
- Show a “Create Event” button to proceed further.

09 View Registered Candidates / Initial Screening:
Reference: candidate.html
- User should be able to view all the registered candidates along with basic information like name, marks, event id, 10th , 12th, UG/ PG score, degree & branches, etc.
- User should be able to search through the list of candidates and should be able to filter based on various parameters like Graduation branch, year , score% etc (please make sure to think about user experience)
- LCM will decide the hiring workflow for toppers and non toppers. Ex : All topper candidates will directly goto written test and non toppers will go to group discussion if applicable.
- User will be able assign the status and batch for the candidates, provide way to bulk update assignment for candidates!

Group Discussions Candidates:
Reference: ready_for_group_discussion.html
- This shows the list of candidates who were shortlisted for the Group Discussions.
- If GD is applicable, group discussion batch assignment should be done automatically by the system (admin should be given an option to set the parameter for batch assignment).
- Boarding pass with a QR code should be generated for the toppers and non toppers and the info should be passed on to onboarding portal.

Written Test:
Reference: ready_for_written_test.html
- This shows the list of candidates who were shortlisted for the written test
- Same as other views, this needs to provide options to assign a status and also assign timings for Technical interview

Technical Interview:
Reference: technical_evaluation_process.html
- This shows the list of candidates who were shortlisted for the technical interview

HR Evaluation Process:
Reference: technical_evaluation_process.html
- This shows the list of candidates who were shortlisted for the HR Evaluation Process.

Trigger LOI:
Reference: loi.html
- User should be able to search candidates who cleared all rounds of interview by "event name, event id, event type, event from, to dates and reference no.
- Provide an option to preview the LOI before triggering or re-triggering the LOI to the candidates.
- From the list of the candidate's, user will be able to select the candidates to whom LOI should trigger and Click on “Send LOI” button.
- Once LOI is sent, they should be able to able to see the list of candidates to whom LOI is already sent.
- Also provide option to resend/re-trigger the LOI.

C. Candidate
10 Candidate Login:
Reference: candidate_user.html
- This is same as a normal login page used by other users but only difference is candidate should be able to log in via a social network ID or create a separate user ID and password on onboarding portal.
- If the user enters wrong username or password, show how the error screen will look like.
- Provide reset password option.

11 Candidate Onboarding Portal:
Reference: home.html
- This is the main landing page for the candidates
- Need to show the event the user has registered for and what is the progress in that particular event (please see wireframes for the steps involved), think on how to show this progress / also they should be able to
upload, continue with entering information in unified form, we will need a link/button to take them to the unified form to fill in their details.
- It will be good to show notifications on what the user needs to act upon or what they have to notice (for ex: Boarding Pass for Event has been generated, etc)
- User will be able to view videos and news that were published recently.

Candidate Application Manual (CAM):
- They should be able to UPDATE their resume at any time till they report for the campus interview.
- The basic candidate details should be parsed, extracted and auto populated in the registration form from candidate resume where possible automatically.
- Candidate should be able verify and edit (if required) the auto populated registration form details. Form filling progress should be saved automatically (like OneNote).
- He should also be able to fill in missing details and submit the form once finished. Without filling all the basic details he should not be able to submit the form.
- Candidates should be confirmed that their information has been successfully uploaded via portal, email & SMS.
- The candidate should be able to cancel and opt out of the recruitment process at any point of time.

12 Boarding Pass:
Reference: Boarding Pass.html
- Once the candidate send their details (CAM), and on approval, boarding pass will be generated (which they will be carrying to attend the event)
- Candidate should be able to view their boarding pass.

Below use-cases / functionalities are shown once the candidate has cleared the interview and on accepting LOI

13 Unified Form / Uploading of Docs:
Reference: Unifed Form.html
- Candidates who received the LOI (letter of intent) will be required to upload the docs for background verification (BGV).
- Users will be able to upload their docs and data are automatically captured in the unified form
- Candidate will be responsible for filling out any details that are missing.
- Users will be able to save the progress of their upload and send it at a later time.

14 Offer Acceptance / Rejection:
Reference: Offer Acceptance / reject.html
- User will be able to see their offer letter once the Background Verification (BGV) is completed, candidate should receive a notification once they receive the offer letter..on clicking the offer letter they see this view.
- Offer acceptance link should be enabled once candidate has received letter of Intent. Not after BGV
- They should be able to view, accept or reject the offer letter, wireframe doesn’t show how the offer is accepted or rejected..so please make sure your design shows this.
- In case of rejection, they will need to choose the reason for rejecting it and candidate would be dropped from the process.

15 Joining Location:
Reference: Join Location.html
- Joining information like DOJ, venue, contact person should be displayed on candidate portal
- The candidate should be able to select his seat based on his preference for location, DOJ, stream & BU.
- Candidate should be able to postpone DOJ to a later date. Candidate should also have an option to mark against a particular opening as favorite. System should notify the candidate when ever similar opening is
available and be given first priority.
- In case the candidate has selected a seat and later cancels, he should be asked for the reason.
- If the reason for cancellation is candidate is unable to join as per the seat selected, but he is still interested in joining the company; then his reservation should be cancelled & he should be added to the last batch pool which should be allowed the last for reservation.

16 Candidate Feedback:
Reference: Feedback.html
- Candidate should be able to provide feedback for the event they attended
- Think on how to design this page / keep it simple.

17 Candidate Helpdesk:
Reference: Helpdesk.html
- Throughout the process, the candidate should be able to raise a helpline request in case he needs help.
- Please see wireframes for the details to be captured here
- Think around the layout, user experience on how to show the tickets that were already sent to support..wireframe shows these in the right side of the form..which doesn’t look like a good way to show them.
- Provide BGV (background check) Clarification and Audit clarification link should be enabled to the candidate.

Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into the solving the problem
- Overall design and user experience
- Cleanliness of screen design and user flow

Target Audience 
- University / College Admin, prospective students, HR

Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file or Sketch!

Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.