Challenge Overview
Welcome to "CrowdExchange - Developer Community UI Prototype Challenge 2 (Desktop)". The goal of this challenge is to create a responsive HTML5 Prototype for our CrowdExchange Community Portal. We already have an initial prototype that will be used as the base for your submission. Your prototype needs to follow the best practices for coding responsive applications. This challenge is the second prototype challenge to create the the CrowdExchange prototype and we are now looking to finish specific features within the prototype.
This prototype will eventually be used on the Salesforce Platform (force).
NOTE: This application will need to use Bootstrap as it is part of CrowdExchanges's preferred frameworks (http://getbootstrap.com/getting-started).
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. As this challenge is a FAST challenge we will allow documentation updates during final fixes if needed.
~
Challenge Task Overview
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. We are focused on the "Desktop" view for this challenge. It is very important that you implement and use Bootstrap correctly so we can update the mobile views in a future challenge.
Tips for Success: Ask questions early and get the Copilot or PM's feedback is very important for everyone to be successful in UI Prototype challenges.
Key Requirements
- Use the existing prototype and build off of it using best practices and bootstrap
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- This new Portal will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops), but for now, focus only on Desktop version.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Screen Requirements
Editing and Viewing Scorecards
Publishers are able to provide scores to code submissions that Members will upload
04. Publisher - Edit Scorecards
Storyboard reference (cr_04-1-7-Score-card.png)
- This page appears after an Activity has a Submission
- Publisher can apply their review to the scorecard by choosing a select box value, the select box values can be found below :
* Meet and Exceeds Requirements
* Meets Requirements
* Somewhat Meets Requirements
* Doesn't Meet Requirements
- Publisher needs to put comments in each list in the scorecard to explain the score. Trigger an Alert if a comment section is not filled out (use the provided Alert design) - The alert will display after click "Save Review" button if comment section is not filled.
- Submission file name should be a link
- Member name should link to Profile page
04. Member - View Scorecards
Storyboard Reference (cr_04-2-5-view-score-card.png)
- Member can view their submission scores
- Scorecards link from "My Submission" page "view" link (member-activity-details-assigned.html)
- This is a read only page
- Submission file name should be a link
- Member name should link to Profile page
07. Member - Code Submission
Storyboard Reference (crex_07-1-Submit-a-code.png), (crex_07-2-Progress.png, crex_07-3-Done.png)
- Member will be able to submit their solution after registering on the Activity
- Member will be able to submit multiple solutions to the Activity
- Member can delete their submission
- New submission go to the top of the previous submission
Flow
- Member can submit after they register
- Submit button will trigger the upload window: cr_07-1-Submit-a-code.png
- By default there is no submission but the original prototype has a submission (and the user can submit more than one so this doesn't really matter)
- What does need to be fixed is the "Submit" buttons should only be grayed out after the challenge is closed. It should always be available when a Member can upload (anytime before the deadline)
- cr_07-1-Submit-a-code.png - Click Submit (we should change this button to read Upload) and the Member will see "cr_07-2-progress.png"
- cr_07-2-progress.png - once the file is done uploading it will show "cr_07-3-submited.png"
- We will still need the blue submit button in the top right (storyboard is incorrect)
- Success message is shown - once the user leaves or does something else the success message/page goes back to just showing the file/row
- Success message "Your files have been uploaded. Thank you"
- We would like to capture "prototype" the submission process - use JQuery or similar to prototype this. Prototype the green loading bar, success message and adding a new row.
Profiles
05. Member Profile Page
Storyboard Reference (cr_05-1-Profile-Member.png) and (cr_05-2-profile-works.png)
- This is the Member profile page
- Publishers and other Members can check profiles
- Use content from storyboard for this page.
- Show both tabs "Current and Completed Activities"
05. Publisher Profile Page
Storyboard Reference (cr_05-4-profile-publisher.png)
- This is the Publisher profile
- Capture the 3 tabs (Completed Stories, Developers, Technology Used).
Site Search
06. Search Page
Storyboard References (cr_06-2-Result.png) (cr_06-2-stories.png) (cr_06-3-Activities.png) (cr_06-4-Members.png)
- This page apply to both roles, Publisher and Members
cr_06-1-Search-Result.png
- We will need a "no result" page
- User can do a search and all items with those terms will show up
- User can then filter by the tabs
- Different tabs have different action items (Register, Email etc)
- Both roles will have same search features function.
- Register should trigger an Alert window - once Registered it changes to a Submit button
cr_06-2-stories.png
- Filter on Stories
cr_06-3-Activities.png
- Filter on Activities
cr_06-4-Members.png
- Filter on Members
~
Overall Prototype Updates
These are items/updates to the provided base prototype. Things like spacing, color and layout updates.
1) Publisher/Member Dashboard
Prototype Pages: publisher-dashboard.html, member-dashboard.html
- Padding between activities (top/bottom) can be reduced (height) - so more can fit.
- Member Dashboard: Submit button should take the user to the My Submission Page
- Member Dashoboard: Text Change: Top graphic for Registrations should be “My Registrations”
2) Create Story
Prototype Page: publisher-create-story-step1.html
Design: cr_03-1-Create-story.png
- Remove the Select Box
3) Create Activity
Prototype Page: publisher-create-story-step2.html
Design: cr_03-2-Create-activity.png
- Add Support Documents at the bottom (prototype this by "clicking upload" and you will see a new row)
- Remove "Copy from Past Activity" option
- Change "Remove" to Cancel on any active Activities (when an activity is published, it should not be able to be removed only canceled)
- When adding a tag I have to enter a comma to add the tab, I should just be able to hit enter to add the tag
- Add a checkbox that indicates “No Prizes”, and when the checkbox is checked it doesn't allow prize entries
4) Publisher Activity Detail/Review Activity Detail
Prototype Page: publisher-create-story-step3.html, publisher-activity-details-assign-register.html
Design: cr_03-4-2-Review-activity.png
Design: cr_04-1-2-1-Activity-publisher.png
- Move the prizes to the top right
- Update the support document section. Adding documents happens in edit mode
5) Member Story
Prototype Page: member-story-details.html
Design: cr_04-2-0-Story-member.png
- We need to update this page to the new design
- Add Story Activities at the bottom
6) Member Activity
Prototype Page: member-activity-details-assigned.html
Design: cr_04-2-1-Activity-Member.png
- We would like to see the same timeline for the activity phases that is on the Publisher activity view, so the member will know when specific items are due (register, checkpoint, submission, etc. (design will be supplied - but it will be the same as Publisher view)
- We want to include the requirement number and importance rating, like we see on the publisher activity list (design will be supplied but it will be the same as Publisher view)
7) Alerts and Messages
- We would like to replace the existing "JavaScript Alerts" with the provided designs
- We would like to include the Alert and Success messaging based on hitting submit or delete buttons etc.
- cr_03-4-3-cancel-alert.png, cr_03-4-4-draft-alert.png
- cr_04-1-2-2-remove-alert.png, cr_04-1-8-Alert.png
Existing Alerts
- Saving Draft
- Closing Story
- Remove Activity (chance to Close Activity)
- Assign Member
~
Specific HTML/CSS/JavaScript Requirements
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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 style-sheet.
- 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 scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use JQuery and Bootstrap framework for this challenge.
Browsers Requirements
- Chrome is a priority
- Latest Firefox, Safari & Chrome Browsers
- IE10++ (can be left for final fixes)
Documentation Provided
- Wireframes, Storyboard and All necessary flow documents can be found in forum!
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.