Challenge Summary
Welcome to IBM - SiBM Blueview Interview Helper Responsive Design Challenge!
Today, IBM interviewers manually record information about candidates when conducting interviews. Our application is designed to digitize this process, and assist IBM interviewers in capturing feedback during the interview on a tablet. Following the interview, data can easily be sent to HR to analyze and track.
In this challenge you are provided with mobile wireframes. The wireframes are a suggested user flow and meant as a guide. While contributors may design around this wireframe, we would like to see varying ideas for design and user flow. All contributors should feel free to come up with their own ideas if they would like.
Important: The provided wireframes are more "Mobile" so you will need to focus on the best "Tablet" experience. This is a responsive application!
Note: Do not only give us a colored version of wireframes as they are just meant to show you what we are looking for and explain the idea. You are highly encouraged to provide your own ideas and solutions to this application beyond the provided wireframes.
Round 1
Submit your design for a Checkpoint feedback:
You initial designs for:
1. Login Page (Tablet)
2. HR Dashboard (Tablet & Mobile)
2.A Add New Candidate (Tablet)
2.B View Candidates List (Tablet)
2.C Candidates Info (Tablet)
2.D Candidates Info (Tablet)
2.E View Candidates List (Tablet)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Final design plus any Checkpoint feedback:
1. Login Page (Tablet & Mobile)
2. HR Dashboard (Tablet & Mobile)
2.A Add New Candidate (Tablet)
2.B View Candidates List (Tablet)
2.C Candidates Info (Tablet)
2.D Candidates Info (Tablet)
2.E View Candidates List (Tablet)
3. Interviewer Dashboard (Tablet & Mobile)
3.A Interviewer – Conduct Review (Tablet)
3.B Interviewer – Requests (Tablet)
3.C Interviewer – Schedule (Tablet)
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details:
The goal of this mobile application is to help IBM interviewers capture the candidates information while in an interview. This will help the interviewers do their job easily and the data captured can be sent directly to HR to analyze and track.
We are looking for the [topcoder] design Community to help us with planning our new "user experience" (UX).
Design Guidelines:
- Your solution need to consider Responsive Design when viewed on Portrait and Landscape view of Tablet device.
- Tablet Resolution: Design for iPad 2 Retina Display 2048px x 1536px.
- Design for the experience! This application needs to work on both mobile and tablet.
Supporting Documents:
- Wireframe (Wireframe.zip)
Design Guidelines:
- All submission MUST follow IBM Design Language, refer to client website:
http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resized for bigger versions, graphics still look sharp!
Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.
Requested Screens: Tablet Design
1. Login Page:
Please refer to login.html
- To login please provide:
-- IBM Intranet ID
-- Password.
- "Remember me" to save the intranet ID.
- Please show error validation style.
2. HR Dashboard:
Please refer to hr_-_dashboard.html
- HR User will have the ability to:
-- Add new candidates.
-- View Candidates list.
-- View Interviewers list.
-- View list of notifications and sort them.
- Clicking on 3 dots symbol next each notification will show options.
- Please capture sort notifications functionality.
- Please capture the bottom navigation.
2.A Add New Candidate:
Please refer to hr_-_new_candidate.html
- HR User will have the ability to fill:
-- Candidate name.
-- Upload candidate photo.
-- Select region.
-- Select location.
-- Add Competency.
-- Upload Resume file.
-- Add interview schedule.
2.B View Candidates List:
Please refer to hr_-_candidate_list.html
- HR User will have the ability to view a list of candidates from this view.
- Clicking on a candidate will open candidate info page.
- HR User can:
-- Sort candidates list.
-- Filter candidates list.
- Clicking on 3 dots symbol next each candidate will show options.
- Please capture the color metric.
2.C Candidates Info:
Please refer to hr_-_candidate_info.html
- HR User will have the ability to:
-- Add interview.
-- View candidate profile.
-- Edit candidate profile.
-- Edit interview
2.D Candidates Info:
Please refer to hr_-_interview_results.html
- HR User will have the ability to:
-- View candidate evaluation.
-- View interview comments.
-- View candidate profile.
2.E View Candidates List:
Please refer to hr_-_interviewer_list.html
- HR User will have the ability to view a list of interviewers from this view.
- Clicking on an interviewer will open interviewer info page.
- HR User can:
-- Sort interviews list.
-- Filter interviews list.
-- Add new interviewer.
-- Edit existing interviewer info.
- Clicking on 3 dots symbol next each interviewer will show options.
3. Interviewer Dashboard:
Please refer to interviewer_-_dashboard.html
- Interviewer User will have the ability to:
-- View interview requests.
-- View Interview schedule.
-- View list of notifications and sort them.
- Accept and Decline scheduled interview.
- Please capture sort notifications functionality.
- Please capture the bottom navigation.
3.A Interviewer – Conduct Review:
Please refer to interviewer_-_conduct_interview.html
- Interviewer User will have the ability to:
-- Evaluate candidate on selected competency.
-- Add comments.
-- View candidate profile.
3.B Interviewer – Requests:
Please refer to interviewer_-_conduct_interview.html
- Interviewer User will have the ability to:
-- Accept and Decline scheduled interview.
-- Sort requests list.
-- Filter requests list.
-- When request is declined the interviewer should add reason for declining.
3.C Interviewer – Schedule:
Please refer to interviewer_-_schedule.html
- Interviewer User will have the ability to:
-- View scheduled interviews.
-- Start an interview.
-- Filter interview schedule list.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Target Users:
The app will be used from 2 main users:
- IBM HR.
- IBM Interviewer.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should possible to build and make sense as an iPad application.
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 layered PSD file, or 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.