Challenge Summary
Welcome to "Eaton - Secure Connect Mobile App Design Challenge". In this challenge, we need your help to create the Landscape orientation design for our Secure Connect Application. The application has been launched and exists in the google play store and apple store but it's only available for Portrait orientation. This app gives the user the ability to connect to one or more intruder alarm panels and able to controlling and monitoring their installed intruder alarm.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Challenge Objectives
- Create UI Design for Our Secure Connect Mobile App (Landscape orientation, Portrait version already exist)
- 14 Screens + their interactions
- Hybrid App (design should work for iOs and Android app)
Project Background
- The purpose of this app is to give a user ability to connect to one or more intruder alarm panels and able to controlling and monitoring their installed intruder alarm (the logs report and output from the alarm panels)
- The app needs to be responsive and easily used by novice users.
- The app must meet our PX blue branding guidelines and material design UI requirements. We already have the Portrait design, and now we need the landscape design version.
Workflow
- See the Figma prototype (the interactions prototype)
Target Audience
- Homeowner controlling and monitoring their installed intruder alarm retrieved from the backend systems and data input from the customer.
Screens/Features
- See this Spreadsheet for a complete list of screens that need to be created: https://docs.google.com/spreadsheets/d/1WcEsNMJdN-b2Mv5-TBrA1cOvyUgYmYlLmHcUbEqzm2s/edit?usp=sharing
- Please make sure your design includes the following screens and their interactions:
1) Login
- Create various interaction of login using ordinary login form, fingerprint, or quick code access
2) Login Options set up (First Time User)
- Allow users to set up their login options to simplify the login experience, there are 3 login options available (login form, fingerprint, or quick code access). This process can be skipped and user can do it later in settings. It only appears for the first time user that doing their first logged in to the app
3) Pairing
- Features to add a new panel to the app with just a few steps by adding pair code and panel name
4) Settings
- The user will be able to set up their application features from this menu.
5) About
- Show necessary information about the app
6) Feedback
- The user will be able to give feedback about the application
7) My Panels
- Show list of an available existing panel in the application
8) Panel Detail
- Show all available partition in each panel
9) My Timeline
- List of a log file and activity (including notification) happen in each panel
10) My Outputs
- Features that will enable the user to manage the output quantity
11) Register Accounts
- The potential user can create their account to the application via this feature.
12) Acceptance
- The user needs to accept the terms and condition and privacy policy to be able to use the app
13) Dashboard Status Variation
- Show list of dashboard variation in the application
14) Splash Screen
- A first-time screen that will appear when the user opens the application. It will appear either user have an internet connection or not.
Marvel Prototype
- We need you to upload your screens to the Marvel App
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=643582
Form Factors
- Mobile Device, Landscape Orientation: 1920px x 1080px (iPhone 8+)
Operating Systems
- Hybrid App (Design needs to be work on iOS and Android devices)
Branding Guidelines
https://docs.google.com/document/d/1S791wt47b2TLs8ltRh80ZPxvhynyYiuu3016-6NfNwo/edit?usp=sharing
- Eaton PX Blue
- Google Material design
Design Assets
- Important Design Screen (This prototype show all the unique screens - note: branding is hidden)
- Interactions Design Screen (This prototype show all the interactions for the application - some screen repetition will appear in this prototype)
- Design Ful Version Offline (original portrait design created using Figma)
- REST Interface Documentation (Technical docs)
- See the released build on google play: https://play.google.com/store/apps/details?id=com.eaton.ionSecurityConnectPanel, This is the process if arming/setting a system when it is in the part set mode configuration. Panels have been made available for you to connect to experience the flow in the current released version.
Judging Criteria
Your submission will be judged on the following criteria:
- Consistency and Similarity with the Existing Design
- Screens Completeness
- The overall design and user experience
- How well does your design align with the objectives of the challenge
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on the challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Challenge Objectives
- Create UI Design for Our Secure Connect Mobile App (Landscape orientation, Portrait version already exist)
- 14 Screens + their interactions
- Hybrid App (design should work for iOs and Android app)
Project Background
- The purpose of this app is to give a user ability to connect to one or more intruder alarm panels and able to controlling and monitoring their installed intruder alarm (the logs report and output from the alarm panels)
- The app needs to be responsive and easily used by novice users.
- The app must meet our PX blue branding guidelines and material design UI requirements. We already have the Portrait design, and now we need the landscape design version.
Workflow
- See the Figma prototype (the interactions prototype)
Target Audience
- Homeowner controlling and monitoring their installed intruder alarm retrieved from the backend systems and data input from the customer.
Screens/Features
- See this Spreadsheet for a complete list of screens that need to be created: https://docs.google.com/spreadsheets/d/1WcEsNMJdN-b2Mv5-TBrA1cOvyUgYmYlLmHcUbEqzm2s/edit?usp=sharing
- Please make sure your design includes the following screens and their interactions:
1) Login
- Create various interaction of login using ordinary login form, fingerprint, or quick code access
2) Login Options set up (First Time User)
- Allow users to set up their login options to simplify the login experience, there are 3 login options available (login form, fingerprint, or quick code access). This process can be skipped and user can do it later in settings. It only appears for the first time user that doing their first logged in to the app
3) Pairing
- Features to add a new panel to the app with just a few steps by adding pair code and panel name
4) Settings
- The user will be able to set up their application features from this menu.
5) About
- Show necessary information about the app
6) Feedback
- The user will be able to give feedback about the application
7) My Panels
- Show list of an available existing panel in the application
8) Panel Detail
- Show all available partition in each panel
9) My Timeline
- List of a log file and activity (including notification) happen in each panel
10) My Outputs
- Features that will enable the user to manage the output quantity
11) Register Accounts
- The potential user can create their account to the application via this feature.
12) Acceptance
- The user needs to accept the terms and condition and privacy policy to be able to use the app
13) Dashboard Status Variation
- Show list of dashboard variation in the application
14) Splash Screen
- A first-time screen that will appear when the user opens the application. It will appear either user have an internet connection or not.
Marvel Prototype
- We need you to upload your screens to the Marvel App
- Please send your marvel app request to fajar.mln@gmail.com (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comment this link while you upload)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=643582
Form Factors
- Mobile Device, Landscape Orientation: 1920px x 1080px (iPhone 8+)
Operating Systems
- Hybrid App (Design needs to be work on iOS and Android devices)
Branding Guidelines
https://docs.google.com/document/d/1S791wt47b2TLs8ltRh80ZPxvhynyYiuu3016-6NfNwo/edit?usp=sharing
- Eaton PX Blue
- Google Material design
Design Assets
- Important Design Screen (This prototype show all the unique screens - note: branding is hidden)
- Interactions Design Screen (This prototype show all the interactions for the application - some screen repetition will appear in this prototype)
- Design Ful Version Offline (original portrait design created using Figma)
- REST Interface Documentation (Technical docs)
- See the released build on google play: https://play.google.com/store/apps/details?id=com.eaton.ionSecurityConnectPanel, This is the process if arming/setting a system when it is in the part set mode configuration. Panels have been made available for you to connect to experience the flow in the current released version.
Judging Criteria
Your submission will be judged on the following criteria:
- Consistency and Similarity with the Existing Design
- Screens Completeness
- The overall design and user experience
- How well does your design align with the objectives of the challenge
- Cleanliness of screen design and user flow
- Ease of use
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 image files based on the challenge submission requirements stated above
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop, Illustrator (might need to convert it to photoshop later), XD or Sketch and saved as an editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.