Challenge Summary
Welcome to the JCI Employee Safety Reporting Mobile App Design Challenge.
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.
Note: The winner may be asked to complete a secondary task (for additional payment), to create the application desktop icon (template).
JCI is excited to see what our designers can do.
Good luck on this challenge!
Round 1
Submit your initial designs for Checkpoint Feedback:
3. Home Screen
4. New Safety Report Screen
- Feel free to add additional screens which are necessary to explain your concept or show alternate states of design elements.
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs with all Checkpoint Feedback implemented:
1. Login Screen
2. App Settings Screen
3. Home Screen
4. New Safety Report Screen
5. Report History Screen
6. Report Detail Screen
- Feel free to add additional screens which are necessary to explain your concept or show alternate states of design elements.
- Notes.jpg: Please note any comments about your design for the Client
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
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. The final application will be available in both Apple and Android app stores. As there is no separate version for tablets vs phones, your design should be responsive and translate well on any display device / screen size.
Design Considerations:
- Super simple and easy to use. Clear and streamlined navigation and user flows. This is VERY IMPORTANT!
- Looking for modern, clean and intuitive UI
- Design elements should be FLAT (no drop shadows / gradients) and simple / clean while still looking “polished” and professional.
- Icons should be kept to a minimum, if used. Icon source files must be included as scalable vector graphics (SVG or AI), separate from your storyboard PSDs
- The #1 use case for launching this application is to create a new safety report, so this option should be front & center in your design.
Design Colors & Typography:
See JCI brand colors (PNG) for color use. We would like the overall look of the application to be “Light”, with a good deal of white space.
TYPOGRAPHY IS IMPORTANT!
- Use Arial font family for all text.
- Standard text should be very easy to read (regular weight / good size).
- Use font size and color to create hierarchy - Avoid “tiny” and / or “bold” text.
Included Assets:
- JCI logo (JCI_Logo.png)
- JCI BeSafe logo (BeSafe_Logo.png)
- JCI brand color hex/usage (JCI_Brand_Colors.png)
- JCI screenshots of other JCI visuals (JCI_Visual_Examples.png)
Design Size:
This application will be responsive, so content modules should be designed with that in mind.
That said, you only need to create PSDs for a phone view at 640 x 960 pixels. Do NOT include the phone frame / Only show the content area (640x960px).
Required Screens:
There are six (6) required screens for this challenge. Feel free to add additional screens which are necessary to explain your concept or show alternate states of design elements.
1) Login Screen
The Login screen will contain:
- JCI Logo & BeSafe Logo
- Username (input field)
- Password (input field)
- Login (button)
- Login tips (3 sentences of lorem)
2) App Settings Screen
Page will contain (all fields except last are required):
- Language (picklist)
- First Name (input field)
- Last Name (input field)
- Country (picklist)
- Branch (picklist)
- Primary Report Recipient (input field - show “example@JCI.com” in light grey here)
- Secondary Report Recipient (input field - show “example@JCI.com” in light grey here, mark this one as “Optional”)
- Cancel & Save (buttons, put cancel on left side and make it grey / less visually important than save)
3) Home Screen / Menu
Home screen will have the menu items, which are
- New Safety Report
- Report History
- App Settings
- Safety News
- FAQs
It will also have an “Admin Message”, which will consist of 3 sentences lorem (include a text link so we can see styling for these)
4) New Safety Report Screen
This is the page where the user will be able to log a safety report. It will contain the following fields (all are required except photos)
- - What type of safety issue is this? (picklist - default is “Unsafe Condition”)
- - What type of unsafe condition? (picklist - default is “--Select--”)
- - Where are you seeing this issue? (picklist - default is “--Select--”)
- - Location details (text input)
- - Please describe the issue (text area)
- - What (if anything) did you do about it? OR what needs to be done? (text area)
- Option to “Add Photo(s) - Optional” (button)
- Cancel & Submit Report (buttons, put cancel on left side and make it grey / less visually important than save)
5) Report History Screen
Here the user will be able to check on the status of his/her reports.
- User should be able to sort report By Report Date OR By Report Status (show the list being sorted by date for your screen)
- List of reports, each one can be tapped for more info and each one contains:
- - (Date / Time stamp - use different dates & times, newest at the top)
- - Type of unsafe condition ( eg: Unsafe Condition / Access)
- - Where are you seeing the issue (eg: Customer Site / BMC in Oslo)
- - (status - show recent ones as either “submitted” or “in progress” and show at least one as “resolved” - you may use some visual way for the user to easily notice status type, such as color difference)
6) Report Detail Screen
When user clicks on an issue in Report History he sees the report in detail. This should be the “read only (not editable)” version of a submitted report form PLUS the date/time stamp and the status. You can use lorem for the text areas.
Note: The winner may be asked to complete a secondary task (for additional payment), to create the application desktop icon (template.
Target Audience:
BE JCI employees in Europe
Judging Criteria:
- Completeness (design includes all required elements, options & functionality)
- Cleanliness of graphics and design
- Creativity and ease-of use to successfully engage users in a simple way
- Good responsive mobile design principles (design is appropriate for responsive display on mobile devices)
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.