Challenge Overview
Welcome to InnoCentive - Solver Challenges UI Prototype Challenge. In this challenge, we are looking to create an UI prototype that will be used by challenge competitors of a crowdsourcing website.
In this challenge, we are looking forward to your UI prototype based on the given storyboards and we need you focus to create prototype that will fully work within DESKTOP platform though we still need you to use bootstrap and make the elements adjust itself across different devices.
In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges when improved the codes to support Tablet and Mobile version.
Tips for Success:
Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Final Submission Guidelines
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
IMPORTANT REQUIREMENTS:
- Follow the storyboards for designs and match them.
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- Make all links in blue as either dead links or link them as specified below in different pages
- Please use a web-safe font that closely matches existing font.
- Please use bootstrap and make sure all pages are shown/adjust itself across different devices...though we don't have the storyboards for mobile, we just need to make sure the contents gets adjusted across different devices (tablet, mobiles etc..)..Especially buttons on the right side of the screen. Note that we may remove some of those buttons later so we want to make sure the layout adjusts accordingly if some of the buttons are removed.
- For the desktop layout, please make sure the width is fixes and just have just fluid footer gray background and navigation blue background.
- You can use angular JS (though it is optional)
- Note that this application will eventually be developed as an app for JIVE software.
- Wherever, you see a custom scrollbar in storyboard - please match them.
- Wherever you see a pagination, please have them as a dead link.
REQUIRED PAGES:
Below are the list of pages for which we need a prototype..
0) Header, Navigation & Footer:
* Header:
- Have a Innocentive logo
* In the right side, we have the “messages icon”, user thumbnail and name
- Please remove “Messages” icon..
- Make “johndoe” a dead link
* Navigation:
- “Home” - make it as a deadlink
- “Challenges” should take the user to 02-1-Challenge-Lists-Page.jpg
* Footer:
- This just has the copyright information
1) Login (01-1-Login-Page.jpg):
- This is login page.
- On focus/typing in the textbox, the background changes to yellow as in 01-2-OnSelect.jpg
- Button hover styles is shown in 01-3-Hover-Button.jpg
- Please note the checkbox styles (checked/unchecked), no hover required for this!
- On Clicking “Submit” show the error screen 01-4-Alert.jpg
1.1) Login Error (01-4-Alert.jpg):
- This shows the login error screen
- On clicking “Submit” in this screen should take the user to 02-1-Challenge-Lists-Page.jpg
2) Challenge List (02-1-Challenge-Lists-Page.jpg/02-2-Grid-View.jpg):
- This page shows the list of challenge in “List View”..
- The tabs “All Challenges, My Challenges” need to work, both the views will almost be the same, see below for the difference in the list of challenges to be shown in both views.
- Clicking on List view icon shows 02-1-Challenge-Lists-Page.jpg and the grid icon turns greens indicating that it is active
- Clicking on Grid view icon shows 02-2-Grid-View.jpg and the list icon turns greens indicating that it is active
- Clicking on “Filter” button shows the filter bar like 02-4-Filter-Form.jpg
* Challenges:
- Each of the challenges in the list of challenges are either registered by the user or not-yet registered by the user..
- Registered challenges will show three buttons “Details, Submit and View”.
-- Details button takes the user to 05-1-Challenge-Details-Private-Page.jpg
-- Submit button, make it a dead link for now..
-- View button takes the user to 06-1-View-Submissions-list.jpg
- Not yet registered challenges will show two buttons “Details, Register”
-- Details button takes the user to appropriate view i.e.
* challenges with deadline “28 Days left” should take the user to 03-1-Challenge-Details-Public.jpg
* challenges with deadline “2 Days left” should take the user to 03-2-Public-View-Deadline.jpg
* challenges with deadline “1 Hours left” should take the user to 03-3-Public-View-Deadline.jpg
-- Register button takes the user to 04-1-Registration-Page.jpg
- Hover styles for button can be seen in 03-4-Hover-Button.jpg
* Breadcrumbs:
- “Home” should be a dead link
2.1) All Challenges TAB (02-1-Challenge-Lists-Page.jpg/02-2-Grid-View.jpg):
- You can follow the storyboards
- This view will shows both Registered and Not-registered challenges:
- Note that challenges that the user has registered will be show with a thick border in the right
2.2) My Challenges TAB:
- We don’t have this view in the storyboards, but its same as “All challenges tab view, just that only the challenges that were registered by the logged in user will be shown in this view.
2.3) Filter (02-4-Filter-Form.jpg):
- Remove the “-” (dash) icon shown to the right of the name “Filter”, we just need the “Close” (x) icon..
- Clicking on “Close” icon should close this filter
- For prices, please implement the slider..
- Input style of the textboxes is shown in 02-5-Input-Filter.jpg, please follow that..
- Clicking on “Reset” should take the user to 02-4-Filter-Form.jpg
- Clicking on “Apply Filter” should take the user to 02-6-Filter-Lists.jpg..
2.3.1) Filter Selections (02-6-Filter-Lists.jpg):
- Once the user has clicked the “Apply” button, we show the selected filter options at the top
- Follow the storyboard..
- Clicking on the red “close” button shown in the right, should hide this “Filter Lists” from the page
- Clicking on “Remove” (X) icon in each of the filter options will remove that button, when the user has removed all and has finally one option then on clicking “Remove” (X) in the last option will hide this “Filter Lists” from the page.
3) Challenge Details - Public (03-1-Challenge-Details-Public.jpg, 03-2-Public-View-Deadline.jpg, 03-3-Public-View-Deadline2.jpg):
- This is the public view of challenge details
- Follow the storyboards
- Please remove “Send a Message” button
- Clicking on “Register” will take the user to 04-1-Registration-Page.jpg
* Breadcrumbs:
- “Home” should be a dead link
- “Challenges” should take the user to 02-1-Challenge-Lists-Page.jpg
4) Registration (04-1-Registration-Page.jpg):
- This is the registration page where users will register for the challenge.
- Follow the storyboards..
- User will need to click on the “Checkbox” as shown in 04-2-On-Check.jpg and then click the “Submit” button. Note that, user won’t able to click the “Submit” button until they select this “checkbox”
- Clicking on “Submit” button will take the user to 05-1-Challenge-Details-Private-Page.jpg
5) Challenge Details - Private (05-1-Challenge-Details-Private-Page.jpg):
- This is the private view of challenge details
- Follow the storyboards
- Please remove "Send a Message” button shown in this view
- Make “Submit Solution” a dead link for now.
- Clicking on “View your Solutions” will take the user to 06-1-View-Submissions-list.jpg
- Please see button hover style in 05-2-Hover-Button-Messages.jpg
- Make all links under “Challenge Attachments” as dead links
- Make all button under “Tags” as dead links
* Breadcrumbs:
- “Home” should be a dead link
- “Challenges” should take the user to 02-1-Challenge-Lists-Page.jpg
5.1) View Solutions (06-1-View-Submissions-list.jpg):
- This shows the list of the solutions submitted by this user
- Clicking on List view icon shows 06-1-View-Submissions-list.jpg and the grid icon turns greens indicating that it is active
- Clicking on Grid view icon shows 06-2-View-Submissions-Grid.jpg and the list icon turns greens indicating that it is active
- Please make “Download, View” button as a dead link for now..
- Also make “John doe” as a dead link
CODE REQUIREMENTS:
HTML/CSS Requirements
- You're encouraged to use and take advantage of CSS3.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the Browser Requirements section.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- We’re allowed limited JQuery or JQuery plugins. We want to make sure the overhead of all the JS libraries is very, very small, so please make sure that all JS libraries used are approved in the forum.
Browsers Requirements
- IE 9+ Browsers on PC (use HTML5shiv to support IE9 version)
- Latest Safari Browser on MAC and PC
- Latest Chrome Browser on MAC and PC
- Latest Firefox Browser on MAC and PC
- Mobile/Tablet Safari/Chrome browsers