Challenge Overview
Ladi Corporation is a global provider of equipment for the oil and gas industries. To help with forecasting billing and shipping dates and revenue for long-term contracts, they are developing a custom piece count forecasting tool that will reside within their Salesforce org. In this challenge we need your help to convert the provided wireframes into an HTML5 clickable UI prototype.
Competition Task Overview:
The main task of this competition is to develop an HTML5 prototype based on the provided wireframes. Your prototype must work properly in all the required browsers, for this challenge we are only focusing on desktop browsers.
Final Submission Guidelines
Key Requirements:
- We not provided storyboard design in PSD/AI format like common UI Prototype format. For this challenge you need build the layout based on wireframe layout.
- All pages of UI Prototype must support responsive design solution, for this challenge you ONLY support DESKTOP screen
- Set 980px as UI Prototype minimum width with fluid layout. You need make sure layout adapt the wider screen
- All pages on this prototype need linked each other.
- Base of prototype need created using Bootstrap.
- Use standard Bootstrap styling. Suggest best practice of Bootstrap implementation
- Re-create all icons in your prototype based on Bootstrap Icons
- Create interaction/functions by using Bootstrap component and Bootstrap Javascript
- Use JSON to load all datas
- All text inside every pages need to be editable
- Please use your best judgement about styling, and functions. Let us know if you need clarification about via challenge forum.
UI Prototype Requirements
Important!
- Replace header bar inside wireframe with Placeholder that show “Standard Salesforce Header Bar” text. Make sure the placeholder use fluid layout
- Check “ladi_axure_wires” for wireframe guideline
- The wireframes show the layout and functionality we want to see in the UI Prototype
- The below information walks you through how to Demo the wireframes to show the different functionality of each page in the Wires. The pages mentioned are the page names in the Page Notes of the wires. The step by step is not how it should be developed but rather how the wireframe is clicked through to show functionality.
- Apply consistent styling and function to all page elements!
1). Opportunity - No Products
- Shows the Opportunity page before any products have been added
- Use proper bootstrap styling for page title
- “[ SFDC OPPORTUNITY FIELDS HERE ]” can be placeholder
- The Forecast - No Products page is displayed
- Click on “View Forecast” button should take user to next screen
2). Forecast - No Products
- Shows the Forecast Page before any products have been added
- Opportunity Name take user to “Opportunity - Products”
- Change Add Products dropdown need take user to different screens
- Select an Option dropdown options
- Preconfigured PPL displays (Add Predefined Configuration page)
- Preconfigured Part Number (displays Add Part Number page)
- Preconfigured Service (displays Add Services page)
- Create Configuration (displays Add Custom Configuration)
- Copy from Opportunity (displays Opportunity Search / List in modal window)
3). Add Predefined Configuration
- Show proper Bootstrap styling for page title
- Keyword is a text input, show text placeholder
- Product Category is a dropdown
- Select IC option from Select a Product Category Dropdown
- Select SECTION A and SECTION C
- SECTION A need support multi-selection
- Do not select anything from the Assembly dropdown
- click ADD button
- Error Message displays (Use proper error styling)
- Select Assembly 1 from dropdown
- click ADD button
- Then table show up in the right side
- Use 3 columns to display all elements
- Click Remove link on the last row, need remove related row
- Click SAVE button need displays “FORECAST - NO SCHEDULE”
4). Add Part Number
- Type anything in the Keyword search box. Show text placeholder by default
- Select the item from multi-select
- Select an Assembly Name from the dropdown
- click ADD button
- Use 3 columns to display all elements
- Click Remove link on the last row, need remove related row
- Click SAVE button need displays “FORECAST - NO SCHEDULE”
5). Add Services
- Select two items from multi-selection
- Click ADD button
- Click SAVE to show FORECAST - NO SCHEDULE
6). Add Custom Configuration
- Select VALVE from the Group dropdown
- Select anything from Subgroup dropdown
- Click on the FILTER icon then the filter show up
- Inside the Filters, Model dropdown is multi-select option. User can check more than 1 option
- User able to close the filter
- For Size and Pressure, build the element using draggable range function.
- Other options are standard dropdown
- Click APPLY - note that the number next to Valve has decreased and there's now a Remove Filter link
- Click Remove Filter link need revert to default value
- User Doesn't see product in list and wants to Add Product
- User can pick more than 1 checkbox from Group selection
- Click on ADD link in table show up in the right side
- Attribute dropdown are displayed
- Quantity field is text input
- Click SAVE without select the assembly need show the error message
- Click SAVE to show FORECAST - NO SCHEDULE
7) Forecast - No Schedule
- This view is displayed after the user has added Products to an Opportunity but before they have added a Schedule to the Products
- Forecast Information section show on top of screen
- Product Forecast section need display the Collapse All and Expand All button
- Need create correct function that will Collapse and Expand all sections in the bottom
- Clicking the dropdown displays the various options to add products. Show correct flow like explained above
- Each bar show the arrow button, create function to expand and collapse related section.
- User can drag and drop to arrange each section order
- Drag function only need for section inside same level. Notice the section inside each table are draggable too
- All section collapsed by default
ASSEMBLY 1 - DARK GREY BAR
- Clicking Edit on the dark grey bar shows the top bar as editable and the Product Lines in that System as editable
- Match different form styling
- Update the invoice location, price/unit and delivery in months
- Click CANCEL need close the edit
- Click SAVE need capture data to header bar title
PRECONFIGURED PPL 1 - LIGHTER GREY BAR
- This is sub section
- Click on Edit to show the Product Lines as editable
- User can drag inside the table and change any value
- Click REMOVE on the Last row in the top list to see how that functionality behaves
- Click CANCEL
- Click ADD PRODUCT LINE to take user to “6). Add Custom Configuration”
SERVICE 1
- Scroll down to the Service 1 dark grey bar
- Click on the right arrow to expand the section
- click on the down arrow to collapse the section
DELETE ASSEMBLY
- On Assembly 1 Dark Bar, click Delete
- an Alert is displayed
- Click on either button to dismiss
ADD A FORECAST SCHEDULE
- Click on the calendar icon in the ASSEMBLY 1 dark bar to add a schedule
- “FORECAST - ADD SCHEDULE” will be displayed
8). Forecast - Add Schedule
- Displayed when a user clicks on the Calendar icon from an Assembly on the Forecast Page
COPY SCHEDULE
- Select a Schedule Name
- Click Copy Schedule button
- Schedules are displayed for two years
- Show table for both years
- There’s checkboxes for every row
- User can change the value of dropdown and input
RELOAD THE PAGE
ADD BOOK DATES
- Click ADD BOOK DATES
- Create Forecast modal window show up (Use Bootstrap Modal Window)
- Select the year and months
- Select All button, need select all months in every year
- Click Add a Year to show another row
- Click CONTINUE need show up the table
ADD SHIP DATES TO EXISTING BOOK DATES:
- Select any two rows
- Click ADD SHIP DATE TO SELECTED button
- Enter 2 for Number of Ship Dates
- Click ADD
- Another 2 rows show up in the bottom of table
SHIP TOTALS UPDATING
- Enter 5 in the first S2 Qty Ship box
- Enter 5 in the second S2 Qty Ship box
- S2 TOTAL updates as you enter the quantity shipped
- You need create the auto calculation function
- SAVE button take user to next page
9). Forecast - Schedule
- Displayed after user has created a schedule for an Assembly
- Forecast Information section show on top of screen
- Product Forecast section need display the Collapse All and Expand All button
- Need create correct function that will Collapse and Expand all sections in the bottom
- Clicking the dropdown displays the various options to add products.
- User can drag and drop to arrange each section order
VIEW PRODUCT SECTION SCHEDULE
- Go to PreConfigured PPL 1
- Click Product Name in the first row -- the schedule is displayed for that product
- Show table list in in the right side
- Each section need to be editable
- Click Product Name in the second row -- the schedule changed to show the different quantity
VIEW SERVICE SCHEDULE
- scroll down to the Service 1 configuration
- Click on the right arrow to expand
- There’s Service Name table in the bottom
EDIT SCHEDULE
- Click calendar icon on System 1 dark gray bar to display FORECAST - EDIT SCHEDULE
DELETE SCHEDULE
- Click delete button for each section
- An Alert is displayed
- Click on either button to dismiss
10). Forecast - Edit Schedule
- Displays the editable fields of a schedule
ADD BOOK DATES
- Some action buttons placed in the right side
- Page content show some rows in years format
- All buttons take user to “9). Forecast - Schedule”
- Click ADD BOOK DATES
- Create Forecast modal window show up
- Years/Months that are already on the schedule are displayed as Disabled
- Both button dismiss the modal
11). Opportunity - Products
- Display this page from Forecast - Schedule by clicking on the Opportunity Name
CHANGE BOOK DATE WITH ERRORS
- Click on the Date - January 1, 2016
- An error message is displayed
- Click on link in error message to view Forecast page with error message
- Show proper warning information
- Product table displayed in table format
- “Go to list (50)” is dead link
12). Forecast - Schedule Errors
- Click on the Calendar icon on the Assembly 1 Dark Grey Bar
- The Forecast - Edit Schedule page is displayed
- Show the error in top of table, and the error text for First Ship Date (“January 2016”)
- the user will then click on the calendar icon on the section with an error and be taken to next page
13). Forecast - Edit Schedule Error
- Displayed when there are conflicts in the Schedule dates
- Wireframe shows how the rows are highlighted to indicate a conflict
Browsers
- IE 10
- Safari Latest Version
- Firefox Latest Version
- Chrome Latest Version
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.
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.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- All CSS naming should not have any conflicts.
- As much as possible use CSS3 style when create all styling.
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.
- You are allowed to use jQuery for this challenge
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.