JCI Employee Safety Reporting Mobile App UI Prototype Challenge

Welcome to the JCI Employee Safety Reporting UI Prototype Challenge.

 

Project Overview

Johnson Controls is a global diversified technology and industrial leader serving customers in more than 150 countries, worldwide. The JCI BESafe mobile application initiative will allow BE JCI employees in Europe to be even more proactive about reporting and resolving safety issues. Employees will use their personal mobile devices to report safety issues and follow issue resolution progress.

 

Challenge Overview

We have successfully completed a Design challenge to prepare the designs for the front end. We are also in the middle of creating the backend server application to host the web based application.

This challenge is build the front end prototype. We will provide you with the winning design of the earlier challenge. Your task is to convert that to a HTML5/JS/CSS prototype and match the design as much as possible.

 

Challenge Details

The pages that need to be developed as part of the prototype can be found in the document titled “Screen Set Notes.pdf” - all attachments including the designs have been provided and can be accessed in the Downloads section.

 

 

Specific HTML/CSS/JavaScript Requirements
HTML/CSS Requirements:

1. Your HTML code must be valid HTML5 and follow best practices
2. 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.
3. 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.
4. No inline CSS styles - all styles must be placed in an external style-sheet.
5. Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
6. 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)
7. Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
8. Your code must render properly in all browsers listed in the scorecard in Android, iOS and Windows Phone environments.

Font Requirements:

1. You can embed fonts in your submission. Make sure you match all font properties as close as possible. If there are any proprietary fonts used in the design, you are free to use fonts that are similar. Just make sure that you get the spacing / padding and positioning correct and you maintain the existing look and feel of the designs.

JavaScript Requirements:

1. jQuery (make sure that these are under an AngularJS directive)
2. AngularJS
3. Bootstrap 3.*

Browsers Requirements:

1. Latest versions of Firefox, Chrome, Safari and IE for the following OS'es:
   1. Android 4.4+ (Firefox and Google Chrome)
   2. iOS 8+ (Firefox, Google Chrome and Safari)
   3. Windows Phone 8+ (IE)

Documentation Provided:

1. Storyboard Screens and PSD files can be found in the Downloads section.

Final Submission Guidelines

1. Before submitting, make sure that all requirements mentioned above have been met and also check out the “Points to Note” section.

2. Submit your application via the Submit and Review tool for this challenge.