Challenge Summary
Welcome to the Styx TruVision v2 iPhone version Design Concept Contest.
We just get completed wireframe for iPad device version, this time we need your help to create iPhone version of Styx TruVision application.
Before start native application development we need visualize to client how application flow works, layout design, interaction and animations also functionality of the whole application on the iPhone layout screen.
As result of this challenge, your submission show how application look and works on iPhone and made adjustment as stated more details below. Then, you need make sure all these minor updates capture correctly on your wireframe solution.
Round 1
Your submitted design solution for client review:
1. Create User
2. Login
3. Password Recovery
4. Device Management
5. Multi Camera View
Make sure all pages have correct flow and clickable!
Round 2
Your submitted design solution for client review:
1. Create User
2. Login
3. Password Recovery
4. Device Management
5. Multi Camera View
6. Device List View
7. Video Functionality
8. Playback
9. Events
10. Settings
11. Favorites Management
Make sure all pages have correct flow and clickable!
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).
Attached Files
- Styx-Prism-iPhone-Blue-Theme.zip - truVision Application iPhone version Storyboard
- current-iphone-screen.zip - Current application screenshot for iPhone version
- Styx-Prism-iPad-Wireframe.zip - Styx truVision 2.0 iPad Wireframe
- VideoMobileAppSpecificationv2.0.docx - Styx truVision 2.0 Spec Requirements
Wireframe Challenge Goals
- You need re-use Blue application theme from attached Styx-Prism-iPhone-Blue-Theme.zip. Follow look, layout and UI placement based on storyboard screens
- Wireframe submission need show screens on iPhone Portrait layout orientation (Use 640px x 960px for the screen size)
- FYI: attached iPad wireframe not capture updates explains below. So, pay attention of every detail things need updated needed on each sections, then some task below NOT reflected on storyboard yet. You can see complete task for iPad version that need patch into iPhone version on attached Wireframe Winner Feedback.docx
Wireframe Requirements
1. Create User
screenshot: 01_5_login.png
- This screen show up when user launch app for the first time and no account has been created.
- Form on this page needs to be changed to create PIN on input field.
- Remove another fields.
- Allow user to input a 4 digit PIN. This screen only shown for 1st time user.
- User who forgets their PIN needs to uninstall/reinstall the app. (In device settings within the app, user has an option to bypass PIN security. If that option is enabled, PIN will not be prompted and user is taken to app main’s screen (Multi Camera View) directly.
- All updates above will affect Login screen
2. Login
screenshot: 01_1_login.png
- This is login page show up after user create account at application launch
- This screen needs to be replaced with PIN login field.
- Pin will be 4 digit created when user first launch the app
- Need remove Forgot Password button.
- Need remove I'm new User, read more info on task #1.
3. Password Recovery
screenshot: 01_3_login.png
- NO need show this page on your wireframe
4. Device Management
Manage Device
screenshot: 06_2_device_list.png
- After user 1st login if there are no devices, show add device Screen.
- This is default page when there are no device connected in the device list
- User can create new device
- User also use similar form layout when update device, Add button replaced by Update button
- Each list show:
-- Device Icon
-- Device Type
-- Device Name (You need remove those icons and change to these samples 'TVR42', 'TVN21', 'TVN50' etc)
- Main Stream/Sub Stream should be changed to High/Low Quality
- Top Right should show 'X' and 'Edit' button
- Tap Edit button should allow user to check/uncheck each rows
Delete Device Flow
- User tap on Edit button
- App will place checkbox in front of all devices icon
- When one device is selected, the “Delete Button” appears left of the Cancel Button
- User selects the device they wish to delete
- Deleting device delete all cameras associated with the device
Update Device Flow
- User selects the device entry in the device list
- App will present the user with the update device screen.
- Add button is replaced by Update button
5. Multi Camera View
screenshot: 02_1_Video_Tile.png
- This is the home screen, default page when user open the application
- Screen compose of title bar on top, menu bar in the bottom and series of video tiles that maximize center area (tile view)
- Device List Icons on the top left corner
- Main icons in the bottom:
-- Live
-- Playback
-- Events
-- Settings
-- Favorites
-- Help
- Gallery should be removed from bottom bar on whole application
6. Device List View
screenshot: 03_8_Video_functions.png
NOTE: Drag/drop functions on this wireframe need works as actual application, we need show clear interaction to let client easily understand how Multi Camera View works
- Navigator Server should be replace with Favorites
- Devices Should be replace with Recorders
- Devices Icon should be replace new Icon that better represents the recorder.
- Missing Logic:
-- Double Tap toggles 1UP mode and Multi-View Mode
-- Single Tap should select the tile with blue highlight (See Specs)
- All tiles should be having drag feature. (Your current implantation only allows one tile to be dragged)
- When drag video tile, should show size changed (See Specs)
- Tiles should be dropped behind the “Drop here to remove Message” (See Specs)
- When device tree opens the videos panel should shift to the right to make space for the tree (Shifting the tiles to the right and make them narrower. The transition should be smooth without video loss) Basically we need to shrink the viewer area to compensate the tree width. When Hidden the video switch back. Icon is needed to hide device tree.
Adaptive Tile Layout
- Application starts with 1x1 layout as default (02_1_Video_Tile.png)
- When user adds the 2nd Camera application will auto switch to 2x2 (02_2_Video_Tile.png)
- Similarly when user starts to remove cameras the layout needs to also auto adapt.
7. Video Functionality
screenshot: 03_1_Video_functions.png
- Show hide functional menu by hitting the “Functional Menu Icon”
- Functional Menu show up only the video of a Single Selected Tile.
- Functional Menu Strip will pop out from the app right side overlaying the viewing area.
- Playback, Goto Date should jump to the Playback Screen
- Stream type – Replace Main Stream with (High Quality) SubStream with (Low Quality)
- Missing Icon to Enable/Disable the Audio (See Specs)
- Missing UI for PTZ joystick - Missing Focus/Auto-focus icons
- The “X” icon on the bottom needs Icon change. “X” icon is not to close functional menu but to close all the open video tiles (See Specs) Please prompt the user before closing all the video tiles. (Something like overlap rectangle with 'X' button on center are which represents close all video)
- You need simulate all those functionality buttons on your wireframe. Refer to attached current-iphone-screen.zip for complete look & content.
8. Playback
screenshot: 04_playback.png
- Missing Device Tree Icon on top left hand corner.
- Calendar Icon needs to move to bottom right hand corner Next to the clock
- Calendar Icon needs to display the active Date in the icon . So If today is 2/15/2014 calendar should show #15 in the icon.
- Shrink the Playback Controls (FrameStep, FF, Pause, Rewind) smaller to make room for calendar icon
- Time bar should be scrolling NOT the play cursor.
- Functional Menu is missing for playback (Digital Zoom, Snapshot)
- Playback mode is missing drag & drop of video tiles
- Single/Double Tap logic is missing in playback mode (See Specs)
- Video should scale when user drag & drop (See Specs)
- Video close is missing from playback
9. Events
screenshots:
05_1_Events.png - this screen show no event
05_2_Events.png - this screen show event list
05_3_Events.png - click setting on top right will allow user to manage event camera
- Replace the "Settings" icon on the top right hand corner with a "Filter" icon. The feature is to filter out the cameras that or visible
- The number is used to represent not viewed events
- Message should say "There are no events for the selected cameras"
Manage Event
- This screen triggered from button on top right of Event page
- Replace the On/Off switch by checkmarks
- User can select/deselect camera by tapping on any area in the row
- Hide/Remove the Push Notification as it is not supported
- Add Select All toggle button to select/deselect all.
- By default everything should be on. User can select items to turn off, and the selection persists.
- Provide a "Back" button to get back to the Events List if playback video came from an event triggered.
10. Settings
- Settings is missing sub-menu for Device Management, App Settings.
a. Device Management will show the device list
b. App Settings will show app setting screen with the following option
-- Required PIN login (On/Off switch) 2.
- Device List View should be like the Specifications. With + and Edit sign. (See Spec)
- When user "Edit" device setting, the "Add" button should be replace with "Update" (See Specs)
11. Favorites Management
screenshot: 07_add_favorites.png
- This screen will be page list Favorite Camera
- Favorites should show Favorites List. Should have "Add/Edit" like device List
- Favorites created/removed in the favorites should be reflected in the device list view under "Favorites"
Target Audience
- Styx TruVision Customers
Judging Criteria
- Completeness and accuracy of the wireframe as showed in the attached storyboard screens and spec details.
- How well you implement the required data and any suggestions, interactions and user flow you recommend (provide any notes or comments for the client)
- Is your solution possible to build on future development?
- Are all spec requirements captured on your wireframe? Make sure you double check!
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
All Requested Contest Requirements stated above.
Source Files
Wireframes should be built in Axure or your own HTML/CSS/JS codes. The resulting files should have generated as clickable HTML files. Also, all the wireframe content must be listed and the pages are linked together to show page flow.
Final Fix
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
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.