Challenge Overview
Welcome to the GE Power and Water - Sales Operation Portal Design Challenge UI Prototype Challenge! The goal of this challenge is to create the HTML5 Prototype for a desktop application using the provided "Sales Operation Portal" storyboards. The prototype must follow our standards and our guidelines. Review the details below.
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. We will allow documentation updates during final fixes (but still required).
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Additional Challenge Rules:
- Please refer to GE Official Rules applicable to this challenge Link
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced of the Website, these Official Rules govern.
���- An Intellectual Property Release will need to be signed by Prize Winners upon completion of the Challenge.
Competition Task Overview:
The main task of this competition is to develop an HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Key Requirements:
- We would like to ensure the prototype is responsive (consider leveraging Bootstrap, Foundation, Pure, etc.) - We are targeting Desktop!
- Test in all the required browsers (see the list below)
- Ensure your submission is clear of validation errors and warnings (HTML, CSS, JS).
- You are provided with the storyboards
Required Pages:
Note about Charts:
- Where its mentioned implement the charts, please implement them using D3 Charts:
https://github.com/mbostock/d3/wiki/Gallery
0) General/Common Functionalities:
At the top, we have the header:
- Link logo to 01_1.jpg
- Navigation: We need the tabs as shown in the storyboard
- - Home: Link to 01_1.jpg (see the active style)
- - My Region: Link to 02_1.jpg
- - My Reports: Link to 04_1.jpg
- - PGP Global Directory: Link to 03_1.jpg
At the bottom, we have the footer:
- Link the logo to 01.jpg
- Navigation: We need to show the links (make the normal style for the link as shown in Terms & Conditions)
- - Home: Link to 01.jpg
- - My Region: Link to 02.jpg
- - My Reports: Link to 04_1.jpg
- - PGP Global Directory: Link to 03_1.jpg
- - Terms and Conditions: Dead link
(Come up with a hover style for these links - make sure it is consistent with all other links in the site)
- In the right side, we have a text area that allows the user to write feedbacks and show a "Submit" button
1) Home Page:
Reference: 01_1.jpg
- Home is the active selection in the navigation
- Statistics and Notifications, Regional Progress: Implement these charts and graphs (use the details as given the in the storyboards).
- Above “McCoy’s Report”, we have the profile name “John Jackson” with some icons in the right, make these icons as dead links for now.
- McCoy’s Report and 2015 Product Catalog: Make the blue text, Download and View Catalog button as links
- News: This area need to be scrollable, make sure you are following this scrollbar across the entire prototype. ‘Title of the news and View
All button” will be a link (a dead link for now).
- Under “Account manager Resources, Proposal Leader Resources, Salesforce Training and Commercial Operations” it’s all links and we can have these as dead links (please come up with a hover style for these links - keep it as simple as possible).
Events:
- This will have a list (01_1.jpg) and grid view (01_2.jpg)
- 01_1.jpg (list view): This area will be scrollable, Clicking on “Grid” icon will need to show the calendar within events (01_2.jpg) and “View
All” will be a dead link for now.
- 01_2.jpg (grid view): Clicking on “List” icon will need to show the list view within events (01_1.jpg) and “View All” will be a dead link for
now. Blue circles in the calendar indicates an event date, clicking on it changes to “orange” color and show the details below. At the top, need to allow the user to switch between months (also it would be appropriate to include the year here. ex: < October 2015 >)
- Recent Ideas: Make the “tile, username (John Doe), View All and Submit Idea button” a dead link. The thumbs up and down need to work as a toggle buttons i.e. either one of them thumbs up or thumbs down can be active at a time. (for the active state, you can fill these thumbs up or thumbs down with the color used for text links.
2) My Region:
Reference: 02_1.jpg to 02_7.jpg
- My Region is the active selection in the navigation
- Regional Statistics: Implement these charts and graphs (use the details as given the in the storyboards). “Change Region” is a dropdown that shows the list of regions (dropdown styles and options can be found here in 03_2.jpg) and “View All” make it a dead link for now.
- My quick links: Make all these dead links for now
- Regional News: Make the title as a dead link. This area will be scrollable!
- Events: Follow the same details as mentioned under Home
- Recent Ideas: Follow the same details as mentioned under Home
- Meeting and Presentations: Make the “View” shown in each of the article as a dead link for now and also “View All” is a dead link.
- Training Materials: Make the “View” shown in each of the article as a dead link for now and also “View All” is a dead link.
Regional Opportunities:
- This show the list of opportunities, this will have list and grid views.
- In both views: implement the chart that’s shown in probability.
- At the top, we have some functionalities:
----- Show More: Clicking on this show more rows below as shown in 02_7.jpg, changes the text to “Show Less”. (Note when the user changes to grid-view by clicking on the grid icon, it will also the same “Show More” option and when clicked, it will show more items in the grid as shown in 02_6.jpg)
----- Filter icon: Clicking on this shows the filter as shown in 02_5.jpg.
----- Sort Icon: Clicking on this shows the sorting options as shown in 02_4.jpg (within this, ascending and descending either of the one
can be selected, sort by will allow only one option can be chosen).
----- Show/Hide: Clicking on this shows the columns that can be chosen as shown in 02_3.jpg
----- Grid: Clicking on the grid icon shows the grid view “02_2.jpg”
----- List: Clicking on the grid icon shows the grid view “02_1.jpg”
- Pagination: Make these dead link for now.
Chatter:
- Chatter is a feature in salesforce and will be integrated here
- A Chatter component code has been included here: https://bitbucket.org/snippets/appirioux/XGyX
- You will need to compile this file in order to include it in a static resource. There is a separate asset with a compiled version (CSS), but
will require a good amount of edits if you choose to use different link / button colors.
-- Implementation/ Usage: The Chatter component will need to have a parent element with the class of "chatter" for any of these changes to be applied to the Chatter feed.
3) My Reports:
Reference: 04_1.jpg, 04_2.jpg, 04_3.jpg, 04_4.jpg
- My Statistics: Implement these charts and graphs (use the details as given the in the storyboards). “Change Region” is a dropdown that shows the list of regions (dropdown style and options can be found here in 03_2.jpg) and “View All” make it a dead link for now.
- Regional Opportunities: This is same as the one that is shown under “My Region” page, just that the width of the table is increased now as we don’t have the sidebars in the right.
4) PGP Global Directory:
Reference: 03_1.jpg, 03_2.jpg, 03_3.jpg
- At the top, we show the search and other options to filter through the table which shows a list of names. Dropdown styles for Region is shown and also follow the styles for checkboxes as shown (no specific functionality is required here).
- This show list view (03_1.jpg) and map view (03_3.jpg) (make these tabs clickable)
- Pagination in List View: make these dead links for now
- For Map view (03_3.jpg): You may use google maps and show few pins (probably load some dummy address values?) and show the info window as shown in 03_3.jpg
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 (MIT License) for this contest.
Browsers Requirements:
- Internet Explorer 9+ on PC
- Firefox on Mac / PC
- Chrome on Mac / PC
Documentation Provided:
- Storyboard and Source files
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.