Challenge Overview
Welcome to "Product Inventory Audit Tool UI Prototype Challenge". The goal of this challenge is to create Responsive HTML5 Prototype for our Product Inventory Audit Tool Application. The prototype must follow the best practices for coding Responsive applications. This challenge is the first prototype challenge to create the "Base" prototype that we can continue to develop with in future challenges.
NOTE: This application will need to use Bootstrap as it is part of our preferred frameworks.
As part of this challenge we need you to document your HTML5/CSS3/JavaScript code (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. As this challenge is a FAST challenge we will allow documentation updates during final fixes if needed.
Challenge Task Overview
Background Overview
Product Inventory is a web application that will be used by Quality Department team members to audit product availability against expected availability. Essentially, this app will be used to help employees figure out if a product is available and if not, the reasons why it is not. The web application will be used primarily on desktop but will need to be responsive and work on tablet and mobile as well.
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. We are focused on the "Desktop" view for this challenge. It is very important that you implement and use Bootstrap correctly so we can update the mobile views in a future challenge.
Tips for Success: Ask questions early and get the Copilot or PM's feedback is very important for everyone to be successful in UI Prototype challenges.
Key Requirements
- Focus on overall Bootstrap/great code structure.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- This new Portal will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops), but for now, focus only on Desktop version.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Apps Use Case
Quality Manager
- Get an inventory of all products that are currently being sold on the company web site.
- Able to find specific product brand and categories by selects a set of filters to expose only those products that fall within that selection criterion.
- Able to select which data fields (attributes) that would like shown as a result of the inventory query. We should be able to save his unique preferences (e.g. brand, category, ratings, etc.) as well as reset to original search settings.
- Able to see all attributes associated with a particular product, along with able to drill down into next level of details for a particular product to view all of the associated detail attributes for that product.
- Able to export and/or email the raw table so that he can run further analysis
- Able to understand if the product being sold on the ecommerce web site are being displayed with the correct features, accessories, options, etc.
- Able to use this application on a regular basis to spot check new products and compare them with existing product documentation.
Product Manager
- Ensure that the products that he/she is responsible for delivering to the marketplace are available for sale on the correct date.
- Able to configure the app to show the products in specific category, when they were added to the eCommerce site and validate that the product description, specs, etc. are all accurate.
Employees
- Able to help customer who is looking to purchase a new product and has a specific idea of what he is looking for. Employees can verify that the product is available and that the options and accessories are accurately represented on the web site.
- If employees has another customer who has heard about a new product that will soon become available. The customer can ask if that particular product is available and what options and accessories come with it. Our Employees should be able to verify that the product is on the e-commerce site and show his friend all of the relevant information.
- Able to help customer who wants to buy a specific product. The customer knows that the product comes in various colors and wants to know what these specific colors are. Our Employees then use the application to verify product availability in the color requested.
- Helping a customer understand if a product and/or accessory is available for purchase from the company web site. Customer was not able to find exactly what he was looking for when searching on the company web site and has asked our employees to assist his search.
- Able to see that the product in question was recently removed from the store. Pulls up the specifications for the discontinued product and points the customer to a similar product that is available.
- Able to emails the product information to customer directly from the app/web page which includes a link to the product on the eCommerce site.
Screen Requirements
01. Login Screen
- Reference Screen "04 Login.png"
- User will need to provide their credential to use this apps
- Provide error login scenario if user enter incorrect credential.
- Provide forgot password functionality, get the content from wireframes and use the storyboard look and fee to create these functionality.
- Correct credential will bring user to dashboard screen.
02. Dashboard Screen
- Reference Screens "01 Dashboard Screen.png", "01-2 Dashboard_Saved_Search.png", "01-3 Dashboard_Watched Items List.png"
- Once user successfully logged in to the application, they will be redirected to this screen.
- This screen will show summary of inventory information to the user.
- User needs to quickly see important information and updates to products that previously searched for.
- Notice there are 3 tabs available in the dashboard, they are Alerts (01 Dashboard Screen.png), Saved Search (01-2 Dashboard_Saved_Search.png), and Watched Items (01-3 Dashboard_Watched Items List.png)
- Once a user has saved a search, the results of these saved searches will populate the dashboard. This could mean displaying multiple searches at once, or a single search at once but users must have the ability to toggle between saved search results easily. Users will be presented with high-level data on alerts related to changes to the contents of their saved search.
- Presentation of saved search results:
-- Product list from saved search
-- Recent alerts/changes to the contents of your saved search (availability: available now: out of stock, coming soon, empty soon, etc.)
-- List of specific settings from this search
-- Export CSV of data. Native OS export options.
-- Search through search results data to further analyze results:
---- Sort by rating/review
---- Sort by date added
---- Sort by availability: available now, out of stock, coming soon, empty soon, etc.
---- Sort by quality: color, size, etc.
03. Search Screen
- Reference Screens "02 Search Screen.png", "02-1 Search_Screen_Box.png", "02-2 Search_Filter.png"
- This screen should provide an ability to quickly and easily begin finding products within a huge set of data.
- Notice that the search result will have 2 differents view, list (02 Search Screen.png) and thumbnail (02-1 Search_Screen_Box.png) view.
- Since there will be huge of data available here, we will need a strong filter to make sure the data that shown to user is the correct one (02-2 Search_Filter.png).
----Note: Micro-filters do not need to be implemented in this prototype "02-2 Search_Filter.png"
- User will be able to export the data to other applications (CSV files, etc).
- Need to be alerted to changes within the sets of data/products that the employees responsible for.
- Make sure to simulate the search result so user can find how the apps will filter the data.
- Notice there is a "save search" button in this screen, if user click this button after doing search filtering, this search criteria will be saved in the apps and appear in dashboard under tab "Saved Search"
04. Alerts/Notification Screen
- Reference Screen "03 Alerts_Notifications Screen.png"
- User need to stay up to date on the products that they are responsible for without having to repeatedly search for that information.
- User can see alerts/notification from the apps header.
- There should be a standalone page that listing all the notifications, re-use table layout in the dashboard to create the notification stand alone page.
- Reasons a product/search would receive an alert:
-- Product running low
-- Product out of stock
-- New product coming soon
-- New product available
-- New version of product
05. Product Detail Screen
- Reference Screens "05 Product detail Screen.png", "05-1 Product_detail_Tecnical_Spec.png", "05-2 Product_detail_Accesories.png".
- Once user found the products that he want to check, they can drilled down to that particular item to see the item details
- There are 3 kind of information will be shown in this screen, they are About Product (05 Product detail Screen.png), Technical Spec (05-1 Product_detail_Tecnical_Spec.png), and Accessories (05-2 Product_detail_Accesories.png)
06. Profile Screen
- Reference Screens "06 Profile_Screen.png", "06-2 Profile_Web Crawler.png", "06-3 Profile_Rebuild_Data_Base.png", "06-4 Profile_My_Profile.png"
- There are 4 tabs available in this screen, and they are Contacts (06 Profile_Screen.png), Web Crawler (06-2 Profile_Web Crawler.png), Rebuild Database (06-3 Profile_Rebuild_Data_Base.png), My Profile (06-4 Profile_My_Profile.png)
- Contacts tab will show list of other user in the apps, show their basic profile and how to contact them.
- Web Crawler tab will provide some tools to crawl particular pages of this apps so it can be easily added to user mapping list
- Rebuild Database tab will provide tools to repair user database (admin privileges)
- My Profile tab will provide your basic profile data. User can edit their data by clicking each fields (check wireframes for edit profile functionality)
07. Messages Sreen
- Reference Screens "07 Messages_Screen.png", "07-1 Messages_Write_New_Message.png", "07-2 Messages_Detail.png", "07-3 Messages_Replyl.png"
- Users can send each other messages within the app
- Needs to have Inbox to receive new message from other user that using the apps
- Needs to have New message feature to create message to other apps user.
- Needs to have feature where user can reply others email in the apps.
Specific HTML/CSS/JavaScript Requirements
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- 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 and Bootstrap framework for this challenge.
Browsers Requirements
- Chrome is a priority
- Latest Firefox, Safari & Chrome Browsers
- IE10++ (can be left for final fixes)
Documentation Provided
- Wireframes, Storyboard and All necessary flow documents can be found in forum!
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.