Challenge Overview
Contest Introduction:
Welcome to the Data Booklet Mobile App UI Prototype challenge! In this challenge, you will need to build the UI Prototype for the new Data Booklet Mobile application based on the screen designs and Wireframes that have already been created. This contest will produce the full UI Prototype for the new mobile application (PhoneGap based cross-platform mobile app for iOS and Android).
Project Introduction:
The client for this project has an existing PDF reference guide called "Your Guide to Industrial Gases and Cryogenic Fluids" that they would like to convert into a mobile application. Currently, salesman and customers use this PDF reference guide (see attached PDF file) that explains measurements and calculations of industrial gases and cryogenic fluid. The client has decided to convert this reference guide into a mobile application!
Converting this reference guide into a mobile application will allow salesman to discuss their products with their customers and use their "handy and useful" mobile application to search and show measurements, calculations and conversions to help explain a sale or their products. Customers could also use it as quick reference guide while at work or in the field. The client needs this mobile app to be cross-platform, and they have decided to go with PhoneGap / Cordova.
Tips for success!
- Asking questions early and getting PM's feedback is very important for the success of this competition.
- Raise questions if you feel anything is confusing, or if you have any questions on the provided documentation.
Primary Goals:
For this contest, we are asking you to put together the UI Prototype for the Data Booklet mobile application based on the screen designs and wireframes that have already been created. The attached storyboards and wireframes show the screens required for this application. A breakdown of the screens to submit for the contest is listed in the instructions below. The goal for this challenge is to create a UI prototype (must be built with AngularJS to fit the frontend technology stack) for the new Data Booklet mobile application.
General Requirements:
The following are general guidelines you must follow in building the prototype:
- Produce a UI Prototype that can be used to demonstrate all screens / mentioned functionalities as required in the wireframes.
- Your UI Prototype must fit the resolution to work on Android and iOS mobile devices. It should use a fluid layout since Android and iPhone have a variety of screen sizes.
- Only portrait screens are required (same as the Storyboard)
- Your design must represents all pages and flows from the Storyboard and Wireframes.
- Please check wireframe notes on each page to see the various interactions in those pages. You need to include those in your submission.
- Implement hover state for all buttons and links.
- All elements (such as the select boxes, radio buttons and checkboxes) should be based on the Storyboard. If any screen design elements cannot be styled the same way please confirm on forums if it is a big difference.
The following are specific requirements for HTML, CSS and JavaScript files:
- Please 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.
- 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 lay out your page. Only use table tags for tabular data and not for page layout.
- No inline CSS styles, all styles must be placed in an external stylesheet.
- 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".)
- 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 the JQuery JavaScript library for this contest.
- Pagination is required to be included where necessary.
- IMPORTANT: The prototype must be built with AngularJS to fit the frontend technology stack.
UI Prototype Pages:
The following pages should be included in your UI prototype:
1) Home Page
2) Gases
3) Converter
4) Gas Tanks and Cylinders
5) Gas Blends
6) Encyclopedia
7) Links and Resources
NOTE: If anything on these pages is unclear, please ask for clarification on the forum and we will be happy to help!
SCOPE: All the screens in the Wireframe / Storyboard are in scope.
Documents Provided:
- Storyboard / Screen Designs (and source files)
- Wireframes
NOTE: The Storyboard screens are the most recent so they take precedence over the wireframes.
Browsers and Standards:
Your submission must works on browsers in the list below:
- Firefox, Safari & Chrome Mobile Browsers
- Android Mobile Browser.
Secondard Requirements (nice-to-have). Note: eventually this mobile app may be expanded to run as a web app, so if possible the code should also try to support:
- IE9+
- Safari latest version
- Firefox latest version
- Chrome latest version
NOTE: The primary focus of this challenge should be on mobile browser support!
Final Submission Guidelines
Submit a zip file contains all HTML/CSS/JS/images and another required files into Online Review.