Challenge Overview
Welcome to the SunShot - Bright Harvest - Order Management Responsive Prototype Challenge! The goal of this project is to create a new system that automates current order management process.
For this challenge, the goal is to create the responsive HTML prototype based on the provided storyboard designs and requirements/instructions outlined in the Challenge Details section.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built. You are allowed to use Bootstrap and AngularJS for this challenge.
Final Submission Guidelines
The objective of this challenge is to build the responsive HTML5 prototype of this app by using industry standard best practices.
Primary Requirements:
1. Build all the pages mentions in the page requirements outlined below.
2. Layout & Devices
- The pages should be responsive. We don’t have specific storyboard for all page in each devices but the provided below should serve as guidelines for developing the pages in the required devices. We are not strict in implementing the other layout that are not provided. You will not be scored down unless the page is messed up or is significantly different from the provided layout guidelines. Ask in the forum for any clarifications.
- Small desktop, please refer to “04_Size 1024.png” for reference.
- Tablet, please refer to “05_Size 768.png” for reference.
- Mobile, please refer to “06_Size 320.png” for reference.
3. Fonts - use CSS font stack (Helvetica Neue, Helvetica, Arial) in your prototype.
4. Need to validate all form fields and show a message when there is an error.
5. Apply uniformed hover style for links and buttons.
6. Scrollbars - browser’s native/default scrollbar is preferred.
7. Use JSON files for creating dummy data.
8. Headers
- logo will be image via CSS.
- “Welcome...” text when hovered will show a standard pull down menu with link to logout.
Page Requirements:
The following are the pages and functionalities needed for this challenge.
1. Login
- Please refer to 01-1_Login.png for reference.
- Validation error should show error on the field, refer to 01-3_Login_Error.png for reference.
- Login using “client” username leads to Client Project List page.
- Login using “admin” username leads to Admin Project List.
1.1. Forgot Password
- Forgot password link leads to this page.
- Please refer to 01-4_Login_Forgot Password.png for reference.
1.2. Register
- Clicking the Register button will open this modal screen.
- Refer to 01-2_Login_Register.png for reference on this modal screen.
- On successful registration, redirect to Client Project List page
2. Client Project List
- Please refer to 02-1A_Client_Project List.png for reference.
- Implement table sorting. Default table sort is Updated column, most recent on top.
- Implement table pagination.
- Add New Project button leads to Client New Project page.
- Table cell text should be truncated using CSS text-overflow:ellipsis
- Remove the arrow down located in the lower right part of each table header.
- Project name leads to Client Project Details page.
- Highlight selected table row, please refer to 02-1B_Client_Project List_Select.png
- Table row when hover should also highlight the entire row, please refer to 02-1C_Client_Project List_Unselect.png
- Hovering on the notes cell will show a popover info, please note that the information on this popover window will show all the note logs of the project and not just the current displayed note in the cell. Please refer to 02-1F_Client_Project List_Full Note.png
- Cancel Selected when clicked will trigger a modal, please see details below.
- Edit Selected button leads to Client Edit Project page.
- Refresh icon will be dead link.
2.1. Cancel Selected
- This will be triggered when there is selected row and the Cancel Selected button is clicked.
- Please refer to 02-1E_Client_Project List_Cancel Selected.png for reference.
- Back button will cancel the operation and close the modal.
- Cancel Project button will close the modal and will change the selected project(s) status to “Canceled”.
- If the user entered the optional "Reason" text, this text should be appended to this note. For example, the if the text entered in the "Reason" text field was "No longer needed.", the Note would have the text "CANCELED. No longer needed." If the "Reason" is left blank, the Note would have the next "CANCELED. "
2.2. Search
- Search would ideally work like autocomplete, showing an updated list of matching project names and addresses in a dropdown menu below the search field as the user types.
- If the user selects an item from the list the application should display the Client Project Detail Page.
3. Client Project Details
- Please refer to 02-2_Client_Project Detail.png for reference.
- Table rows are collapsable/expandable, please refer “Expanded Row” for details when the row is expanded.
- “Request Revision” button displays same modal popover dialog as "Add note" except the Submit button is labeled "Request revision". Upon submission, the “Request Revision” button will be changed to "Revision requested" with gray button style (see “cancel” button in 02-5_Client_New Project.png).
- Make sure that only 1 row can be selected at a time.
- Hide Selected button will hide selected row.
- Show Hidden button will show hidden row.
3.1. Expanded Row
- Please refer to 02-3_Client_Project Detail_Expand.png for reference.
- PV Layout maximum rows is 5, use scrollbar if rows are more than 5.
- Duplicate Selected button will duplicate the selected row and appended to the PV Layout table.
- Hide Selected button will hide selected PV Layout row.
- Show Hidden button will show hidden PV Layout row.
- Option name will be dead link for now.
3.2. Client Notes
- Each list items should expand based on its content, do not truncate note text.
- “+” icon will launch the Add Note modal, please refer to 02-4_Client_Project Detail_Add Note.png for reference.
- Implement character counter.
- “Add Note” button will append the text to the Note list.
3.3. Attachments
- “+” icon will open a file dialog box for uploading file.
- Accepted file type are JPG, PNG, and PDF.
- Added file should display a preview/thumb of that file. If the file is PDF, show the PDF icon.
- “x” icon will remove the file from the list.
- Dragging files to the “Drag files here” section will prepend the file to the list.
- Clicking the file will open a modal displaying the full size of that file. Refer to 03-4A_Admin_Project Detail_Picture View.png for reference on the style of the modal.
4. Client New Project
- Please refer to screens: 02-5 to 02-11 for references.
- Ellipsis icon as shown in 02-9_Client_New Project_Upload Setting.png will open Google Drive account information. Use dead link for the “Change Account”.
- Inverter efficiency has the following options: Unknown, 90, 90.5, 91, 91.5, 92, 92.5, 93, 93.5, 94, 94.5, 95, 95.5, 96, 96.5, 97, 97.5, 98, 98.5
- Implement file upload by drag and drop. “Select Files” will open a File Dialog box.
- Accepted file type are JPG, PNG, and PDF.
- Added file should display a preview/thumb of that file. If the file is PDF, show the PDF icon.
- Files should be displayed in 3 columns per row.
- Validate Required fields as needed, show error when validation fails. Refer to 02-11_Client_New Project_Incomplete Error.png for reference.
- "Save" button leads to Client Project List page.
5. Client Edit Project
- Use the same layout and functionality of “Client New Project” page.
- Pre-filled each fields with sample dummy data.
6. Admin Project List
- Please refer to 03-1A_Admin_Project List.png for reference.
- This page is based on the Client Project List page with a few changes.
- Default sort should be Due timestamp.
- Client Status, BHS Status, and Initial columns will have the ability for the admin to select value via the dropdown fields. Please refer to 03-1B_Admin_Project List_Status Set.png, only the Initial column that has no color box in the options.
- Project Name link leads to Admin Project Detail page.
- Refresh icon will be deadlink.
6.1. Filter
- Filter results checkboxes allow user to hide records based on their Client Status.
- Default settings are shown in 03-2_Admin_Project List_Filter.png.
- Dynamically apply filter results on checkbox change event.
6.2. Search
- Search would ideally work like autocomplete, showing an updated list of matching project names and addresses in a dropdown menu below the search field as the user types.
- If the user selects an item from the list the application should display the Admin Project Detail Page.
7. Admin Project Detail
- Refer to 03-3_Admin_Project Detail.png for reference.
- This will have similar functionality as with the Client Project Detail page with other details outline here.
- Apply the same search functionality mentioned in the Admin Project List page.
- Delete Selected button will remove the selected row.
- Delete Selected button inside the expanded row will only delete the selected row within that expanded row.
- Edit Selected button will open Upload Model modal (see below).
- Pre-filled each fields with sample dummy data
7.1. Upload Model
- When this button is clicked, it will show the Upload Model modal. Please refer to 03-4B_Admin_Project Detail_Upload Model.png
- Implement drag and drop files.
- Delivery date should be datepicker.
- Delivery time should be custom timepicker.
- Upload button will dynamically add the new model to the site model list and will close the modal.
7.2. Internal Notes
- Edit Selected will open Add Note modal with note text pre-filled except "Add Notes" modal header will change to "Edit Note" and "Add Note" button will be "Save Note".
- Delete Selected will remove the selected internal note.
7.2. Client Notes
- Edit Selected will open Add Note modal with note text pre-filled except "Add Notes" modal header will change to "Edit Note" and "Add Note" button will be "Save Note".
- Delete Selected will remove the selected client note.
7.4. Attachments
- Same functionality mentioned in the Client Project Detail page.
8. Admin Manage User
- Please refer to 03-5_Admin_Manage User.png
- This page will come from by clicking the “Manage Users/Companies” in the header.
- Make the “Manage Users/Companies” text in active state instead of “Queue”.
- Add New button will show a dropdown as shown in 03-6_Admin_Manage User_Add New Option.png
- Company names and User names open "Add New User" and "Add New Company" modals described below with data pre-filled and "Add" in header/button text changed to "Edit" and "Save".
- “x” icon will remove the particular record.
- Pencil Icon will open same modal as clicking name (see above).
- Remove the search icon for this page.
8.1. Add New User
- Please refer to 03-7_Admin_Manage User_Add New User.png for reference.
- Create User button will dynamically add the new user to the user table and will close this modal.
8.2. Add New Company
- Please refer to 03-8_Admin_Manage User_Add New Company.png for reference.
- “+” icon dynamically adds a dropdown field at the bottom of the list with options to select users (email address format). When user select an option, remove the dropdown field and add the selected option on the Members’ list.
- Red “x” icon will remove an email.
- Implement drag and drop file upload.
- “Create” button will dynamically add the new company to the Company table and will close this modal.
Browser Compatibility
- IE9+
- Latest Google Chrome (Windows & Mac OS)
- Latest Safari (Mac OS)
- Latest Firefox (Windows & Mac OS)
- iPad - (Safari & Chrome)
- iPhone - (Safari & Chrome)
HTML
- HTML should be valid HTML5 compliant.
- 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 "-" to separate multiple-word classes (i.e.. "main-content")
- 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.
CSS
- CSS code should be valid level 3.
- 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 CSS 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.
- Use variables with well-chosen names. Use some sort of naming convention.
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.
- You are allowed to use AngularJS library 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.
- Use separate retina images/file for retina display.
Submission Guidelines
A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.