Challenge Overview
Welcome to the FAST!!! 36Hr GE Oil and Gas UI Prototype UX Update Challenge. The main goal of this contest is to update the provided prototype with UX revisions provided by the new storyboard designs.
Since this is an update to an existing prototype we need to document the changes so it is easier for the developers to make their challenges. Make sure to document your HTML5/CSS3/JavaScript code (using best practices). As this challenge is a fast challenge we will allow documentation updates during final fixes if needed.
Additional Challenge Rules:
- Please refer to the attached 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.
Final Submission Guidelines
Challenge Details
Important:
- Use UI-Prototype.zip as base of your submission updates
- Follow Storyboard.zip for the updated design look and feel.
- The design should work with the provided prototypes fluid/flexible nature.
- Use existing GE UI Prototype fonts
- Pay attention to all the small graphic updates - Let us know if you have any questions.
- We need detailed documentation of the any file and code updates. Is possible create a TXT file that details the changed files ( HTML, CSS, JS, images)
UI Prototype Requirements
1) Dashboard
Screenshot: 01-1Dashboard.jpg
Code reference: Dashboard.html
- This is the updated Dashboard
- Review the provided screen and match the UX updates
- Left Navigation: Update the "New Case" Button
- Left Navigation: Update the navigation active state (use the White version shown in the PSD - not the blue!)
- Left Navigation: Apply the active state to all navigation menus
- Header: New banner area. This should be an easy image to switch out.
- Header bar: Existing header bar will move down below the banner
- Search: The Search input now needs an inner gray input box
- Profile: Update username and thumbnail like storyboard design.
- Click the username need show the flyout (screenshot: 01-2Dashboard-Dropdown.jpg)
- Put icons for “View My Profile”, “Settings” and “Logout” buttons
- Font Colors: Note the light gray labels have been darkened (throughout) - make sure to capture this
- Remove the Dashboard Configuration button
- Sections: No longer need to show the section title and the line separator
- Cases widget, Update title into “My Cases“
- Cases table, show bottom border for table header
- Feeds widget move up to the right of Cases widget
- There’s space in the right for floating “Live Chat Support”
- “Live Chat Support” there’s green dot indicator on top left
- Click “Live Chat Support” need show the “Live Chat” pop up window (screenshot: 01-3Livechat-Popover.jpg)
- There’s button to save Chat and End Chat
- No need to capture the chat function - this will be supplied by SFDC - we just need the styling
- Help Us Improve: The radio options are displayed in a single line
- Remove: Remove these items from the existing prototype:
—- “My Case”, “New Case”, “Solved Case” and “Critical Case” widgets
—- Popular Documentation
—- Recently Updated Article
- The Dashboard should look like the provide design
- Buttons styles should stay consistent with the prototype
2) Cases
Screenshot: 02-Cases.jpg
Code: Cases.html
- Review the provided screen and match the UX updates
- New Tabs: My Cases and My Company Cases
- Left Navigation: Update the navigation active state (use the White version shown in the PSD - not the blue!)
- Page defaults to My Cases - when I click on My Company Cases I should see more Cases/change of Cases
- No Banner on the secondary pages
- Header: Should be updated like the Dashboard (updated Search, profile etc)
- Remove the Dashboard Configuration button
- Fullscreen function need in the right side
- Remove box title
- Table: Note the header column font color changes
- Flyout for setting button can remain same like existing
- Chat: Give some area in the right side for floating “Live Chat Support” button
- Chat: Click the button needs to show a consistent pop up window
3) Case Detail Page
Screenshot: 03-1Case-Details-Show feed.jpg
Screenshot: 03-2Case-Details-Hide-Feed.jpg
Code: Case-Details.html
- Review the provided screen and match the UX updates
- Update the Case Details to look like the new design
- No banner show up for this Cases screen
- Header: Update like the other new headers/search
- Remove the Dashboard Configuration button
- Fullscreen function need in the right side
- Note the new grid
- Note the larger Case Progress
- Note the new Tabs in the bottom area (use the active/not active design in the PSD)
- Note the font/label color updates
- Below the Case Details description, we only need show radio buttons for “Post” and “File” only.
- When select “Post” Option, need let user type in the textarea, When select File it changes to File Upload
- Create the Tab area and revised content.
4) New Case Form
screenshot: 04-Create-new-Case.jpg
- Click New Case button we need to how the new flyout design
- Blue background and header has been added
- See the reduced forms/inputs
- X button placed in the right side
- There’s no Cancel button for the new look
Overall
- Look to match the UX updates in the screens
- Double check font colors
- Document the new updates so the developers can quickly update their development code
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 (Mac)
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.