Challenge Overview
Welcome to GE - B2B App Features UI Prototype Challenge.
The main task of this challenge is to create the new UI elements (HTML/CSS) for our existing B2B Application. The application is Responsive, so you will need to leverage the existing Bootstrap code and develop to our current standards. We want to be able to take the results of this challenge and integrate into our development environment. We want to avoid using any extra JavaScript or code that will need to be thrown away.
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we are looking forward to your submissions!
Additional GE Challenge Rules
- Refer to GE Official Rules attached to this challenge.
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- All winners from this challenge need print, sign and send back to us the IP Rights document from GE before eligible for the prizes.
Storyboard.zip - Use this storyboard design
html.zip - Base of Prototype Update
Ge-Sans-Font.zip - Use GE Sans Fonts
Important:
- Use the provided html.zip as base of your submission.
- Grab only header and footer codes, other element need to be brand new for this UI Prototype
- The base of prototype stylesheet is created using Bootstrap.
- The primary focus is on HTML/CSS and responsive browser testing. Mostly we not required to build complex function/javascript implementation just need simple hide/show function.
- Graphics: You MUST make sure all graphics look sharp on Retina and Standard Size. Let us know if you see any missing Retina graphics.
- Hover state, refer to screenshots with _hover filenaming.
Your prototype submission needs to support these following sizes:
a. Desktop Size
- Provided storyboard using Standard (1x) size 1280px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper
b. Tablet Size
- Use fluid width of mobile version for tablet size
- Check on 768px - 1024px to see how Tablet look.
- Adjust sizing for any elements to make they look proper with existing tablet look and feel.
c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission supports Standard layout with 320px width
- Graphics should be sharp on Retina and Standard version
- All pages need to use fluid layout when transform into Landscape or Portrait view.
- You might need to adjust some element placement in 320px width screen size. Please discuss in the Forums.
1). All Quotes
DESKTOP VERSION
Screenshot: 01_1.png
- List View: This is All Quotes pages look and feel
- Page layout divided by these sections:
Header:
- Use the existing header and add in the new items
- Notification Icon: Put number indicator above the notification icon
Blue Bar:
- "Add New Quote" button placed on the right side of main navigation
- Add icons to Dashboard and Quotes
Gray Area + Filter:
- List or Grid View button placed on the right side
- Grid View button can be dead link for now
- Filter button need load the filter sidebar (Screenshot: 02_1.png)
- When the filter appears it will push the table to left side
- Match styling for every form elements of the Filter area
- Click Save Filters link needs to load save filter flyout (Screenshot: 02_3_1.png)
- User can type the text input (Screenshot: 02_3_2.png)
- There are search input and user saved Filters on top. User needs to scroll down to see all filters.
- User need able to scrolling the filter flyout, use browser based style
- Price range match styling for all element
Table:
- "Quote No" link goes to the Quote Detail page
- Star/Favorite icon create separate style for toggle/untoggle
- Pagination: On the bottom of the table there is "Show All" and pagination buttons - no need to create this functionality.
- 3 Dots Icon: Clicking the 3 dots will load the flyouts for action buttons (Screenshot: 02_2.png)
- Gear Icon: Click the gear button need load sidebar contains the column setting (Screenshot: 02_4.png)
- Match styling for toggle active/inactive state
- On the left side is the icon for drag and drop.
- No need build the drag & drop function
- Click Apply & Cancel button need close the right sidebar
MOBILE VERSION
Screenshot: 06_1.png
- For Mobile view, title placed next to logo
- Add New Quote button text can remain same like desktop
- List and Grid View button become hidden
- Remain place the star/favorite icon on the left side like desktop version
- And 3 dots button on the right side
- Click 3 dots button need remain display the flyout like desktop look (Screenshot: 06_2.png)
- For mobile view, Quote No, Quote Name, Status and Created By is merged as single column
- Show all and Show more button placed on the bottom of table
- Click on the hamburger menu need load sidebar (Screenshot: 06_3.png)
- Put GE Logo on the sidebar and application title
- Match sidebar menu content
- There's number indicator on top of user thumbnail
- Match active/inactive state
- Click each button need take user to correct pages
- Click Gear button need load the Column Settings (Screenshot: 07.png)
- Match styling like desktop version
- For mobile view, layout needs use fluid width
- Click Filter button need load the Filter screen (Screenshot: 08_1.png)
- Use fluid width for the filters area
- Click Save Filter need load the flyout (Screenshot: 08_2.png & Screenshot: 08_3.png)
2). Quote Detail
DESKTOP VERSION
Screenshot: 03_1.png
- This is Quote Detail screen
- Top Box: This is the Quote Details
- Expand/Collapse button placed on the left side of title
- There is sub-navigation placed on the right side of Quote title
- Bottom Box: Items navigator is the bottom box
- On the left side is area for Quotes Category
- All items Displayed as table layout
- Put Total price and search button on the right side
- Click 3 dots on the right side of table need load the flyout contains action buttons (Screenshot: 03_2.png & Screenshot: 04_2.png)
- Under Item Description column, there are 3 dots links. Click the link needs to show the flyout that contains description (Screenshot: 03_3.png)
- Page look after click button to collapse the left sidebar. (Screenshot: 04_1.png)
- For top bar, need collapse the whole top area
- Click 3 dots button need load the flyout (Screenshot: 04_2.png)
MOBILE VERSION
Screenshot: 09_1.png
- For mobile, box need remain displayed 2 boxes like desktop
- on top box, title area and navigation need displayed in separated line
- Label and description displayed as single row
- All items need load table content by default
- Display table content in single column
- Drag and Drop button and Menu button placed on the right side
- Menu button need load Edit and Delete button (Screenshot: 09_2.png)
- Click the arrow left button need load the item category (Screenshot: 09_3.png)
3). Documents
DESKTOP VERSION
Screenshot: 04_3.png
- This is Documents screen
- Add New Document will take user to the Wizard screen explained below
- Star button placed on the left side
- This screen will contains some documents information on table list
- Click 3 dots button need load Edit and Delete (Screenshot: 04_4.png)
MOBILE VERSION
Screenshot: 09_4.png
- This is Document page look on mobile
- All table columns merged in single column for mobile
- Click 3 dots button need load Edit and Delete button (Screenshot: 09_5.png)
4). Quote Detail - Documents/Wizard
Step 1 - Template
DESKTOP VERSION
Screenshot: 05_1.png
- User lands on this page after they click the Add New Document button
- User will see a Step Wizard
- Graphic placed on the left side and they change when the user navigates to a new step
- User only needs to be able to select one template at a time
- Use blue border for selected template
- Back button is disabled on this screen
- Continue button take user to next step
MOBILE VERSION
Screenshot: 10_1_1.png
- Toggle button placed on the left side
- Star/Favorite button placed on the left side
- Sub navigation moving down
- For mobile view, you only need display the icon on tab navigation
- Below tab, there's Step information with graphic
- No need build the slide function, you just need follow mobile layout (Screenshot: 10_1_2.png)
- Use consistent title like desktop for Continue button
Step 2 - Bill of Material
DESKTOP VERSION
Screenshot: 05_2.png
- On Step 2, there are toggle buttons for each option.
- Create separated style for collapsed state
- There’s Select all checkboxes on top
- Match checked on/off for label and toggles
- The Back button takes user to the previous step
- Continue button take user to next step
MOBILE VERSION
Screenshot: 10_3.png
- For step 2, the title and checkboxes need to be displayed in single line
- Back and Continue button placed on the bottom
Step 3 - Drawing & Publication
DESKTOP VERSION
Screenshot: 05_3.png
- Drawing and Publication is using a tab
- There is a list and grid view button, put dead links
- Select all button will select all checkboxes
- List view is selected by default
- Preview area is on the right side
- Back button takes the user to the previous step
- Continue button take user to next step
MOBILE VERSION
Screenshot: 10_4.png
- For mobile view, there is no Preview area
- Instead, there's new preview link below the title
- Display consistent List/Grid View button and Select All buttons
- Wrap the content with border like desktop version
- Back and Continue button placed outside the table border
Step 4 - Customer Information
DESKTOP VERSION
Screenshot: 05_4_1.png
- For this step, user can scroll or search for customer
- New customer link will show a new form on the right side (Screenshot: 05_4_2.png)
- Each section divided by Alphabet
- On the right side displayed a preview version of the customer
- Make sure to capture the style for a selected Customer
- Add, Delete and Edit buttons placed on the bottom right
- Back button takes user to the previous step
- Continue button take user to Summary page
MOBILE VERSION
Screenshot: 10_5_1.png
Screenshot: 10_5_2.png
Screenshot: 10_5_3.png
- Use consistent tab like Desktop version: Customers and Recents
- New Customer link placed below the tab
- Search input contacts need consistent like desktop look
- You can display the right content like on desktop to be placed on the bottom for mobile
- Wrap the content with border like desktop version
Summary
DESKTOP VERSION
Screenshot: 05_6.png
- This is how the Summary page will look
- Edit and Submit button placed on the right side
- Page divided by Step navigator on the left side and data user filled on the right side
- Edit and Submit button placed on the right side
MOBILE VERSION
Screenshot: 10_6.png
- This is the summary screen for mobile
- Make sure the content adapts fluid width
- When expanding each section there is a edit button placed on the right side
Client Priorities (The items that are considered highest prototype priorities)
- Great HTML/CSS conversion of the design
- Quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Code Documentation
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements 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 HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and do not build different pages for different device/layout.
- 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 creating styles
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
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.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Chrome, Firefox and Safari on iPad (Landscape & Portrait View)
- Android Browser
The main task of this challenge is to create the new UI elements (HTML/CSS) for our existing B2B Application. The application is Responsive, so you will need to leverage the existing Bootstrap code and develop to our current standards. We want to be able to take the results of this challenge and integrate into our development environment. We want to avoid using any extra JavaScript or code that will need to be thrown away.
At the end of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we are looking forward to your submissions!
Additional GE Challenge Rules
- Refer to GE Official Rules attached to this challenge.
- To the extent there is any conflict between these Official Rules and additional Topcoder Terms and Conditions of Use referenced off the Website, these Official Rules govern.
- All winners 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
Downloadable Files:Storyboard.zip - Use this storyboard design
html.zip - Base of Prototype Update
Ge-Sans-Font.zip - Use GE Sans Fonts
Important:
- Use the provided html.zip as base of your submission.
- Grab only header and footer codes, other element need to be brand new for this UI Prototype
- The base of prototype stylesheet is created using Bootstrap.
- The primary focus is on HTML/CSS and responsive browser testing. Mostly we not required to build complex function/javascript implementation just need simple hide/show function.
- Graphics: You MUST make sure all graphics look sharp on Retina and Standard Size. Let us know if you see any missing Retina graphics.
- Hover state, refer to screenshots with _hover filenaming.
Your prototype submission needs to support these following sizes:
a. Desktop Size
- Provided storyboard using Standard (1x) size 1280px width
- Set 1025px min-width for all desktop sizes
- Desktop sizes need to be fluid starting from 1025px and upper
b. Tablet Size
- Use fluid width of mobile version for tablet size
- Check on 768px - 1024px to see how Tablet look.
- Adjust sizing for any elements to make they look proper with existing tablet look and feel.
c. Mobile Size
- Provided storyboard using iPhone 6 Retina Portrait display (750px).
- Make sure your submission supports Standard layout with 320px width
- Graphics should be sharp on Retina and Standard version
- All pages need to use fluid layout when transform into Landscape or Portrait view.
- You might need to adjust some element placement in 320px width screen size. Please discuss in the Forums.
1). All Quotes
DESKTOP VERSION
Screenshot: 01_1.png
- List View: This is All Quotes pages look and feel
- Page layout divided by these sections:
Header:
- Use the existing header and add in the new items
- Notification Icon: Put number indicator above the notification icon
Blue Bar:
- "Add New Quote" button placed on the right side of main navigation
- Add icons to Dashboard and Quotes
Gray Area + Filter:
- List or Grid View button placed on the right side
- Grid View button can be dead link for now
- Filter button need load the filter sidebar (Screenshot: 02_1.png)
- When the filter appears it will push the table to left side
- Match styling for every form elements of the Filter area
- Click Save Filters link needs to load save filter flyout (Screenshot: 02_3_1.png)
- User can type the text input (Screenshot: 02_3_2.png)
- There are search input and user saved Filters on top. User needs to scroll down to see all filters.
- User need able to scrolling the filter flyout, use browser based style
- Price range match styling for all element
Table:
- "Quote No" link goes to the Quote Detail page
- Star/Favorite icon create separate style for toggle/untoggle
- Pagination: On the bottom of the table there is "Show All" and pagination buttons - no need to create this functionality.
- 3 Dots Icon: Clicking the 3 dots will load the flyouts for action buttons (Screenshot: 02_2.png)
- Gear Icon: Click the gear button need load sidebar contains the column setting (Screenshot: 02_4.png)
- Match styling for toggle active/inactive state
- On the left side is the icon for drag and drop.
- No need build the drag & drop function
- Click Apply & Cancel button need close the right sidebar
MOBILE VERSION
Screenshot: 06_1.png
- For Mobile view, title placed next to logo
- Add New Quote button text can remain same like desktop
- List and Grid View button become hidden
- Remain place the star/favorite icon on the left side like desktop version
- And 3 dots button on the right side
- Click 3 dots button need remain display the flyout like desktop look (Screenshot: 06_2.png)
- For mobile view, Quote No, Quote Name, Status and Created By is merged as single column
- Show all and Show more button placed on the bottom of table
- Click on the hamburger menu need load sidebar (Screenshot: 06_3.png)
- Put GE Logo on the sidebar and application title
- Match sidebar menu content
- There's number indicator on top of user thumbnail
- Match active/inactive state
- Click each button need take user to correct pages
- Click Gear button need load the Column Settings (Screenshot: 07.png)
- Match styling like desktop version
- For mobile view, layout needs use fluid width
- Click Filter button need load the Filter screen (Screenshot: 08_1.png)
- Use fluid width for the filters area
- Click Save Filter need load the flyout (Screenshot: 08_2.png & Screenshot: 08_3.png)
2). Quote Detail
DESKTOP VERSION
Screenshot: 03_1.png
- This is Quote Detail screen
- Top Box: This is the Quote Details
- Expand/Collapse button placed on the left side of title
- There is sub-navigation placed on the right side of Quote title
- Bottom Box: Items navigator is the bottom box
- On the left side is area for Quotes Category
- All items Displayed as table layout
- Put Total price and search button on the right side
- Click 3 dots on the right side of table need load the flyout contains action buttons (Screenshot: 03_2.png & Screenshot: 04_2.png)
- Under Item Description column, there are 3 dots links. Click the link needs to show the flyout that contains description (Screenshot: 03_3.png)
- Page look after click button to collapse the left sidebar. (Screenshot: 04_1.png)
- For top bar, need collapse the whole top area
- Click 3 dots button need load the flyout (Screenshot: 04_2.png)
MOBILE VERSION
Screenshot: 09_1.png
- For mobile, box need remain displayed 2 boxes like desktop
- on top box, title area and navigation need displayed in separated line
- Label and description displayed as single row
- All items need load table content by default
- Display table content in single column
- Drag and Drop button and Menu button placed on the right side
- Menu button need load Edit and Delete button (Screenshot: 09_2.png)
- Click the arrow left button need load the item category (Screenshot: 09_3.png)
3). Documents
DESKTOP VERSION
Screenshot: 04_3.png
- This is Documents screen
- Add New Document will take user to the Wizard screen explained below
- Star button placed on the left side
- This screen will contains some documents information on table list
- Click 3 dots button need load Edit and Delete (Screenshot: 04_4.png)
MOBILE VERSION
Screenshot: 09_4.png
- This is Document page look on mobile
- All table columns merged in single column for mobile
- Click 3 dots button need load Edit and Delete button (Screenshot: 09_5.png)
4). Quote Detail - Documents/Wizard
Step 1 - Template
DESKTOP VERSION
Screenshot: 05_1.png
- User lands on this page after they click the Add New Document button
- User will see a Step Wizard
- Graphic placed on the left side and they change when the user navigates to a new step
- User only needs to be able to select one template at a time
- Use blue border for selected template
- Back button is disabled on this screen
- Continue button take user to next step
MOBILE VERSION
Screenshot: 10_1_1.png
- Toggle button placed on the left side
- Star/Favorite button placed on the left side
- Sub navigation moving down
- For mobile view, you only need display the icon on tab navigation
- Below tab, there's Step information with graphic
- No need build the slide function, you just need follow mobile layout (Screenshot: 10_1_2.png)
- Use consistent title like desktop for Continue button
Step 2 - Bill of Material
DESKTOP VERSION
Screenshot: 05_2.png
- On Step 2, there are toggle buttons for each option.
- Create separated style for collapsed state
- There’s Select all checkboxes on top
- Match checked on/off for label and toggles
- The Back button takes user to the previous step
- Continue button take user to next step
MOBILE VERSION
Screenshot: 10_3.png
- For step 2, the title and checkboxes need to be displayed in single line
- Back and Continue button placed on the bottom
Step 3 - Drawing & Publication
DESKTOP VERSION
Screenshot: 05_3.png
- Drawing and Publication is using a tab
- There is a list and grid view button, put dead links
- Select all button will select all checkboxes
- List view is selected by default
- Preview area is on the right side
- Back button takes the user to the previous step
- Continue button take user to next step
MOBILE VERSION
Screenshot: 10_4.png
- For mobile view, there is no Preview area
- Instead, there's new preview link below the title
- Display consistent List/Grid View button and Select All buttons
- Wrap the content with border like desktop version
- Back and Continue button placed outside the table border
Step 4 - Customer Information
DESKTOP VERSION
Screenshot: 05_4_1.png
- For this step, user can scroll or search for customer
- New customer link will show a new form on the right side (Screenshot: 05_4_2.png)
- Each section divided by Alphabet
- On the right side displayed a preview version of the customer
- Make sure to capture the style for a selected Customer
- Add, Delete and Edit buttons placed on the bottom right
- Back button takes user to the previous step
- Continue button take user to Summary page
MOBILE VERSION
Screenshot: 10_5_1.png
Screenshot: 10_5_2.png
Screenshot: 10_5_3.png
- Use consistent tab like Desktop version: Customers and Recents
- New Customer link placed below the tab
- Search input contacts need consistent like desktop look
- You can display the right content like on desktop to be placed on the bottom for mobile
- Wrap the content with border like desktop version
Summary
DESKTOP VERSION
Screenshot: 05_6.png
- This is how the Summary page will look
- Edit and Submit button placed on the right side
- Page divided by Step navigator on the left side and data user filled on the right side
- Edit and Submit button placed on the right side
MOBILE VERSION
Screenshot: 10_6.png
- This is the summary screen for mobile
- Make sure the content adapts fluid width
- When expanding each section there is a edit button placed on the right side
Client Priorities (The items that are considered highest prototype priorities)
- Great HTML/CSS conversion of the design
- Quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be consistent, pay attention to padding, margin, line-height, etc.
- Code Documentation
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements 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 HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and do not build different pages for different device/layout.
- 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 creating styles
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
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.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
- Chrome, Firefox and Safari on iPhone 4, 4s, 5, 5s, 6 and 6+ (Landscape & Portrait View)
- Chrome, Firefox and Safari on iPad (Landscape & Portrait View)
- Android Browser