Challenge Summary
Welcome to the Styx TruVision v2 Tablet version Design Concept Contest.
Styx is looking for your ideas/solutions to modernize the user experience of their existing TruVision mobile surveillance application.
In this contest, we would like you to think about the overall user experience, new branding theme and application features specifically for iPad version!
Round 1
Your submitted design solution for client review:
1. Login Screen
2. Main Toolbar
3. Functions
4. Video Tile
5. Device Tree
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Round Two (2)
Final design + updates from checkpoint feedback:
1. Login Screen
2. Main Toolbar
3. Functions
4. Video Tile
5. Device Tree
6. Event Notification
Readme.jpg : contains your notes about your submission.
Make sure all pages have correct flow! Use correct file numbering.
TruVision Mobile Application is mobile surveillance application for Styx customers to allow them view 'Live monitoring', 'Recorded video monitoring (Playback)' and another things via customer's devices (Tablet and Phone).
Design Concept Goals:
- We are looking to update our mobile application and create a better (modern) user experience.
- Design will build as native application and is available cross platform for iOS, Android and Windows Mobile.
- On native application development you need aware about form UI elements, they will use default standard style based on each platform.
- Research modern design things like flat design and other modern design trends. These sites can be your starting point implement new themes:
http://www.hongkiat.com/blog/mobile-app-ui/
http://www.webdesignviews.com/2013/11/inspired-user-interfaces/
- Maximize usage of touch gestures that will works cross platfom. You can start read these links of iOS and Android gestures explanation.
http://www.iphonehacks.com/2013/09/ios-7-gestures.html
http://developer.android.com/design/patterns/gestures.html
- Follow existing UI Color Scheme (green, grey and other complimentary colors)
- Any other things that would a user needs in this application? Suggest additional features.
We are looking for a new design that will make our application jump ahead of other mobile mobile phone surveillance applications. Your solution needs to be better than these:
- https://itunes.apple.com/us/app/ivms-4500-hd/id444917386?mt=8
- https://itunes.apple.com/us/app/icam-webcam-video-streaming/id296273730?mt=8
- https://itunes.apple.com/us/app/ip-cam-pro/id333639874?mt=8
- https://itunes.apple.com/us/app/viewer-for-axis-cams/id303639703?mt=8
Attached Files
- current-app-screenshot.zip - Current application screenshot
- old-ipad-design-part-1.zip & old-ipad-design-part-2.zip - Old Truvision Design storyboard
Submission Requirement
- Submit iPad Standard version (Landscape View = 1024px x 768px) for our review. iPad Standard Portrait version view will be task for contest winner.
- Make sure your submission use shape format. So, when resized to Retina version. Graphic look sharp!
1. Login Screen
- Current version requires login each time user open the app. In new version we need put option for user to asked, is the login page required after exit & return back to the app? How do you suggest solution for this problem?
- This option needs to be placed to the settings menu of the app.
- Setting menu shall have multiple options in a drop-down:
-- Local Settings
-- Device Settings
- Local Settings option will provide this option for the user.
- Show screen for create new user, forgot password and create new user
2. Main Toolbar
- Toolbar is expected to be accessible all the time. Components on this toolbar shall be:
-- Live
-- Playback
-- Events
-- Settings
-- Favorites
-- Gallery
-- Help
- Main menu will require minimal change over current version. Bottom part of the screen is a good position to do this.
- Main header toolbar will also require a minimal change.
3. Functions
- Video functions shall be located on the right as a new toolbar for live view mode only, on both full screen and multi tile mode.
- Size of this menu shall be optimized to remain small and icons shall be optimized for easy use.
- This functions menu shall support to be hidden with a button. Button shall replace the current “Close All” button. Following functions shall be listed from top to down:
-- Playback: To switch to playback menu for only selected tile.
-- Snapshot: To capture snapshot to the Gallery
-- Stream Type: To change the stream type from/to main and sub stream.
-- Close All: to close active camera
-- Audio: Capability to record audio.
-- I/O Trigger: Shall provide a pop up UI that has buttons to trigger the I/O.
---- Pop up menu show up with 4 switch icons will appear next to it. This icon shall look like a switch console made of 4 switches.
---- User taps on the switches to trigger the port and device connected to it.
-- Aspect Ratio: function to changing the width and the height of the image as it is take
-- PTZ: Pan Tilt Zoom, function camera which can be controlled via Joystick or DVR and moved up/down, left/right and zoomed in/out.
-- Digital Zoom: Function to zoom in/out live camera.
-- Iris: Function to control the amount of light coming through the lens, more light comes in and the picture appears brighter.
-- Presets: Save and Load presets shall be collected under one button. (i.e. Favorites menu in current app).
4. Video Tiles
- Each tile shall be selectable by a single tap. Once selected, tile shall be highlighted (with TruVision neon green).
- Selecting an empty tile shall expand the device tree (if device tree is hidden. See next section for more information on device tree)
- Each tile shall be expanded to be full screen with a double tap or pinch gesture.
- A double tap or reverse pinch gesture shall return the view back to multi tile view
- Each tile shall support to be dragged and replaced with another tile.
- Add Drag & Drop Support.
- To save space, and have a better UI enhancement, we need close tile function to be done with drag and drop.
- To close a tile, user shall tap and hold to drag it on an “X” icon that appears at the bottom of the screen. This “X” button shall only appear when a user begins to drag a tile.
- Video Tiles Layouts: There are two options given for video tile layout selections. Although Option 2 is preferred, Option 1 is acceptable at a minimum.
Option 1 (Preferred) :
There shall be a layout button that would give following geometries:
-- Symmetric: 1x1, 2x2, 3x3, 4x4
-- Asymmetric: 1 big – 5 small, 1big - 7 small
Option 2:
Video tile shall dynamically adjust the number of tiles as user drags
devices/cameras to the video tile area.
-- Dropping 2nd camera switches the layout to 2x2 mode.
-- Dropping the 5th camera switches the layout to 1 big, 5 small asymmetric mode.
-- Dropping the 7th camera switches the layout to 3x3 mode.
-- Maximum tile number shall not exceed 16 (4x4 mode).
5. Device Tree
- Device tree shall give a list of Navigator servers, devices (recorders) and cameras. Each device field shall be expand/collapse enabled to show/hide cameras under it.
- Device tree shall be in accordion menu format. With a button located on the left top corner (classic list icon with 3 horizontal lines, or, camera icon), it shall be hidden to give more space to the video tile area. Same button shall expand the device tree.
- Video tile sizes shall adjust dynamically as device tree is hidden. During this refresh, tiles shall remain in act without any interruption to video stream.
- Devices shall support drag and drop. Navigator Server is an exception to the drag and drop. Only devices and cameras shall support this function.
- Device tree shall be shown as default
- Camera names shall be pulled from the device to reflect the same names in mobile app interface.
- No thumbnail is needed for this release to keep KPI parameters manageable.
Add New Group of Direct connection to TruVision Navigator IIS
- There shall be a new device group defined for Navigator Server in the Add Device menu. Navigator shall be added the same way a TruVision recorder is added. Once a Navigator Server is added, a different icon shall be used to differentiate it from the rest of the list. In addition, there shall be a different group for Navigator Server in the device tree, and device management screen. Ideally, there shall be three different groups that can be collapsed / expanded to hide/show devices:
- Navigator Server: Navigator server that is added to app.
- Devices: Devices that are added to app
- Cameras: Cameras that are added to app
Add New Group of Direct connection to Interlogix Cameras
- There shall be a new device group defined for Interlogix Cameras in the Add Device menu. Cameras shall be added the same way a TruVision recorder is added. Once camera is added, a different icon shall be used to differentiate it from recorders. In addition, there shall be a different group for cameras in the device tree, and device management screen.
- App shall support same functionality of live and playback as it does for recording devices
- Time bar shall provide the recorded video information in SD Card.
6. Event Notification
- TruVision Mobile shall be able to receive the motion detection events from individual devices. (Only recorders and attached cameras, excluding Navigator server and individual cameras). These events shall be managed and listed in an Events menu created on the main toolbar.
- There shall be a new icon/menu called “Events” in main menu toolbar. An icon shall be used for representing the purpose of the menu (i.e. alarm). This menu shall give two options to set and get events. (i.e. playback menu options given in old version)
Event Details
- Events menu shall give two options: Manage, Load
-- Manage shall provide the list of devices (recorders only)
--- Each device shall have two check marks next to them
1. On/Off
2. Push Notification
--- Selected devices will begin providing the motion detection events to the mobile app on demand, or, via push notification.
-- Load button shall provide a drop down menu with preset dates
--- Last minute
--- Last 10 minutes
--- Last hour
--- Last 4 hour
--- Last 12 hour
-- Once one of the above is selected, list shall be populated with events for selected cameras.
Manage Event
- User taps the events icon and selects Manage
- User selects the devices from the list by tapping On/Off button.
- User selects the push notification checkbox.
-- If push notifications are enabled, user shall receive an event notification with two options “View” and “Dismiss”.
-- If user taps on “View”, the playback video shall start playing the event.
User experience to Load events:
- User taps the events icon and selects Load.
- User selects one of the preset time intervals to search for events
- Upon selection, list shall be populated with line entries.
-- Each line entry shall have the camera name and time information.
--- User taps on the line items to switch to the playback view of the event. Playback screen shall launch with this action.
Video details page
- Recorded video shall be highlighted on time bar to provide ease of search capability. Recorded video shall be highlighted with neon green bar.
Live mode
- Same options as in current version shall be given to the user: “Instant Replay” and “Go To”. Instant replay shall playback the last 2 minutes. Go To shall give a calendar with date MM/DD and time HH/MM.
Target User
- Styx TruVision Customers
Judging Criteria
- How well you design and explains your solution of Styx TruVision 2.0 in storyboard screens.
- Cleanliness of your graphics and design
- Your design should possible to build across platforms: iOS, Android and Windows Mobile
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
All Requested Contest Submission Requirements stated above.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Adobe Illustrator and saved as layered PSD or AI 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.
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.