Challenge Overview
Welcome to "Exousia SFDC Community Portal HTML5 UI Prototype Challenge"!
The main task of this challenge is to create the Community Portal UI Prototype based on the provided wireframes (showing functionality) and design storyboards (showing color and layout) that will use Responsive Design solution.
For this challenge, we need you focus to create Responsive UI Prototype that will fully work within DESKTOP version. 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.
We are looking forward to your participation in this challenge!
Final Submission Guidelines
Downloadable Files
exousia_wireframes.zip - Wireframe Layout and Flow
storyboards_jpg.zip & storyboards_psd.zip - Storyboard Design
Notes:
- All pages of UI Prototype must support responsive design solution, for this challenge you just need support the desktop screen size.
- Provided storyboard using 1280px width. Pay attention to width requirements explained below.
- Make sure all page elements adapt fluid environment
- Use Segoe UI as UI Prototype Font
- All pages on this prototype need linked each other.
- You MUST use AngularJS as base of this UI Prototype Framework
- You can also use jQuery for this UI Prototype library
- UI Prototype stylesheet need created using Bootstrap.
- For all tables and pagination for this challenge. Some of the tables need to support filtering, column sorting and pagination. You must use jQuery table plug-in from https://www.datatables.net/
- But, make you match table styling like provided storyboard look.
- Please use your best judgement about layout and functions. Let us know if you need clarification about via challenge forum.
UI PROTOTYPE PAGE REQUIREMENTS:
1). Landing Page
wireframe: Login
screenshot: ex-0-login-landing.jpg
- This is how Landing page look
- Each Landing page section background need use fluid background, while the content area use 1024px minimum width.
- Landing page divided by these sections:
Header
- Exousia logo placed on the left side can be dead link, you can use image based, we’ll swap in the future
- Header background need covered browser screen
Welcome Area
- Background image need covered all browser screen
- Welcome message displayed centered
- Login form placed below the Welcome message
- You need display text placeholder, on input focus, text need to be hidden
- Error Message is displayed when Login fails. (screenshot: ex-0-1-login-error.jpg)
- Display tooltips on the left side and inputs use orange colored border
- Username Field : required; format is name@domain.tld
- Password Field : required;
- Arrow Button : If Login is successful, display Home page. If Login fails, display error message
- Remember Me Checkbox : refers to the Username only; when user checks this box, the username input field will be prepopulated with their username each time they visit this page
- Suggest us how checked on look for Remember Me Checkbox checkbox
- Forgot your Password can be dead link
- Below the background image there’s blue bar with numbers and title
- Match content for each informations and make sure they placed centered
News
- News section use 4 columns layout
- News title on top and News description below
- News section need auto expand the height when filled with more characters
- News title & Arrow button on each news can be dead link
Footer
- Footer background need covered browser screen
- On the left side is for copyright text
2). Home Page
wireframe: Home_withMarketing
screenshot: ex-1-0-home.jpg
- Home page need use fluid width, you can set 1280px as minimum width
- Page divided by 2 columns Left Navigation and Main Content area
Left Navigation
- This left navigation can use fixed width
- Logo placed on top and not clickable. Use image based for the Exousia text, we’ll swap with correct logo in the future
- Left navigation background height need covered whole browser screen.
- By default all menus need to be collapsed
- Click on a section name to expand or collapse it
- Each section expands and collapses independent of the other sections.
- Section Names have a highlighted state which is also the rollover state
- Subnav Names have a highlighted state which is also the rollover state
Main Content Area
- Main content area need use fluid width
- Basically Main Content Area across the prototype pages consist of these following sections:
Header
- Header bar will consists Hello User, Customer, Account, Help and Search button
- Create how dropdown look, put some dummy options
- Hello User dropdown look (ex-1-4-dropdown-top-nav.jpg)
- My Settings & Logout button can be dead link
- Account dropdown look (ex-1-5-dropdown-selected.jpg)
- User blue color background for hover style for for all dropdown. Apply consistently on your prototype
- Help can be dead link
- Click Search button need display search panel (screenshot: ex-1-3-search.jpg)
- When search panel show up, left navigation and content area need covered with overlay background.
- On search panel There’s text placeholder. On input focus, text need to be clear
- Arrow button can be dead link
- Click X button need close the search panel
Main Content
- Main content area need use fluid width
Marketing Carousel:
- Marketing images will automatically rotate in the carousel;
- The carousel will have an indicator to show number of images;
- Indicator will highlight which image is being displayed;
- User can click on an indicator to move directly to that image
- Show different slideshow like storyboard look: ex-1-0-home-slide-2.jpg & ex-1-0-home-slide-3.jpg
Scorecard & Tasks:
- Scorecard consists of 2 boxes with progress circle
- Show animation on page load
- Configure can be dead link
- View task, in single box there’s Overdue and Upcoming information
- View Tasks Button for the prototype, this button is not functional
Shipments:
- Table can be sorted by clicking on a column header; default order for column sort is ascending
- By default, the table is sorted on Estimated Delivery Date in ascending order
- Shipment link: clicking the link displays the Shipment Detail modal window. Read more detail below.
- Confirm Delivery button, clicking the button displays text input field, and calendar (screenshot: ex-1-2-confirm.jpg)
- Save Date button placed on top right
- When user clicks on SAVE DATE button, the date they entered is displayed in the Actual Delivery Date column and the button is hidden. If no date was entered, display an error message that a Date must be entered
- User can navigate the month by press left and right arrows
- Selected date need captured on text input
- Use blue background circle shape for selected date.
- Click Save Date button need capture the selected value from date-picker dynamically without reload the page.
- More Shipments can be dead link.
Shipment Detail Modal Window
screenshot: ex-1-1-shipment-pop-up.jpg
- Displayed when user clicks on Shipping Number in main window
- Clicking the X button closes the window
- Tracking Number and ACN links are dummy links for prototype
- View order link closes the modal window and take user to Order Details page
- Shipment Page button is not functional for the prototype
- Close Window button closes the modal window
Notifications:
- Table can be sorted by clicking on a column header; default order for column sort is ascending
- By default, the table is sorted on Created Date in ascending order
- Notifications link is a dummy link for prototype
- Clicking the X icon deletes that row
- More Notifications can be dead link.
News:
- Displays up to 2 news/marketing items;
- Not all regions will have this section displayed so the page needs to work if this section is not visible.
- For the prototype, the vote button and read more links will not work
Footer
- Community Help link is a dummy link for the prototype
3). My Orders
wireframe: My_Orders
screenshot: ex-2-1-orders.jpg
Left Nav:
- Orders section is expanded, top level Orders is highlighted
- Subnav My Orders is highlighted
- Order section is not collapsable while a user is on any page in this section
My Orders Table
- Table can be sorted by clicking on a column header; default order for column sort is ascending
- By default, the table is sorted on Order Start Date in descending order
- Order Number will take user to Order Detail page
- There’s column for attachment with attachment icon
- Note the different text colors and icons for some of the Order Statuses
- Order Number : clicking the link displays Order Detail (for the prototype, link to Order Detail - Shipped)
Filter
screenshot: ex-2-2-filter.jpg
- On the left side, it’s text field for keyword
- On the right side, there’s 3 dropdowns for Filter Order Status, From Date and To Date.
- Arrow button: clicking the button refreshes the table with orders that match the filters and displays the filters being applied (screenshot: ex-2-3-filter-result.jpg)
- Users can remove an applied filter by clicking the X on the filter name; doing that will refresh the list to match the remaining filters
- Clicking clear all filters removes the applied filters and displays the default Order list
- Pagination placed on top of table
- There’s Previous and Next button to navigate the table
- When reach first page, Previous button become disable
- When reach last page, Next button become disable
- In the bottom of table there’s dropdown to display number of records per page
- Match options like storyboard look
4). New Order : Product
wireframe: New_Order_Product
screenshot: ex-3-1-new-order.jpg
Left Nav:
- Orders section is expanded and top level Orders is highlighted
- Subnav New Order : Product is highlighted
- Order section is not collapsable while a user is on any page in this section
Select Products for Order Section
- This section can collapse/expand; by default, the section is expanded
- This is collapsed look (screenshot: ex-3-5-collapsed-sections.jpg)
- Product Line dropdown:
-- Selecting an option populates the Brand dropdown
- Brand dropdown
-- By default, this dropdown is disabled until a Product Line is selected
-- Selecting an option populates the Sub-Brand dropdown
- Sub-Brand dropdown
-- By default, this dropdown is disabled until a Brand is selected
-- Selecting a Sub-Brand displays the Product Search fields and a Products table
Product Search Field
- This input box is an AutoComplete textbox. Clicking on the box displays drop down list of values.
- No storyboard provided, you can grab design from how dropdown options look
- User can filter the dropdown list by typing in text; the dropdown will show matching results
- note: on the wireframe, type in ‘Acm’ in the field to see matching results
Select Products for Order
- Table can be sorted by clicking on a column header; default order for column sort is ascending
- By default, the table is sorted on Product name in ascending order
- Product Link : clicking the Product link displays the Product Modal Window. Explained below
- Quantity field : OnLostFocus, the number entered in the Quantity Field is multiplied by the Qty. Min. number and the result is displayed in the Total Units column. Also, the result of the Total Units multiplied by the MRP is displayed in the Amount column
- Total Units, Amount and Totals, Needed for Order Minimum are updated based on number entered in Quantity fields
- Totals : by default, number for both columns is 0; as user enters Quantity, the totals for Total Units and Amount are updated
- Minimum Order Quantity : by default, the number displayed is the Minimum Order Quantity; as user Enters Quantity, this number is decreased until it reaches 0
- note: in the wireframe, enter 10 in the Quantity field on the first row to see how this interaction is expected to work
- We need you build calculator function when user filled quantity inputs
- After user filled Quantity in some rows, then total units reach 200. User can’t input text for another Quantity field
- If user delete completed value from quantity, Total units need automatically reflect the changes
Add to Order button :
screenshot: ex-3-2-add-error.jpg
- If no number is entered for Quantity, display an error. You can use red border for all Quantity input
- If no error, display the Products Added to Order Section and Other Information section
- Update the table under Select Products for Order to show remaining products that were not added to the Order
Products Added to Order section
- Section can collapse/expand and by default, is displayed expanded
- Product Table displays the products added to the order
- Products Table is sorted by product name is ascending order
- Products Table can be sorted by clicking on a column header; default order for column sort is ascending
- Product Link : clicking the Product link displays the Product Modal Window
- Quantity input boxes are editable
- Total Units and Amount will be auto calculated based on the Quantity value.
- X icon : clicking the icon removes the row from this table and adds that Product as a row to the table in the section above (Select Products for Order). The totals in both tables will be updated
- note: on wireframe, click the X icon on the first row to see how this works
Other Information Section
- Section can collapse/expand and by default, is displayed expanded
Discounts
- Table is sorted by Amount Available in descending order
- Name and Amount Available are sortable columns; clicking on the column header sorts the table by that column; default order for column sort is ascending
Shipping Information
- Account Lead Time - clicking the ? icon displays popover help text (ex-3-3-tooltips.jpg)
- Requested Delivery Date : clicking the calendar icon displays calendar; clicking a date on the calendar populates the input field
Attachments
- After select file from file browser, return name to the list
- For this page just need 1 list only.
Buttons
- For the prototype, Save as Draft and Cancel will do nothing
- Review Order will display the error message if not meet minimum order (screenshot: ex-3-4-review-error.jpg)
Product Detail Modal Window
screenshot: ex-5-products_pop-up.jpg
- Displayed when user clicks on product link from another detail page
- Clicking the X button closes the window
- Product Page button is not functional for the prototype
- Close Window button closes the modal window
5). Order Detail
wireframe: Order_Detail_Shipped
screenshot: ex-4-order-details.jpg
Left Nav:
- Orders section is expanded and top level Orders is highlighted
- Order section is not collapsable while a user is on any page in this section
- Clone Order and Create a Claim buttons will do nothing for this prototype
Order Detail Information
- This area contains 3 columns for Order Information, Order Summary, and Shipping Information
- Match content for each columns
Products Table
- Table is sorted by product name is ascending order
- Table can be sorted by clicking on a column header; default order for column sort is ascending
- Product link displays Product Detail modal window (screenshot: ex-5-products_pop-up.jpg)
- Amount link and Estimated Delivery Date link are dummy links for this prototype
Shipments Table
- Table is sorted by Estimated Delivery Date in descending order
- Table can be sorted by clicking on a column header; default order for column sort is ascending
- Shipment link: clicking the link displays the Shipment Detail modal window
- Filter by dropdown does nothing for this prototype
- Confirm Delivery button: works the same way as it does on the Home Page
Expand Row:
- Clicking the Expand icon displays the hidden row
- Clicking the Collapse button on that row hides it
- Refer wireframe from expanded text information.
Discounts Table
- Table is sorted by Name in ascending order
- Table can be sorted by clicking on a column header; default order for column sort is ascending
Invoices Table
- Invoice link is a dummy link for this prototype
Add Attachments Table
- Filename.txt is a dummy link for this prototype
- Clicking X icon deletes the row
- Clicking ‘add attachment’ link displays add attachment fields and buttons
- Add Attachment fields:
- Clicking the ‘add new attachment’ link adds another File Upload row
- Clicking the Add Attachment button adds a row to the Attachment table with the new file name displayed
6). New Warranty
wireframe: New Warranty
screenshot: ex-6-warranty.jpg
- Placeholder for this prototype (OUT OF CHALLENGE SCOPE)
- Contains a link to view the Warranty Detail
Left Nav
- Support section is expanded and top level Support is highlighted
- Subnav Warranties is highlighted
- Support section is not collapsable while a user is on any page in this section
7). Warranty Detail
wireframe: n/a
screenshot: ex-7-warranty-detail.jpg
Left Nav
- Support section is expanded and top level Support is highlighted
- Support section is not collapsable while a user is on any page in this section
Warranty Information
- Credit Memo link is a dummy link for this prototype
- Manifest Link is a dummy link for this prototype
Product Information Table
- Table is sorted by product name is ascending order
- Table can be sorted by clicking on a column header; default order for column sort is ascending
- Product link displays Product Detail modal window
- The icons are not clickable for this prototype
Warranty Comments
- This area contains single textarea
8). My Products
- Placeholder for this prototype (OUT OF CHALLENGE SCOPE)
- Contains a link to view the Product Detail
Left Nav
- Products section is expanded and top level Products is highlighted
- Subnav My Products is highlighted
- Products section is not collapsable while a user is on any page in this section
9). Product Detail
wireframe: Product_Detail
screenshot: ex-8-product.jpg
Left Nav
- Products section is expanded and top level Products is highlighted
- Products section is not collapsable while a user is on any page in this section
- For the prototype, the Add to New Order button and Add to Draft Order button will not work
Main Content Area
- Product thumbnails placed on the left side
- Product information on the right side
- You also need put Product Detail, Technical Information, and Size Information
- Put dead link for Image text under Technical information
10). Campaigns
wireframe: n/a
screenshot: n/a
- Placeholder for this prototype (OUT OF CHALLENGE SCOPE)
- Contains a link to view the Campaign Detail
Left Nav
- Advisory section is expanded and top level Advisory is highlighted
- Subnav Campaigns is highlighted
- Advisory section is not collapsable while a user is on any page in this section
11). Campaigns Detail
wireframe: Campaign_Detail
screenshot: ex-9-1-campaign.jpg
Left Nav
- Advisory section is expanded and top level Advisory is highlighted
- Subnav Campaigns is highlighted
- Advisory section is not collapsable while a user is on any page in this section
Main Content Area
- Campaigns area consists of 5 columns
- User can toggle each buttons
- Inactive button use transparent style
- Active button not use transparent style
- On active button, list of Campaigns items show up in the bottom
- Use grey colored background for hover style
- For now all list can be dead link
- Download all medias button can be dead link
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 consistent, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers.
CODE REQUIREMENTS:
HTML/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.
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.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser