Challenge Summary
Welcome to “Onsite Panel interviews Responsive Application UI Design Challenge”. In this challenge we are looking for you to create the initial design concepts for a modern and intuitive web application that will provide an interview guide onsite/panel interviews.
We need you to provide a responsive design that works on Desktop and Mobile devices. Think mobile first when designing it.
Let us know if you have any questions
Submit your initial designs for a checkpoint feedback:
1) Login (Desktop)
2) Home / Landing (Desktop)
3) Interview Form (Desktop)
4) Feedbacks Page (Desktop)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Submit your Final designs:
1) Login (Desktop/Mobile)
2) Home / Landing (Desktop/Mobile)
3) Interview Form (Desktop/Mobile)
4) Feedbacks Page (Desktop/Mobile)
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Information
A global sports brand is looking to design a modern and intuitive responsive application that will help interviewers interview candidates. The main purpose of this application will be to help interviewers search, find and interviews candidates to join the company. The Interview guide will be mobile and desktop enabled for less paper waste, candidate confidentiality, and heightened hiring manager experience.
Each time the company plans to hire a new technical resource, they setup a panel for interview. This includes the hiring manager (to whom new recruit will report) and 3-4 panelists, who interview the resource. Interview comments are captured on notepad / diaries and then shared as summary with the hiring team.
This process is very cumbersome, prone to errors and subjective feedback. It also opens up the company for legal implications, in case the feedback was not captured correctly on a paper or is lost.
In addition, the application will provide the following benefits / ROI:
- Secure form of candidate feedback.
- No paper waste.
- Secure more offer acceptances
- Uniform candidate rating system.
- Objective candidate feedback.
- Quicker candidate feedback.
Use Case
- Hiring team opens a job code and then shares an online form with the hiring manager.
- Hiring manager then sends this form to 3-4 panelists for interview.
- Each form is for a specific job code and includes questions which are picked from a dropdown (Hiring manager picks a competency for the resource in the form and that triggers a set of questions to pop-up in the form, which panelists must ask).
- Each panelists interviews the resource, fills the feedback in the online form and presses submit in the web app.
- This triggers an email to the hiring manager and hiring team with the filled feedback form as attachment. (Email trigger is based on how was the hiring manager and the hiring team, which in turn maps to the job code for a position).
- Hiring team then takes all the forms for a resource and consolidates the feedback offline.
Things to think about
- This challenge is focused only on Interviewers (Hiring teams and hiring managers) functionalities. Not the candidates.
- We will be running an UI Prototype challenge after this one. Have in mind that this application will be developed using Bootstrap 4. So consider all their rules and guidelines when designing. Important.
- This web application must feel clean, modern and easy to use.
- A user needs to be able to easily find any information.
- While this is going to be used mainly on desktop computers we want to explore concepts on Mobile (Phone). Think mobile first! Everything you do must work well on phones.
Required Screens
1) Login (Desktop/Mobile)
- In order to use this application users must be able to register and login to access all features.
- Provide the design for both cases:
Login
- Email
- Password
- Remember Me / Forgot Password features
2) Home / Landing (Desktop/Mobile)
- After a successful login, users will get into a landing page that serves as a dashboard and launchpad for all necessary functionalities, such like:
- - Main Navigation: What menu items make sense?
- - Job Code Search / Filter / Results
- - Latest Feedbacks
- - Top rated candidates
- - What other features are important to have on this screen?
3) Interview Form (Desktop/Mobile) (Key screen)
This is the form that will shared online with the hiring managers.
We need you to propose the best user experience on how this forms should be accessed, edited and shared:
This interview forms will have the following questions categories:
3.1) Technical
3.2) Candidate highlight
3.3) Deliver results
3.4) Create the future
3.5 Champion & embrace change
3.6) Lead & influence others
Consider that each category might have from 1 to 5 questions. So how this workflow should be presented to users: different pages?, steps wizard style?, accordion style? Is up to you to propose the best solution for this problem.
Have in mind that this form will be shared as an external link outside the application itself. So what elements makes more sense to have on overall layout?
See sample questions on these files.
4) Feedbacks Page (Desktop/Mobile)
- After a hiring manager submit the form, the hiring manager will get the form on email as attachment.
- But sometimes email can fail, due to overdue tasks and network issues. We need a way to archive all the feedbacks within the application itself.
- So think on how this information should look.
- Advance search and filter functionalities
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use their current branding and web colors.
- Please use the provided fonts on the Invision Board.
- For logo use a placeholder. Do not invest time designing a logo.
- Focus on the user experience.
- Think mobile first.
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding
- You can find all necessary branding assets on this Invision Board presentation.
- Please use the provided colors only. Do not reinvent colors.
Target Audience:
- Company interviewers
- Candidates
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source 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, Adobe Illustrator as a layered AI file.
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.
We need you to provide a responsive design that works on Desktop and Mobile devices. Think mobile first when designing it.
Let us know if you have any questions
Round 1
Round One (1)Submit your initial designs for a checkpoint feedback:
1) Login (Desktop)
2) Home / Landing (Desktop)
3) Interview Form (Desktop)
4) Feedbacks Page (Desktop)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Round Two (2)Submit your Final designs:
1) Login (Desktop/Mobile)
2) Home / Landing (Desktop/Mobile)
3) Interview Form (Desktop/Mobile)
4) Feedbacks Page (Desktop/Mobile)
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Background Information
A global sports brand is looking to design a modern and intuitive responsive application that will help interviewers interview candidates. The main purpose of this application will be to help interviewers search, find and interviews candidates to join the company. The Interview guide will be mobile and desktop enabled for less paper waste, candidate confidentiality, and heightened hiring manager experience.
Each time the company plans to hire a new technical resource, they setup a panel for interview. This includes the hiring manager (to whom new recruit will report) and 3-4 panelists, who interview the resource. Interview comments are captured on notepad / diaries and then shared as summary with the hiring team.
This process is very cumbersome, prone to errors and subjective feedback. It also opens up the company for legal implications, in case the feedback was not captured correctly on a paper or is lost.
In addition, the application will provide the following benefits / ROI:
- Secure form of candidate feedback.
- No paper waste.
- Secure more offer acceptances
- Uniform candidate rating system.
- Objective candidate feedback.
- Quicker candidate feedback.
Use Case
- Hiring team opens a job code and then shares an online form with the hiring manager.
- Hiring manager then sends this form to 3-4 panelists for interview.
- Each form is for a specific job code and includes questions which are picked from a dropdown (Hiring manager picks a competency for the resource in the form and that triggers a set of questions to pop-up in the form, which panelists must ask).
- Each panelists interviews the resource, fills the feedback in the online form and presses submit in the web app.
- This triggers an email to the hiring manager and hiring team with the filled feedback form as attachment. (Email trigger is based on how was the hiring manager and the hiring team, which in turn maps to the job code for a position).
- Hiring team then takes all the forms for a resource and consolidates the feedback offline.
Things to think about
- This challenge is focused only on Interviewers (Hiring teams and hiring managers) functionalities. Not the candidates.
- We will be running an UI Prototype challenge after this one. Have in mind that this application will be developed using Bootstrap 4. So consider all their rules and guidelines when designing. Important.
- This web application must feel clean, modern and easy to use.
- A user needs to be able to easily find any information.
- While this is going to be used mainly on desktop computers we want to explore concepts on Mobile (Phone). Think mobile first! Everything you do must work well on phones.
Required Screens
1) Login (Desktop/Mobile)
- In order to use this application users must be able to register and login to access all features.
- Provide the design for both cases:
Login
- Password
- Remember Me / Forgot Password features
2) Home / Landing (Desktop/Mobile)
- After a successful login, users will get into a landing page that serves as a dashboard and launchpad for all necessary functionalities, such like:
- - Main Navigation: What menu items make sense?
- - Job Code Search / Filter / Results
- - Latest Feedbacks
- - Top rated candidates
- - What other features are important to have on this screen?
3) Interview Form (Desktop/Mobile) (Key screen)
This is the form that will shared online with the hiring managers.
We need you to propose the best user experience on how this forms should be accessed, edited and shared:
This interview forms will have the following questions categories:
3.1) Technical
3.2) Candidate highlight
3.3) Deliver results
3.4) Create the future
3.5 Champion & embrace change
3.6) Lead & influence others
Consider that each category might have from 1 to 5 questions. So how this workflow should be presented to users: different pages?, steps wizard style?, accordion style? Is up to you to propose the best solution for this problem.
Have in mind that this form will be shared as an external link outside the application itself. So what elements makes more sense to have on overall layout?
See sample questions on these files.
4) Feedbacks Page (Desktop/Mobile)
- After a hiring manager submit the form, the hiring manager will get the form on email as attachment.
- But sometimes email can fail, due to overdue tasks and network issues. We need a way to archive all the feedbacks within the application itself.
- So think on how this information should look.
- Advance search and filter functionalities
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use their current branding and web colors.
- Please use the provided fonts on the Invision Board.
- For logo use a placeholder. Do not invest time designing a logo.
- Focus on the user experience.
- Think mobile first.
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding
- You can find all necessary branding assets on this Invision Board presentation.
- Please use the provided colors only. Do not reinvent colors.
Target Audience:
- Company interviewers
- Candidates
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source 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, Adobe Illustrator as a layered AI file.
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.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.