Challenge Overview
Welcome to InnoCentive - Self Service UI Prototype Challenge. In this challenge, we are looking forward to your UI prototype based on the given storyboards.
For this challenge, we need you focus to create prototype that will fully work within DESKTOP platform.
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.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- Make all links in blue as either dead links or link them as specified below in different pages
- Please use a web-safe that closely matches existing font.
- You may use angular js but note that this application will eventually developed using Grails
- Please find styles for drop-downs, pop-ups, date picker, button/tab hover styles, text link hover styles, radio/checkbox styles etc.. from 08_GUI Kit.png
- Wherever, you have “Back to top”, clicking on it should scroll to the top..
- Wherever, you see a custom scrollbar in storyboard - please match them.
- Wherever you see a pagination, please have them as a dead link and for the “show” drop-down in pagination, you can follow the styles as in 08_GUI Kit.png
Required Pages:
We need your create a prototype for below pages and make sure they are all linked.
0. Header & Footer (All logged in pages):
* Header :
- The header shows “Innocentive” logo, which can be grabbed from the attached logos.
- In the right side, we have “Welcome username”, make “username” a dead link
- There are four main navigation items, they are:
- - Dashboard: This need to be linked to 02_Dashboard.png
- - My Challenges: This need to be linked to 05a-1_My Challenges.png
- - My Organization Profile: This need to be linked to 06-1_My Organization Profile.png
- - Help: This need to be linked to 07-1_Help.png
- There is an option for the user to search, so have a text box and make the search icon a dead link.
* Footer:
- Make all the blue text as dead links.
1. Login (01-1_Login_1.png):
- User enters username and password to login into the application
- Please simulate to show the error screen to be shown in some way, so clicking once should take the user to the error screen “01-2_Login.png”
- Clicking on login button, should take the user to 02_Dashboard.png
1.1 Login Error (01-2_Login.png):
- Please note the change in color of the text box, follow the storyboards..
- This also shows the error message “Please provide the correct username and password”
- Clicking on login button, should take the user to 02_Dashboard.png
2. Dashboard (02_Dashboard.png):
This is main dashboard that user sees after logging in..
* Open Challenges:
- Each of the challenge name need to be linked to 04-1_Challenge Details.png
- Clicking on the messages icon should take the user to 04-5_Challenge Details.png
- Clicking on “Create New Challenge” should take user to 03-1_Create New Challenge.png
- Note that all table headers are clickable/sortable, just make them a dead link.
- Please implement the "Time Left" circular progress.
- Pagination can be a dead link for now..
- Clicking on “View All” show should all challenges and pagination is not shown when viewing all challenges..
* Draft/Pending Challenges:
- Challenge name with "Draft" as status should go to "04-10_Challenge Details.png"
- Challenge name with "Draft" as status should go to "04-11_Challenge Details.png"
- Note that all table headers are clickable/sortable, just make them a dead link.
- Pagination can be a dead link for now..
- Clicking on “View All” show should all challenges and pagination is not show when viewing all challenges..
* Latest Messages:
- Clicking on the title (or) “View Message” will take the user to 04-6_Challenge Details.png
- Clicking on “reply” should direct the user to 04-7_Challenge Details.png
- Make “View All” message a dead link..
3. Create New Challenge (03-1_Create New Challenge.png):
- This allows the user to create new challenge
- Make “My Challenges” as a active tab and also show a breadcrumbs, link “My Challenges” in breadcrumb to corresponding page ‘05a-1_My Challenges.png’
* Progress bar and action buttons:
- This page shows a progress bar at the top, user won’t be able to view the next step until they complete this step…
* Form:
- User should be able to use this form, use appropriate input controls..
- For Date Picker, drop-down style - you can follow as shown in 08_GUI Kit.png
- Clicking on “?” icon, should show a pop-up, follow the style from 08_GUI Kit.png
- For the rich text tools, you can show each of them as buttons and have it as a dead link
* Action buttons:
- Clicking on “Cancel” will take the user to “My Challenges (05a-1_My Challenges.png)” page.
- Clicking on “Save as Draft” will show a modal as shown in 03-17_Create New Challenge.png
- Clicking on “Next” will take the user to 03-5_Create New Challenge.png
* Sidebar Help Content:
- In the right sidebar, user will have this help information in all pages of the “create new challenge” wizard
- Note that this has a custom scrollbar, please follow that
- Clicking on each of the tab show corresponding help options
- - HELP: This is shown by default
- - FAQ: Clicking on this tab shows information as in 03-2_Create New Challenge.png
- - Video: Clicking on this tab shows information as in 03-3_Create New Challenge.png (Videos in this help view can be just image placeholders)
- - Example: Clicking on this tab shows information as in 03-4_Create New Challenge.png
3.1 Step 2 in Challenge creation process (03-5_Create New Challenge.png):
- Have the text area as shown in storyboard
- For the rich text tools, you can show each of them as buttons and have it as a dead link
* Progress bar:
- Note that user will be able to access all previous step, please link to the corresponding step.
* Action buttons:
- Clicking on “Prev” will take the user to 03-1_Create New Challenge.png
- Add a “Cancel” button next to the “Prev” button and this will take the user to “My Challenges (05a-1_My Challenges.png)” page.
- Clicking on “Save as Draft” will show a modal as shown in 03-17_Create New Challenge.png
- Clicking on “Next” will take the user to 03-6_Create New Challenge.png
3.2 Step 3 in Challenge creation process (03-6_Create New Challenge.png):
- Have the text area as shown in storyboard
- For the rich text tools, you can show each of them as buttons and have it as a dead link
* Action buttons:
- Clicking on “Prev” will take the user to 03-5_Create New Challenge.png
- Add a “Cancel” button next to the “Prev” button and this will take the user to “My Challenges (05a-1_My Challenges.png)” page.
- Clicking on “Save as Draft” will show a modal as shown in 03-17_Create New Challenge.png
- Clicking on “Next” will take the user to 03-7_Create New Challenge.png
3.3 Step 4 in Challenge creation process (03-7_Create New Challenge.png):
- Follow the storyboards
- By default the challenge image is not shown, image will be shown after clicking on “Upload”
- On click in “Upload” button should show a simulation of progress bar as shown in 03-8_Create New Challenge.png
* Upload Progress (03-8_Create New Challenge.png):
- Show the progress bar with a “cancel” button
- Clicking on ‘cancel’ should again show the “Browse, Upload” button as in 03-7_Create New Challenge.png
* Challenge Disciplines Drop-down:
- Follow the styles of drop-down as shown in 08_GUI Kit.png
* Progress bar:
- Note that user will be able to access all previous step, please link to the corresponding step.
* Action buttons:
- Clicking on “Prev” will take the user to 03-6_Create New Challenge.png
- Add a “Cancel” button next to the “Prev” button and this will take the user to “My Challenges (05a-1_My Challenges.png)” page.
- Clicking on “Save as Draft” will show a modal as shown in 03-17_Create New Challenge.png
- Clicking on “Next” will take the user to 03-9_Create New Challenge.png
3.4 Step 5 in Challenge creation process (03-9_Create New Challenge.png):
- Follow the storyboards
- For any form elements, you can follow the styles from 08_GUI Kit.png
* Agreements:
- A user will be able to select an agreement by clicking the “checkbox”
- On clicking “View Details” should show a pop-up as shown in 03-10_Create New Challenge.png, this pop-up will have a close icon, on clicking it will close the pop-up, allow the user to scroll through the agreement.
* Attachments:
- By default, we won’t show any attachments, we show only when user uploads a file
- Clicking on upload will show the progress bar as shown in 03-11_Create New Challenge.png
- Note that attachments once uploaded will have “delete” icon, clicking on it should remove the file, please simulate this.
* Attachment Progress (03-7_Create New Challenge.png):
- This shows a “Progress bar” with cancel button
- Clicking on “Cancel” button will show the view with “browse and upload” button
- After the “Progress bar” reaches 100%, we again show the textbox with “browse and upload” button.
* Progress bar:
- Note that user will be able to access all previous step, please link to the corresponding step.
* Action buttons:
- Clicking on “Prev” will take the user to 03-7_Create New Challenge.png
- Add a “Cancel” button next to the “Prev” button and this will take the user to “My Challenges (05a-1_My Challenges.png)” page.
- Clicking on “Save as Draft” will show a modal as shown in 03-17_Create New Challenge.png
- Clicking on “Next” will take the user to 03-12_Create New Challenge.png
3.5 Step 6 in Challenge creation process (03-12_Create New Challenge.png):
- This views shows all the details in an accordion.
- Note that only one step can be shown in this accordion
- Each of the accordion has an “Edit” button that need to be linked to the corresponding previous step - please link this appropriately.
* Progress bar:
- Note that user will be able to access all previous step, please link to the corresponding step.
* Action buttons:
- Clicking on “Prev” will take the user to 03-9_Create New Challenge.png
- Add a “Cancel” button next to the “Prev” button and this will take the user to “My Challenges (05a-1_My Challenges.png)” page.
- Clicking on “Save as Draft” will show a modal as shown in 03-17_Create New Challenge.png
- Clicking on “Publish” will show a modal as shown in 03-18_Create New Challenge.png
4. Challenge Details (04-1_Challenge Details.png):
- This shows the details of the challenge.
- Make all links in this as dead links, for “Agreement” link, you need to show the pop-up as shown in 03-10_Create New Challenge.png, this pop-up will have a close icon, on clicking it will close the pop-up, allow the user to scroll through the agreement.
- This page has 3 tabs, they are Challenge Details (04-1_Challenge Details.png), Submissions (04-2_Challenge Details.png), Messages (04-5_Challenge Details.png)
- Clicking on “Add Supporting File” will show a modal window as in 04-8_Challenge Details.png
* Add Supporting File (04-8_Challenge Details.png):
- This is shown in a modal window
- Clicking on “close” in top right will hide the modal window
- Clicking on “Upload” button will show a progress bar as in 04-9_Challenge Details.png and clicking cancel within the progress will take the user back to the view as shown in 04-8_Challenge Details.png
- After the progress reaches 100%, we need to hide the modal window.
* Breadcrumb:
- At the top, we have a breadcrumb, clicking on “My Challenges” should go to 05a-1_My Challenges.png
4.1 Submissions (04-2_Challenge Details.png):
- This shows list of submissions and user can view it as either list or grid view and clicking on grid/list icon should show corresponding views:
- List view is shown as in 04-2_Challenge Details.png
- Grid view is shows as in 04-3_Challenge Details.png
- Each of the submission has couple of links namely “View and Download” - make them as dead link.
- Clicking on “Filter” show expand to show filter options as shown in 04-4_Challenge Details.png), implement the date picker and clicking on “Apply” should hide the filter.
4.2 Messages (04-5_Challenge Details.png):
- Follow the storyboard
- Clicking on any of the message should take the user to 04-6_Challenge Details.png
* Message Details (04-6_Challenge Details.png):
- Clicking on “Back to Messages” will take the user back to previous view “04-5_Challenge Details.png”
- Clicking on “reply” should take the user to “04-7_Challenge Details.png”
* Reply (04-7_Challenge Details.png):
- Clicking on “Post” or “Cancel” in this view, should take the user back to 04-6_Challenge Details.png
5. My Challenges (05a-1_My Challenges.png):
- This shows a list of challenges
- Clicking on “Filter” will expand to show the filter as in 05a-2_My Challenges.png, implement all the form controls (date picker, check boxes etc..)
* Filter (05a-2_My Challenges.png):
- Clicking on “Save Filter” should show a modal window 05a-4_My Challenges.png, this modal window has two buttons “save/cancel”, clicking on will hide the modal
- Clicking on “Load Saved Filter” will show the drop-down as shown in 05a-3_My Challenges.png, this shows the saved filter names with a delete button, clicking on delete button will remove the entry from it.
* Challenge with “Open” status:
- Clicking on a “challenge name” or “Details” link with “Open” status should be linked to 04-1_Challenge Details.png
* Challenge with “Pending” status:
- Clicking on a “challenge name” or “Details” link with status “Pending” should be linked to 04-11_Challenge Details.png
- Clicking on “Edit” link will take the user to 05b_Edit Challenge.png
* Challenge with “Draft” status:
- Clicking on a “challenge name” or “Details” link with status “Draft” should be linked to 04-10_Challenge Details.png
- Clicking on “Edit” link will take the user to 05b_Edit Challenge.png
6. Edit Challenge (05b_Edit Challenge.png):
- User will be able to edit “Draft and pending” challenges
- User can initiate editing by clicking on “edit” button from “Draft Challenge Details (04-10_Challenge Details.png) ” or “Pending Challenge Details (04-11_Challenge Details.png)” or from the "My Challenges (05a-1_My Challenges.png)"..
- Note that this has 5 tabs and each of the tab should contain details as shown in create new challenge.
* Tabs:
Each of the tabs need to clickable and you need to follow the details from the "Create New challenge" screens.
- Challenge Title and Overview: 05b_Edit Challenge.png
- Challenge Details: Follow the details from 03-5_Create New Challenge.png
- Judging and Deliverables: Follow the details from 03-6_Create New Challenge.png
- Images and Tags: Follow the details from 03-7_Create New Challenge.png
- Attachments and Legal Agreements: Follow the details from 03-7_Create New Challenge.png.
* Action buttons:
- Clicking on “Cancel” will take the user back to previous page
- Clicking on “Save” button will take the user to “My Challenges (05a-1_My Challenges.png)”
* Breadcrumb:
At the top, we have a breadcrumb:
- clicking on “Challenges Details” should go to 04-1_Challenge Details.png
- clicking on “My Challenges” should go to 05a-1_My Challenges.png
7. Organization Profile (06-1_My Organization Profile.png):
- Follow the storyboards
- Clicking on “Edit Profile” button will take the user to 06-2_My Organization Profile.png
7.1 Edit Profile (06-2_My Organization Profile.png):
- Follow the storyboards
* Action buttons:
- Clicking on “Save or Cancel” will take the user back to previous page
- Clicking on “Add Contact” should add a row with required text boxes where user can input values..
- Clicking on “Delete” icon will remove that row
8. Help (07-1_Help.png):
- This shows the help information
- Clicking on any link in this view, should take the user to 07-2_Help.png
8.1 Help Details (07-2_Help.png):
- All links will be a dead link in this view..
- In breadcrumbs, “getting started” should take the user back to 07-1_Help.png and “help” will be a dead link
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