Challenge Overview

Welcome to SFDC Service Order - eCommerce Platform UI Prototype Challenge

The main task of this challenge is to create the SFDC Service Order - eCommerce Platform UI Prototype based on the provided PSD Storyboard design. UI Prototype will use Responsive Design solution that will works within Desktop/Tablet and Mobile Platform.  

For this challenge, we need you focus to create prototype that will fully work within DESKTOP platform.
In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges when improved the codes to support Tablet and Mobile version.



Final Submission Guidelines

IMPORTANT
- Sections within red border in attached screenshots should be separate HTML pages. You can load in iframes for this challenge submission.
- You can check provide sample screenshots of Salesforce Console where we'll be plugging in the prototype results using iFrame.These are mockups for from other application, so the data and layouts are different. But they show some standard Salesforce UI elements, such as the header, tabs, and sidebar components expanded/collapsed:
http://cirriussolutions.com/site/wp-content/uploads/2014/04/Multi-Component.png
http://blogs.salesforce.com/.a/6a00e54ee3905b883301901c2e16c9970b-pi
http://docs.releasenotes.salesforce.com/locqhlyifvwyruo.html/summer14/release-notes/release_notes/images/console_related_list.png
- All pages of SFDC Service Order - eCommerce Platform UI Prototype for desktop version must use fluid layout on any browser screen width.
- As possible we need all pages on this prototype linked each other.  Let us know if you need clarification about the flow.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.  
- Match All Fonts like on storyboard. Use @font-face technique.
- For this Desktop Version, suggest how hover state look for every buttons and links. Make sure the style not far off from our current theme.  
- All datas in separate must load from this separate folder "data/*.json", and use JavaScript to load the data. And use well-defined methods for retrieving the data, e.g. Order Summary section might have a getOrderSummary() and return a list of Product Objects, along with Order details.
- Minimum width for this prototype should be 1024px with responsive width solution for wider screen.

 

Documentation Provided
Order Entry Designs.zip - Storyboard Design

1. Search Result
screenshot: 1.Search-Result - Guides.png

Header
- This header should be fluid as browser width
- Logo and text should be image based
- Search input placed next to logo, when click search input or press enter should take to Search Result page
- “Manuel Nuer” is drop down menu. Show us how menu look. Make sure style look consistent with overall look.
- Help is clickable link. Put dead link for now
- “Sales Cloud” is drop down menu. Show us how menu look. Make sure style look consistent with overall look.

Main Navigation
- Main Navigation should be fluid as browser width
- For Search Result, you need show “Account” and “+” button.
- Create New Order button placed in the right side
- This main navigation also support sub menu below. You can see sample design here (screenshot: 3.Detail.png)

Footer
- This footer area should be fluid as browser width
- All Rights Reserved text placed in the left side
- Privacy and other links placed in the right side. Put dead link for now

Search Result
Note: Keep in mind, section with red border must load in separated HTML page via iFrame
- Whole breadcrumb bar area should not part of separated HTML page
- Breadcrumb placed on top left
- The last link not clickable, but previous links in breadcrumb clickable. Put dead links for them
- “Sort By Popular” is drop down menu. Show us how menu look.
- Grid view showing active state.
- List view icon is just dead link
- Items per page should load correct content. Simulate page when click other options.
- Make sure iframe height auto expanded when click items per page
- Sort Result area can use fixed width
- Search Result area should fluid as browser width. Thumbnails should auto move up when browser resized
- Sort Result area, need toggle function
- Match arrow design for expanded and collapsed state
- Match input for Price Range
- “$” character must always displayed when user start typing
- Compare List in top right must dynamically capture the selected Compare checkboxes in Search Result
- Thumbnail and title should link to Detail page
- Thumbnail can use img tag
- Rating star displaying below the title
- Colors option placed in the right side.  
- Price, match font style
- Size Dropdown, show sample menu look
- Color Dropdown, notice there’s rectangle for color in the right side. Show us how sample menu look
- Quantity input, should works by click up/down arrow also by type
- Add to Cart can be a dead link
- Click label should also checked on/off Compare checkboxes, and automatically count the numbers on Compare list on top
- Match other thumbnails content

2. Detail

 

screenshot: 3.Detail - Guides.png
- User landed on this page after click thumbnail or product title
- Match main navigation content, Add new Order1 menu
- Below main navigation displayed sub menu. Set Orders as active menu
- Checkout placed in the right side. Put dead link for now
- In the right side, there’s logout button. Put dead link for now
- These 4 sections below must loaded from separate HTML pages
- The right sidebar can be fixed width. Meanwhile, left content fluid as browser width

 

Product Details
- This product details information
- Breadcrumb should be part of this section when load in separate HTML. ignore border on screenshot
- When click each thumbnails should load image in bigger boxes
- Hover to zoom function must works
- Show Product Feed, put dead link for now
- Match product information content
- Choose Size & color is dropdown, show us how dropdown menu look
- Add to Cart can be a dead link
- Share via Social network icons should be dead link
- Create tab functions for “Product Details”, “Specification”, “Reviews” and “Discussions”
- Match active and inactive state for tabs menu
- Show some sample for each tabs

Product View History
- This section should have toggle function
- Both thumbnail and title are clickable. Put dead link for now

Order Summary
- This section should have toggle function
- Match thumbnails and product quick information
- Click “x” button should remove the order
- Match Total font properties

Other Similar Item
- This section should have accordion menu function.
- Other Similar Item expanded by default
- Match content for each row
- View More in the bottom right, put dead link
- Make sure iframe height auto expand when filled with more data

3. Delivery
screenshot: 5.Delivery - Guides.png
- This is Delivery page
- Left area should use fluid layout, and right side can use fixed width

Order Details
- Breadcrumb should be part of Order Details page
- Match breadcrumb content
- Edit, Clone and Delete button displayed in top right
- Add new Address can be dead link
- Match dropdown on Shipping Address
- Order Products, Shipping Method and Payment Method use toggle functions
- Order Products, Update Quantity will reflect to Price and total
- “X” button will remove the row
- Checkbox for “Send items as gift...”
- Add textarea for specific note for order
- Shipping Method, user can select checkboxes. Match selected and unselected checkboxes
- Payment Method, User can fill Gift Card Number and Credit card information
- Checkbox for “Save Card for Customer Account”

Order Summary
- This area should load in separate HTML page
- Match content and font properties
- Place Order can be dead link

Order History
- This area should load in separate HTML page
- This section should have accordion menu function.
- Match content for each row
- Track Order and Check Status are dead link
- “Store Locator” and “Console Title” also need include in separated HTML page

4. Link Order
screenshot: 6.LinkOrder - Guides.png
- This is Link Order page
- Basically this page use same layout like Delivery page
- Match content like storyboard design
- Match new shipping information columns
- Notice the differences on Order Invoice dropdown, Case Details and Note

Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
- Documentation of your prototype


CODE REQUIREMENTS:
HTML5

- 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.
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 don't build different page 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 create all styling.
- 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.

Javascript
- All JavaScript must not have a copyright by a 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.

Browsers Requirements
- IE9
- IE10
- Safari latest version on Mac & Windows
- Firefox latest version on Mac & Windows
- Chrome latest version on Mac & Windows

ELIGIBLE EVENTS:

2015 topcoder Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30046179