SFDC Service Order - eCommerce Platform Prototype Challenge

Welcome to the Service Order - eCommerce Platform UI Prototype challenge, brought to you by Salesforce.com!

We are looking to create a simple, efficient, and intuitive UI that will appeal to large B2C retail organizations that need the ability to sell and serve from within the same application.  We will ultimately build out a UI within Salesforce.com to take advantage of their omni-channel capability, providing an effortless experience for agent and customer alike.

Challenge Goal
The main task of this challenge is to create a standalone HTML UI Prototype based on the provided PSD Storyboard designs. The UI Prototype will use a Responsive Design solution that will work within Desktop resolutions.   Please follow best practices and make your prototype easy to update if in the future we need to modify or extend it.

Overview
Overall, we have 4 main pages to build out.  Within those pages, we have 1-4 sub components.  Here’s a preview of the 4 main pages:

Getting Started

1. Log into our sample Salesforce.com org to preview the “Service Order Entry” Console, and get an idea of where we'll be able to import your HTML pages. Your pages will be used to create custom detail pages, as well as custom sidebar components.   See Forums for more details on navigating our Salesforce platform. Note: You will not be deploying to Salesforce, but rather it is here for a reference.  Your solutions will be strictly HTML/JS/CSS.

2. Review our annotated screenshots with red borders.  Each section within a red border should be a separate HTML page.  You can load each section in iframes for the challenge submission. This will help us merge your solution into our SFDC org in the different sections.

IMPORTANT

1. All pages of SFDC Service Order - eCommerce Platform UI Prototype for desktop version must use fluid layout on any browser screen width.

2. As possible, we need all pages on this prototype linked each other.  Let us know if you need clarification about the flow.

3. All form input on every page MUST follow storyboard design and look consistent across required browsers.

4. Match All Fonts like on storyboard. Use @font-face technique.

5. For this Desktop version, suggest how hover state would look for every button and link. Make sure the style is not far off from our current theme.

6. All data must load from separate “data” folder, using .json files (e.g. "data/*.json"). Use well-defined JavaScript methods to retrieve the data. For example, Order Summary section might have a getOrderSummary() and return a list of Product Objects, along with Order details.

7. Minimum width for this prototype should be 1024px with responsive width solution for wider screen.

Documentation Provided

• Order Entry Designs.zip - Storyboard Design

Required Pages

In summary, we will have 4 pages, with 1-4 sub-components in each page.  High-level, they are as follows:

1. Search Results

2. Product Details

   1. Details

   2. Product View History

   3. Order Summary

   4. Other Similar Items

3. Delivery

   1. Order Details

   2. Order Summary

   3. Order History

4. Link Order

   1. Order Invoice / Case Details

   2. Order History

General - All Pages

screenshots: 1.Search-Result.png, 3.Detail.png, 5.Delivery.png, 6.LinkOrder.png

Header

1. This header should be fluid as browser width

2. Logo and text should be image based

3. Search input placed next to logo, when click search input or press enter should take to Search Result page

4. You can ignore “Manuel Nuer” drop-down menu, Help link, and “Sales Cloud” drop-down menu for now.

Main Navigation

1. Main Navigation should be fluid as browser width

2. For Search Result, you need show “Account” and “+” button.

3. Create New Order button placed in the right side

4. This main navigation also supports sub menu below. You can see sample design here (screenshot: 3.Detail.png)

Footer

1. This footer area should be fluid as browser width

2. All Rights Reserved text placed in the left side

3. Privacy and other links placed in the right side. Put dead link for now.

1. Search Results

screenshot: 1.Search-Result - Guides.png

Note: Keep in mind, section with red border must load in separated HTML page via iFrame

1. Whole breadcrumb bar area should be part of separated HTML page

2. Breadcrumb placed on top left

3. The last link not clickable, but previous links in breadcrumb clickable. Put dead links for them for now

4. “Sort By Popular” is drop down menu. Show us how menu would look

5. Grid view icon showing active state

6. List view icon is just dead link

7. Items per page should load correct content. Simulate page when clicked other options (can replace “25, 50, 200” with smaller numbers to mimic behavior, e.g. “6, 12, 24”)

