Challenge Overview
Welcome to "CrowdExchange - Developer Community UI Prototype Challenge 1 (Desktop)". The goal of this challenge is to create Responsive HTML5 Prototype for our CrowdExchange Community Portal. The prototype must follow the best practices for coding Responsive applications. This challenge is the first prototype challenge to create the "Base" prototype that we can continue to develop with in future challenges.
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
- Focus on overall Bootstrap/great code structure.
- 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
There are 2 user roles that need to be created in this challenge (Publisher and Members). The look and feel for these user roles are quite similar between each other so it will be easy to replicate the screens, make sure to review the provided wireframes for interactions that might not be obvious in the storyboards.
Publisher Scenario
02. Dashboard
WF Reference "Dashboard ( Publisher )"
Storyboard Reference cr_02-1-Dashboard-publisher.png, cr_05-3-notifications.png
- After a Publisher logs in they will arrive on this page - this is their main Dashboard
- This page will show all Stories created by the Publisher (Active, Completed)
- Show "10" Stories select should work (the page will extend vertically). Adjust the pagination to show how this would work.
- Top Technologies section, chart needs to be adjustable/editable (not static image).
02. Filter
cr_02-2-Dashboard-filter.png
- Capture the filter view
02. Stories
Storyboard Reference cr_02-2-Stories-and-activities.png
- This is a navigation items
- Similar to the Dashboard - it captures the Stories and Activites on a stand alone page
03. Create Story and Activity Pages
WF Reference "Create Story - Publisher"
Storyboard Reference cr_03-1-Create1.png, cr_03-2-Create2.png, cr_03-3-Create3-new-activity.png
- Publisher can create new Stories and Activities for Members to work on. The Publisher will need to go through wizard process where they will be asked to create the Story, followed by create Activity, and then review their creation before publish/save the content.
- Create Tooltip Hovers ion the "i" icons (see page 17 of the Branding Guidelines)
Create Activity Page
- Add Activity - Create more Activities on this Story (see: cr_03-3-Create3-new-activity.png)
- Copy Activity - Creates another activity based on the current one
- Past Activity - Create an Activity based on an older Activity (out of scope)
Activity Requirements
- Show the Importance Select/Dropdown
- Add More - creates another requirements (1.2, 1.3) that allow the user to edit/write text in the requirements
- "X" closes or deletes the Requirement (show a browser based Alert)
Code Types
- Show the "Type Here" field and "Add Tags"
- Show clicking on "X" removes a Tag
Timeline
- Show a calendar picker for the input fields
Prizes
- Show "Add More" adds more prizes
Cancel, Save As Draft, Submit
- Cancel = Triggers a JavaScript Alert: "Are you sure" and takes the user back to their Dashboard
- Save As Draft = Triggers a JavaScript Alert: "Saving Draft" - Takes the user back to their Dashboard
- Publish = Takes the user to the Story Detail page
Review
cr_03-4-1-Review-story.png, cr_03-4-2-Review-activity.png
- Review screens for the Story/Activities created
04. Story and Activity Details
Storyboard Reference cr_04-1-1-Detail-publisher.png, cr_04-1-2-Activity-publisher.png, cr_04-1-3-Registrants.png, cr_04-1-4-Recommended.png, cr_04-1-5-Chatter.png
Story Detail
cr_04-1-1-Detail-publisher.png
- Publisher View Detail of the Story
- Publisher can "Edit" from here (missing Edit button - will be provided)
- Publisher can Close the Story
- Publisher can add more Activities ("+") tab
- Edit takes the Publisher to the Story Edit View
Activity Detail
cr_04-1-2-Activity-publisher.png
- Publisher View Detail of the Activity
- Publisher can "Edit" from here
- Publisher can Remove the Activity
- Publisher can add more Activities ("+") tab
- Edit takes the Publisher to the Activity Edit View
Registrants
cr_04-1-3-Registrants.png
- Publisher can see Members who have Registered
- Publisher can Email, Assign or Unassign a Member
- Publisher can sort by Name, Date Registered, Activities Done, Expertise
- Member Names will go to their Profiles (dead hyperlink for now)
Recommended
cr_04-1-4-Recommended.png
- Publisher can see Members are recommended (based on Expertise)
- Publisher can Email individually or a group of them
- Publisher can sort by Name, Activities Done, Expertise
- Member Names will go to their Profiles (dead hyperlink for now)
Chatter
cr_04-1-5-Chatter.png
- Publishers and the Member will chat about the Activities here
- This will use SFDC chatter
- Create what you see on this page for overall structure
Submissions
cr_04-1-6-Submissions.png
- Publisher will view Member Submissions
- Publisher can sort by Name, Submission Date, Submission Score
- Edit/Review Scorecards will be in the next challenge (dead hyperlink for now)
~
Member Scenario
02. Dashboard page
WF Reference "Dashboard ( Member )"
Storyboard Reference cr_02-4-Dashboard-member.png
- After successful login, members will be taken to their dashboard page.
- In this page, they will be able to find any activity that they currently working on or already completed.
- We want to see both tabs (Active and Completed Activities)
- Story hyperlink = goes to the Story Detail
- Activity hyperlink = goes to the Activity Detail
- Missing: We are missing the "Show <select box> 5 Activities" in the bottom left of the dashboard (see wireframe) - we will update the storyboard during the challenge. We want the page to expand vertically when showing more Stories/Activities (like the Publisher Dashboard)
- Top Technologies section, chart needs to be adjustable/editable (not static image).
04. Story and Activity Details
Storyboard Reference cr_04-2-1-Activity-Member.png, cr_04-2-2-Registrants.png, cr_04-2-3-Chatter.png, cr_04-2-4-My-Submissions.png
Activity Detail
cr_04-2-1-Activity-Member.png
- Member View Detail of the Activity
- Member can Register (after they Register they can Submit code)
- Download Supporting Documents
Registrants
cr_04-2-2-Registrants.png
- Member can see other Members who have Registered
- Member Names will go to their Profiles (dead hyperlink for now)
Chatter
cr_04-2-3-Chatter.png
- Publishers and the Member will chat about the Activities here
- This will use SFDC chatter
- Create what you see on this page for overall structure
Submissions
cr_04-2-4-My-Submissions.png
- Member will upload their submissions
- Member can delete their submissions
- Upload screens will be in the next challenge (Submit can be a dead hyperlink for now)
- View Scorecards will be in the next challenge (dead hyperlink for now)
~
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.