Challenge Overview
Welcome to the GE Oil and Gas SFDC UI Prototype Challenge! The goal of this challenge is to create an HTML5 Prototype based on provided storyboards for GE Oil and Gas using Bootstrap. The prototype must follow our standards and our guidelines. Please see more details below.
NOTE: This application will need to use Bootstrap as it is part of GE'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.
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.
- 1st and 2nd Place winner from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.
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, for this challenge we are only focusing on desktop browsers
Key Requirements:
- You must double check in all the required browsers.
- Show correct click flow for each buttons and links.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML5 and CSS3 Validation error and warning.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Background must have covered all browser screen area.
- Provide hover style for any buttons/link etc.
- Make sure all navigation area works in any page.
- All transition, animation for modal window, notification must emphasized great user experience.
- We need clear documentation of the code.
Documentation Provided
Storyboard-Part1.zip - Storyboard Design
GE-Fonts-All.zip - GE's Font
UI Prototype Requirements
General Layout
- Your UI Prototype need support minimum 1024px screen width
- Replace any Lucida Grande font with GEInspira font for your UI Prototoype submission
- For wider screen than 1024px, you need make every elements inside your prototype using fluid width. Clarify in forum if you are in doubts.
- As possible use CSS based shadow, rounded corner and other styles
Header
- Header bar need use fluid width
- White background need filled whole browser screen
- Header consists of these following items:
a. Search
- Search area need use fluid width as browser screen width
- “Find cases, articles, documentation” is the default text and use grey color
- When user start typing, update the color into darker color. Apply same method for other form inputs.
- You need create autocomplete function when user start typing in search area
- Initial search result display as floating box below the input
- Initial search result divided by Cases and Knowledge section
- This is the empty result look (screenshot: 01-Search-Empty.png)
- Match the “No Result” with grey colored text
- When there’s some result, you need set every search results clickable (screenshot: 02-Search-Suggestion.png)
- Put dead links for each search result.
- User can hide the autocomplete by click outside the box
b. User Information
- User information area need use fluid width when filled with longer name
- Username and the arrow is clickable and show dropdown menu (screenshot: 03-User-Menu.png)
- Put dead links for all menus
c. Configuration Button
- Configuration button area can use fixed width
- Click this button need show floating Configuration Dashboard (screenshot: 04-Configuration-Menu.png)
- Match all options styling
- “Default Dashboard” selected by default
- When user change “Custom Dashboard” selections, “Default Dashboard” need automatically turned off
- Change selection need automatically hide/show boxes inside Content Area
- Create different style selected and not selected state
- User can hide the floating box by click outside the box
d. Fullsize button
- Fullsize button can use fixed width
- When user click button need set all boxes inside the content area to be expanded
Sidebar
- Left sidebar need use fixed width
- Blue background need filled whole browser screen
- All sidebar menus need use center alignment.
- Sidebar consists of these following menu:
a. GE Logo
- GE logo is clickable and take user to www.ge.com
b. New Case
screenshot: 04-New-Case.png
- Click this “NEW CASE” button need show floating form
- Click outside the floating box need hide the “New Case” form
- “CREATE NEW CASE” title placed on top of form
- “Account Name” and “Contact Name” show label on top of their input field
- Subject is an input field
- Description is a textarea
- There’s “Attachment” icon that let user select the files
- You also create function to make drag and drop file works
- After select the file, show selected filename inside the input (screenshot: 04-New-Case-File-Attached.png)
- Click the “x” button need remove selected file
- “Priority” dropdown values are P1, P2, P3, P4
- “Status” dropdown show default value
- “Status” dropdown values are New, Resolved, Working, Closed, Acknowledged
- Case Type : dropdown with these options: Bug, Enhancement, Problem, Question
- Company options will be pulled from Salesforce so just show dummy text in the prototype
- Product: options will be pulled from Salesforce so just show dummy text in the prototype
- Customer Reference Number: text field
- “Assign using assign active rules” is a label text
- “Cancel” links need reset all form value and then hide the box
- Green colored “Submit” button can be dead link for now
b. Dashboard
- This menu will take user to Dashboard page (explained more details below)
c. Cases
- This menu take user to Cases Page
- Cases Page is OUT OF SCOPE, but you need create blank html page
d. Enhancements
screenshot: 05-Enhancements.png
- Click this “ENHANCEMENTS” button need show floating form
- Click outside the floating box need hide the “ENHANCEMENTS” form
- “ENHANCEMENTS” title placed on top of form
- “Account Name” and “Contact Name” are read only text
- Subject is text field
- Description is a textarea
- Case Type : dropdown with these options: Bug, Enhancement, Problem, Question
- Product: options will be pulled from Salesforce so just show dummy text in the prototype
- There’s “Attachment” icon that let user select the files
- You also create function to make drag and drop file works
- After select the file, show selected filename inside the input
- “Assign using assign active rules” is a label text
- “Cancel” links need reset all form value and then hide the box
- Blue colored “Submit” button can be dead link for now
e. Knowledge
- This menu take user to Knowledge Page
- Knowledge Page is OUT OF SCOPE, but you need create blank html page
Content Area
- Read more detailed information below
- Please follow the following page flow to make sure your submission capture all click-flow requirements:
1. Dashboard
a. Collapsed Module State
screenshot: 06-Dashboard-Collapsed.png
- There’s Metric Boxes placed on top of dashboard page
- Metrics (this is always visible on the Dashboard and cannot be hidden nor collapsed)
- User still can modified modules and sections they need displayed by select option via “Configuration” menu (screenshot: 04-Configuration-Menu.png)
- By default dashboard page load Default dashboard:
-- Cases
-- Tech Support
-- Popular Documentation
-- Recently Updated Articles
-- Feeds
-- Help Us Improve
- When the Default dashboard is checked and the user then selects a module in Custom Dashboard, the Default Dashboard checkbox is unchecked but all the default modules are still visible on the Dashboard along with the new module selected
- When the Default dashboard is checked and the user then unselects one of the default modules, the Default dashboard checkbox is unchecked but the remaining default modules are still visible on the Dashboard
- When the Default dashboard is checked and the user then unchecks the box, the default modules are unselected from the Custom Dashboard section and hidden on the Dashboard
- When the Default dashboard is unchecked and the user then checks it, only the Default modules will be displayed on the Dashboard and shown as selected on the list. All other modules will be hidden.
- User can change dropdown values. The options are: “This Month”, “Six Month” and “Five Years”.
- Match different colored arrow and the title number
- All boxes width need use fluid layout
- Make sure all boxes use consistent margin
- User can expand each box by click the “expand” button next to each title
- OR by click the fullsize button on top of header bar, need set all box to be in expanded mode.
- Clicking the green View recent cases button expands the module
- Clicking the blue View all cases button takes the user to the Case List page which is OUT OF SCOPE of this challenge.
- Click “View Documentation”, “View Articles” and “View Feed” need expand related module
- Expand buttons that placed next to each module title need expand related boxes
- Notice by default there’s no arrow for Help Us Improve
b. Expanded Module State
screenshot: 07-Dashboard-Expanded.png
- This is Expanded Module State
- Change “Configuration” options need automatically hide/show boxes inside Content Area
- Here’s the complete For Dashboard Sections and Module (screenshot: 09-Custom-Dashboard.png)
I. What’s New? Section
a. News and Highlight Module
- In the right side of module, there’s “See All” that will take user to All News page (explained more details below)
- Click “Read More” links need take user to “News Detail” page
- Match 3 row of What’s New content
b. What’s New In This Release Module
- Match information for each row
- “Try it out” and “Get a quick Tutorial” need show up video in modal window (screenshot: 08-Dashboard-Expanded-Modal.png)
- Show this video in your submission: https://www.youtube.com/watch?v=uhpkRwDUBLg
- Click overlay background or outside the box need hide the modal
II. Cases & Support Section
a. Cases Module
- By default you need show case modules with empty message (screenshot: 07-Dashboard-Expanded.png)
- There’s “+” button to let user create new case and show the form inside the module (08-Dashboard-Expanded-Create-Case-1.png)
- Case form will be similar like when user click New Case button
- You need show custom scrollbar so user can whole form (08-Dashboard-Expanded-Create-Case-2.png)
- Click Submit button need hide the New Case Form and show the empty message
b. Tech Support
- Call button placed in the right side. Click this button need show the tooltip contain Phone number (07-Dashboard-Collapsed.png)
- User can type in the input
- Click Live chat button or Enter via keyboard need post the message inside the chat area
III. Documentation Section
a. Popular Documentation
- Show list of links for Popular Documentation section
- Use blue colored text for link hover style and dot circle
- Button in the bottom can take user to blank “Knowledge” page
b. Recently Updated Articles
- Show list of links for Recently Updated Articles section
- Use orange colored text for link hover style and dot circle
- Button in the bottom can take user to blank “Knowledge” page
c. Feeds
- There’s View dropdown in the right side
- Put dummy content for now
- Show user list and posts for Feed section
- User photo need wrapped by rounded css based
- Button in the bottom can take user to blank “Knowledge” page
d. FAQ
- For FAQ modules, match link styling and indentation
- “See All” link can take user to blank “Knowledge” page
e. Suggest An Articles
- User need select the radio option before can submit the form
- Click the Suggest your ideas button need show the modal window (screenshot: 07-Dashboard-Expanded-Suggest-An-Article.png)
- Modal window content will be same like Enhancement
- Blue colored “Submit” button can be hide the modal
2. All News Page
screenshot: 10-All-News.png
- User landed to this page after click “See All” from “News And Highlights” module
- Notice there’s no pointed arrow in the left sidebar
- All News modules need use same height and need adapt fluid width to any browser screen width
- “News Release” section merge 2 column for its own module
- Click “Read More” button take user to “News Detail” page
3. News Detail Page
screenshot: 11-News-Detail.png
- Main image placed on top of this page
- Image need use fluid width that can expand based on browser screen
- Match News title and content font properties
Code Requirements:
HTML
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- You’re encouraged to use HAML to make the HTML code clean, provide source files on your submission.
CSS
- 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.
- You’re encouraged to use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
Javascript
- 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.
- We encourage you to use latest/modern Javascript Framework
IMAGES
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Browsers Requirements:
- IE11
- Latest Chrome Browser (Windows & Mac)
- Latest Firefox Browser (Windows & Mac)
- Latest Safari Browser (Windows & Mac)
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.