Challenge Overview
Welcome to the GE Oil and Gas Technical Service Platform UI Prototype Challenge 2!
The goal of this challenge is to continue updating existing HTML5 Prototype based on provided storyboards and requirements below for GE Oil and Gas. The prototype must follow existing UI Prototype code standard and format. Please see more 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. 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
Competition Task Overview:
The main task of this competition is to continue updating existing 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:
- 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
ge-oil-gas-part-1.zip - UI Prototype As Base Updates
Storyboard-Part1.zip - Storyboard Design part 1
Storyboard-Part2.zip - Storyboard Design part 2
GE-Fonts-All.zip - GE Fonts
UI Prototype Requirements
0. Existing Prototype Clean Up
- Double check your prototype in all the required browsers, especially IE11
- Somehow after change to GE Inspira, all font look smaller. Match how storyboard look as close as possible? Refer to attached Storyboard-Part1.zip for existing look.
- Help Us Improve needs to stick below Feed module on collapsed state
- When section is collapsed, have the ‘Suggest your Ideas’ button expand the module. Keep the rest of the button functionality the same
- In the expanded view, need to add another radio button for “Log a Bug”
- Help Us Improve Form, the title in the modal window should show what the user selected in the module:
-- Knowledge Article Suggestion
-- Enhancement Request
-- Log a Bug
- Search result from top bar, Case/Knowledge links need go to the Case Details/Knowledge page
- Remove “Case Details” option from Configuration menu
- New Case Form, on the Priority dropdown, have the first option be ‘Priority’ instead of P1
- Need set min 980px width for all pages. Make sure all elements not break!
- After config menu show up, re-click need hide the config menu. Need same function for fullscreen and user menu
- GE logo have the link open in a new tab
- Create New Case, update Status to show these options: New, Attended, Closed
- View recent case and View all case on collapsed state need use fluid width
- Need hover state for User title and arrow, similar like config hover style
- When drag new file, should show blue border as placeholder drag & drop
- Create New Case, Placeholder text need to be grey
- When user start typing inside Create New Case and Create New Enhancements, text need to be hidden
- Tech Support, after add new text, module collapsed. Fix that.
- News Detail, keep image fixed height and width and centered
1. Dashboard - Case
screenshot: 07.png
- Update existing prototype to show Case table list after user click “Submit” button after click “+” button on Cases module.
- There’s 2 dropdowns on title are for “Priority” and “Status”
- Priority dropdown options are: P1, P2, P3, P4
- Status dropdown options are: New, Attended, Closed
- Change Dropdown need reflected on table content
- Cases table in Dashboard page just need show 5 rows only
- Notice, row with closed status show grey colored text, also the “Follow button” show less transparency
- There’s priority icons in the first column of table
- Status column need show green colored rounded shape for “New” status
- After user click “Follow” button, icon toggle into “x” icon and “Unfollow” text
- User can hover for each row, use blue colored background
- Clicking the Case row will take user to the Case Details page
- Priority legends placed in the bottom
- View All Cases button take user to Cases page
- Click “+” button again need show the form and hide the table
2. Cases
screenshot: 13.png
- User landed on this page after click “Cases” menu from the left sidebar
- Cases table need use fluid width
- Each columns need adapted the fluid layout
- In the title area there’s 3 dropdowns for Priority, Status and Date
- Priority dropdown options are: P1, P2, P3, P4
- Status dropdown options are: New, Attended, Closed
- Date dropdown options are: Any Time, and other option can be dummy text
- Search button need show the Cases search (explained below)
- Table Setting button, click this button will allow user to set column need displayed in table (screenshot: 16.png)
- Below the Cases title bar, there’s 3 tabs for “New Case”, “Attended Case” and “Closed Case”
- Click each tab, need show table content will selected status (screenshot: 14.png)
- Match active state for selected tab
- Make sure table use fluid layout
- Use dummy text for unavailable column text
- Change the selected option, need hide/show related table column
- Show Priority legend in the left side
- Table pagination placed in the bottom right of table, put dead links for every page
- You need show same format for pagination
- Tech Support module placed in the bottom right of table with fixed width
- In the table body, there’s priority column in the left side
- Match other columns content
- In the right side of row there’s arrow that will show additional Case information (screenshot: 15.png)
- You only need show one additional information at a time.
- When additional information show up, arrow icon turn up
- You need show Case Progress, Contributor with list of user icons and show details button
- When user hover on every user icon, show tooltips that show First and Last Name
- Tooltips need show fluid width if filled with longer character
- Show Detail button will take user to Case Detail page
3. Cases Search
screenshot: 17.png
- Click Search button need display Cases Search screen
- Notice Search tab remain active in this screen
- We need show empty Case at first time user landing to this screen
- Cases Search area divided by filter in the left side and search result content in the right side
- For the filter area, user can type advance search on Subject Name, Case Owner and Replacement input fields.
- “Has attached file” checkboxes can selected by click on label and checkbox
- And then need show file upload field below it. Grab existing upload field from “Create New Case”
- Click Search button need show the result in the right side (screenshot: 18.png)
- Search result have List and Chart view option
- By default, list view show up
- You need create function to capture input field value on search result title
- Field value displayed as blue text
- Show 4 columns in table
- When user change the setting, need adapting into table. Use proper column percentage width.
- Need display Priority legend in the left side and pagination in the right side
- In the right side of table row there’s dropdown to show additional Case information (screenshot: 19.png)
- When user click “Grid View”, need show chart with doughnut type (screenshot: 20.png)
- Chart need configurable
- Use animated progress bar when load the data
- Show legend in the bottom of progress bar
4. Case Details
screenshot: 21.png
- User landed on Case Details page after click the Show Detail button
- Page divided by 2 sections for “Case Details & Support” and “Case Activity & Documents”
Case Details & Support
- Both modules need use fluid width
- For this section, user see Details and Tech Support modules
- Follow button need use same toggle function
- Print button can be a dead link
- Help button can be a dead link
- Detail information placed below the title
- Case Progress bar placed below detail information
- Case Number, status, priority and date placed with color variation
- There’s action tabs for Post, Call, Community, Status, File and More
- Show the rollover state clicking them will do nothing on the prototype
- Show Post tab by default with input and Post button
- Clicking the Post button updates the Feeds with the new post displayed at the top
Case Activity & Documents
- Both boxes need use fluid width
- Feed module need filled show dropdown filter on top of page
- Contributor list after the title, need show hover style for each icons
- Match feed content style
- For Info module, there’s People and Documents tab
- In the bottom of People tab, there’s Followers tab
- User can navigate to “Documents” tab (screenshot: 22.png)
- Show another list for articles
- Put dead links for View and Download links
5. Knowledge
screenshot: 24.png
- This is Knowledge page look
- Popular Articles, Tech Support placed on top of page
- Show input and search button for Popular Articles
- User can search by click the magnify icon and press enter via keyboard
- Search result show up below Popular Articles (screenshot: 23.png)
- Column format need use fluid layout
- Put dead links for all list
- You can re-use existing Tech Support module, make sure height are same
- Getting Started, Popular Articles, and Popular Question module, show list of item titles.
- All list and See more button are clickable and show details section (screenshot: 25.png)
- This is detail section look, there’s “x” button in the right side to revert the module into original state (3 columns layout)
- Other modules should be hidden when one module expanded and move to the left side.
- Show different content when user click links and more button for Popular Articles, and Popular Question module
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.