Challenge Overview
Challenge Introduction:
Welcome to eCheck Admin UI Prototype Challenge. In this challenge we are looking for your help to create a prototype based on the provided storyboards.
As part of this challenge we need you to document your HTML5 and CSS3 (using best practices). We are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development. We will allow documentation updates during final fixes (but still required).
At the of this challenge, we need a solid UI prototype using best coding practice/solutions. Good luck and we’re looking forward to your submissions!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
UI Prototype Considerations:
- Please find all required assets in the forums!
- Ensure your submission is clear of validation errors and warnings (HTML & CSS).
- Please use proper id’s and classes in your naming conventions.
- Please use Angular 2 and follow John Papa’s style guide (or) use Angular 1 (NOTE: We will be adding an additional BONUS prize of $500 for the winner who do the prototype using Angular 2).
- Provide unit tests using Mocha and Chai with 100% unit test coverage.
- Use JSON for mock data
- Create model classes for the data
Required Screens:
We need below screens and interactions in the prototype.
00 Header & Navigation:
- In the header, clicking on logo should take them to eCheck Configuration (01_Default Screen.jpg), provide an easy way to replace the logo.
- Clicking on the logout icon (shown on the right) should take them to 21_Thank You Screen.jpg
- Provide a link in “21_Thank You Screen.jpg” with the text “Visit Again”, clicking on it should take the user back to 01_Default Screen.jpg
Navigation:
eCheck Configuration should take to 01_Default Screen.jpg
Process should take to 02_Process.jpg
Product SKU should take to 07_Product SKU List.jpg
Equipment Type should take to 14_Equipment type.jpg
Equipment should take to 16_Equipment.jpg
eCheck Inspection should take to 19_Inspection List.jpg
01 eCheck Configuration
Reference: 01_Default Screen.jpg
- This shows the list of configurations
- User will be able to sort through the list (please implement this)
- Search button can be dead link.
- Show us how the pagination will work, please implement this as below:
<< - this should take the user to the first page
< - this should take the user to previous page
> - this should take the user to the next page
>> - this should tale the user to the last page
Changing the numbers in the drop-down should change the number of records thats being displayed.
02 Process:
Reference: 02_Process.jpg
- This screen allows the user to view the list of process with options to edit and
- User will be able to add a new process by clicking on ‘+ Add Process’ (03_Add Process.jpg)
- Search button can be dead link
- Show the pagination, please implement this
- Hovering over ‘modify;’ icon should show the tooltip ‘Modify’ as shown in 02_Process.jpg (note: this feature need to be repeated in all screens where we have action items like modify or delete).
- Clicking on “Modify” icon will show a view similar to Add process (03_Add Process.jpg) but the field will already be auto-populated - it works in the same way as add process!
Add Process:
- User will be able to enter the process description
- Clicking on “Save” without entering anything will show the error (04_Add Process Error.jpg)
- Clicking on “Cancel” will hide the modal window.
- Entering something, click on save to show this error 05_Modify Process Error Exist.jpg
- Clicking on save again will show the success message (06_Process Successfuly Created.jpg) for a few seconds (say 30 seconds) and hides the message
03 Product SKU:
Reference: 07_Product SKU List.jpg
- This shows a list of product SKU’s
- User will be able to sort through the list.
- Show the pagination, please implement this
- Search button can be dead link.
Product SKU Details:
Reference: 08_Product SKU Details.jpg
- User will click on the “modify” icon to start editing, just need to change it to editable fields (09_Product SKU Detail Edit.jpg)
- Clicking on the ‘+ Add Product SKU’ will show the 10_Product SKU Detail Add New Product.jpg
- Search button can be a dead link for now.
Add New Product SKU
Reference: 10_Product SKU Detail Add New Product.jpg
- Clicking on ‘Save’ will show the add equipment button / and option to edit this as shown in 11_Product SKU Detail Add Equipment.jpg
- Clicking on ‘modify’ icon will show the fields as editable (similar to adding a new product sku).
- Clicking on “Add equipment” button in 12_Product SKU Detail Add Equipment Selection.jpg will show 13_Product SKU Detail Done Adding Equipment.jpg
- User will be able to choose the equipment type from the drop-down (you can use these values for the drop-down: Weldom Pump, Tubing, Beaker, Level Sensor), after choosing - user clicks on ‘save’ to save the equipment, clicking on ‘edit’ icon will again show the drop-down with save and cancel button
04 Equipment Type
Reference: 14_Equipment type.jpg
- This shows the list of equipment types
- User will be click on ‘modify’ icon to edit the equipment type
- Search can be a dead link
- Show the pagination, please implement this
- Clicking on ‘+ Add Equipment Type’ should show 15_Add Equipment Type.jpg
Add Equipment:
- This will show the required fields to be entered
- Clicking on save or cancel will hide the model window
05 Equipments:
Reference: 16_Equipment.jpg
- This shows the list of equipments
- User will be click on ‘modify’ icon to edit the equipment
- Clicking on ‘delete’ icon will show 17_Delete Sample.jpg, within the delete window, clicking on ‘delete’ or ‘cancel’ will hide the pop-up.
- Search can be a dead link
- Show the pagination, please implement this
- Clicking on ‘+ Add Equipment’ should show 18_Add Equipment.jpg
Add Equipment:
Reference: 18_Add Equipment.jpg
- This will show the required fields to be entered
- For the Equipment Type drop-down, you can use these values (Weldom Pump, Tubing, Beaker, Level Sensor)
- Clicking on save or cancel or close icon will just hide the modal window.
06 eCheck Inspection:
Reference: 19_Inspection List.jpg
- This shows the list of inspections that were made
- Clicking on the Product SKU will take the user to 20_Inspection List Details.jpg
- Table is sortable
- Show the pagination, please implement this
- Search can be a dead link
07 Inspection Details:
Reference: 20_Inspection List Details.jpg
- This will show the inspection details
- Clicking on back button will take the user back to inspection list 19_Inspection List.jpg
- Print button can be dead link
- There will be a comment textarea.
- Follow the rest of the contents from the storyboard
Client Priorities (The items that are considered highest prototype priorities)
- Code Documentation- 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.
Specific HTML/CSS/JavaScript 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.
Device Requirements:
- Latest Chrome, Safari, Opera, Firefox, Internet Explorer
Provided Assets:
- Storyboard and Screenshots are provided in challenge forums.
- Invision Link to the prototype
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.