8. Make sure iframe height auto expanded when click items per page

9. Sort Result area can use fixed width

10. Search Result area should fluid as browser width. Thumbnails should auto move up when browser resized

11. Sort Result area, need toggle function

12. Match arrow design for expanded and collapsed state

13. Match input for Price Range. “$” character must always displayed when user start typing

14. Compare List in top right must dynamically capture the selected Compare checkboxes in Search Result

15. Thumbnail and title should link to Detail page

16. Thumbnail can use img tag

17. Rating star displaying below the title

18. Colors option placed in the right side

19. Price, match font style

20. Size Dropdown, show sample menu look

21. Color Dropdown, notice there’s rectangle for color in the right side. Show us how sample menu look

22. Quantity input, should works by click up/down arrow also by type

23. Add to Cart can link to “5.Delivery.png” page

24. Click label should also checked on/off Compare checkboxes, and automatically count the numbers on Compare list on top

25. Match other thumbnails content

2. Product Details

screenshot: 3.Detail - Guides.png

This is the product details information page.

1. User landed on this page after click thumbnail or product title

2. Match main navigation content, Add new Order1 menu

3. Below main navigation displayed sub menu. Set Orders as active menu

4. Checkout placed in the right side. Link to “5.Delivery.png” page for now

5. The right sidebar can be fixed width. Meanwhile, left content fluid as browser width

6. These 4 sections below must loaded from separate HTML pages:

A. Details

1. Breadcrumb should be part of this section when load in separate HTML. ignore border on screenshot

2. When click each thumbnails should load image in bigger boxes

3. Hover to zoom function must works

4. Show Product Feed, put dead link for now

5. Match product information content

6. Choose Size & color is dropdown, show us how dropdown menu look

7. Add to Cart can link to “5.Delivery.png” page for now

8. Share via Social network icons should be dead link

9. Create tab functions for “Product Details”, “Specification”, “Reviews” and “Discussions”

10. Match active and inactive state for tabs menu

11. Show some sample for each tabs

B. Product View History

1. This section should have toggle function

2. Both thumbnail and title are clickable. Link to “3.Detail.png” page for now (current page).

C. Order Summary

1. This section should have toggle function

2. Match thumbnails and product quick information

3. Click “x” button should remove the order

4. Match Total font properties

D. Other Similar Items

1. This section should have accordion menu function

2. Other Similar Item expanded by default

3. Match content for each row

4. View More in the bottom right, put dead link

5. Make sure iframe height auto expand when filled with more data

3. Delivery

screenshot: 5.Delivery - Guides.png

This is the Delivery page.

1. Left area should use fluid layout, and right side can use fixed width

A. Order Details

1. Breadcrumb should be part of Order Details page

2. Match breadcrumb content

3. Edit, Clone and Delete button displayed in top right

4. Add new Address can be dead link

5. Match dropdown on Shipping Address

6. Order Products, Shipping Method and Payment Method use toggle functions

7. Order Products, Update Quantity will reflect to Price and total

8. “X” button will remove the row

9. Checkbox for “Send items as gift...”

10. Add textarea for specific note for order

11. Shipping Method, user can select checkboxes. Match selected and unselected checkboxes

12. Payment Method, User can fill Gift Card Number and Credit card information

13. Checkbox for “Save Card for Customer Account”

B. Order Summary

1. This area should load in separate HTML page

2. Match content and font properties

3. Place Order can link to “6.LinkOrder.png” page for now

C. Order History

1. This area should load in separate HTML page

2. This section should have accordion menu function

3. Match content for each row

4. Track Order and Check Status are dead links for now

5. “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.

1. Basically this page use same layout like Delivery page

2. Match content like storyboard design

3. Match new shipping information columns

4. Notice the differences on Order Invoice dropdown, Case Details and Note

Client Priorities

The items that are considered highest prototype priorities to the client are:

1. Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.

2. All elements should be Pixel Precisions, pay attention to padding, margin, line-height, etc.

3. Matching the storyboards (as close as possible) across the required browsers.

4. Documentation of your prototype

5. Main focus on red-bordered section from screenshots.