Challenge Summary
Welcome to the Hercules Monitoring iPad and iPhone HTML5 Application Storyboard Contest. Objective of this contest is to create optimized application storyboard that will be developed on iPad/iPhone HTML5 based on our existing.
In the end of this contest we are looking for a process flow and layout design of the pages mentioned below that are part of the whole application on required iPad/iPhone platform.
If you have any question, please raise in the forum, let's discuss anything!.
Round 1
Your submitted design solution for client review. Create Screens for iPad and iPhone (Vertical layout only)
1. Configure The Application
2. Managing the Security System
3. Viewing Camera Transmission
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final pages of storyboard. Create screens for iPad and iPhone layout (Vertical layout only)
1. Configure The Application
2. Managing the Security System
3. Enabling and Disabling Security Zones
4. Viewing Camera Transmission
5. Viewing Security System History
6. Managing Thermostats
7. Managing Lights
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Contest Details
Hercules system application offers client the ability to remotely monitor and manage your Hercules system from Web/Tablet/Handheld Devices.
In this end of this project, we need get the new Hercules Application that will be developed under HTML5 platform by using existing our iOS application as reference design. Your design should leverage the User Experience when use the application. FYI: This application will be developed on Modern Website, Tablet, Handheld on iOS and Android Operating System. On this contest, we need your help to get the initial storyboard that explains the new design/layout and functions on iPad and iPhone.
IMPORTANT
- Read Home-Security-System-iPhone-App-Flow.pdf to help you get better picure of this application. You need capture all page flow in your stoyboard design.
- Suggest us more better theme of the application! No restrictions colors.
- Design sharp icons as much as possible to make you design stand out than others. All the icons must have same design feeling! You must create the icons exclusively for this application.
Target Platform
- Remember this application will be developed under HTML5! Make sure your design solution optimize the HTML5 advantages.
- This storyboard will need focus on iPhone/iPad, but it will support all platforms and OS later like Modern Web, Safari Mobile and Android Browser, so you should design a consistent custom look and feel that will works across required platform.
- Design area for iPhone (960x600px, 640x920px), and iPad (1024x748px, 768x1004px). On this contest you just need focus on Vertical layout.
- On iPad design, we want to keep it easily usable though like the current screens.
- Put your design in the iPhone GUI Kit/iPad GUI Kit so we can compare how well it looks in iPhone/iPad.
- Follow best practice user experience, such as make UI element big enough for touching, keep no horizontal scroll..etc
- Remember when create graphics for tablet/handheld, all UI elements must have fluid width, so it will support at landscape and portrait layout.
- iPad/iPhone Design Inspiration:
iPad App Design Inspiration
iPhone Optimized Website Design Inspiration
Application Flow Requirements
1. Configure The Application
- Create Splash Screen of this application.
- Login screen needs a placeholder logo.
- After splash screen hide, a login form contains "Username", "Password", "Save Password" and "Login" button displayed.
- You need create error validation message
- How present "Save password" on HTML5 version?
- Tap Login button again to open the application
- Landing page of the application contains "Security", "Cameras", "Thermostats", "Lights" and "History" icon. This page need improved with more better icons, color theme, layout or any other ideas?
- Each Icons should cleverly presented the page that will displayed.
- Notice there's some informations in the right side of each icons, Need think the new way to show this informations.
2. Managing the Security System
When managing your Hercules system using the iPhone application, you can perform the following operations:
2. a Arming the Security System
- Tap Security icon.
- Tap "Disarmed - Press to Arm" action button placed on topside.
- The Security screen displayed, it contains some zone like "Front Door", "Kitchen Door", "Back Window", "Foyer", "Master BR", "Zone Door".
- Any graphics need created for other zone of premises?
- You might need create different color for "Open" and "Closed" zone. To help user easily recognize the zone status.
- This page need improved with more better icons, color theme, layout or any other ideas?
- There status displayed for some zones. For example : "Closed", "Clear", "Open".
- Tap "Disarmed - Press to Arm" action button then The Choose How to Arm screen displayed.
- Select Condition zones to arm, maybe add some help information here?
- Enter Security Code.
- Once the system is armed, the green bar turns red and reads Armed – Press to Disarm.
2. b Disarming the Security System
- Tap Security icon.
- "Armed away - Press to Disarm" action button placed on topside.
- Select Condition zones to arm.
- Enter Security Code
- Once the system is diarmed, the red button turns red and reads Disarmed – Press to Arm.
- Notice the "Door" zone icon have red colored icon represent the "Open" security zone
3. Enabling and Disabling Security Zones
- You can enable and disable individual security zones
- Tap Security icon.
- Tap "Disarmed - Press to Arm" action button placed on topside.
- The Security screen displayed.
- You can only enable or disable security zones when the security system is in the disarmed state. When the system is in the armed state security zones cannot change. How your design accomodate the alert?
- In the Hercules area, tap the security zone whose status you want to change to display the screen for that zone.
- Tap the On/Off switch to enable or disable, respectively, the security zone.
- From this screen, you can also see the following:
-- Temperature of the area in which this zone’s sensor is located.
-- Battery level of the zone’s sensor.
-- Signal strength of the communication between the sensor and the security system.
-- Type of sensor being used for this zone.
-- Any possibility present the data into graphics information?
4. Viewing Camera Transmission
- Tap the blue Cameras bar to display the Live Media Screen showing the last captured images from each installed camera.
- Tap a camera to view images of that camera.
- Click Video to view streaming video from the camera.
- Anticipate the iPad/iPad screen sizes when viewing the video.
- Make sure the icons match the meaning of page.
- To view images and video captured manually from the Subscriber Portal, due to a security zone being faulted, or as a result of a rule, go to History.
- The History Screen is displayed.
- How design the tab to looks not boring? Improve this page!
- User will have ability to look on the history per month.
- Create flow design : to view image/video capture events that were initiated and to view images captured as a result of an Alarm or Zone event.
5. Viewing Security System History
- Tap History to display the History screen.
- From this screen, you can choose to view a history of recent events based on the following criteria:
-- All - All logged events.
-- Alarm - Alarm events.
-- Arm - Arm/Disarm events.
-- Zone - Events related to security zones
6. Managing Thermostats
- Tap Thermostats to display the Thermostats screen.- Tapping each row will show some quick info.
- The current measured temperature, mode, and setting is displayed for each thermostat.
- Tap the thermostat to view the Thermostat screen. Improve this page design!
- This page show “Off”. "Snow" icon, "Fire" icon. Icons already represent the functions? Improve it.
- Tap Settings to view the Settings screen.
- Any possibility present the data into graphics information?
7. Managing Lights
- Tap Lights to display the Lights screen.
- Design better icons to explains Light Off and Light On
- When a light is on you can modify its Dimmer level.
Tap More to toggle between the control for the lighting devices or to view the history of recent events related to the lighting devices.
- "Tap More" coming from iOS application. How present this menu in HTML application?
Target Audience
Current Customer.
Potential Customer.
Judging Criteria
- User Experience on iPad/iPhone Platform
- How well you bring new looks on the HTML5 Application design.
- Cleanliness of your graphics and design.
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.