Challenge Summary
Welcome to the Styx TruVision Mobile Application v2 iPad Wireframe Design Challenge.
We just got completed storyboard of Styx TruVision application, before start native application development we need show presentation to client application click flow works, layout design, interaction and animations also functionality of the whole application on the iPad layout screen on HTML wireframe format.
Round 1
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
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 Functional Menu
9. Events
10. 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
- truVision-v2.zip - truVision Application Storyboard
- VideoMobileAppSpecificationv2.0.docx - Styx truVision 2.0 Requirements
Wireframe Challenge Goals
- No need match look and feel for this wireframe solution, you need follow layout and placement based on storyboard screens
- Show us correct click flow for all UI elements on page
- Show wireframe screen on iPad Landscape layout orientation
- As possible create interaction as closer as how all things should works when run as native application
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.
- Select Hint dropdown content:
-- What is the name city you were born in? (Default hint)
-- What is your best friend's name?
-- What is the name of your high school?
-- What is your favorite pet's name?
2. Login
screenshot: 01_1_login.png
- This is login page show up after user create account at application launch
- Show us how error validation look like (screenshot: 01_2_login.png)
3. Password Recovery
screenshot: 01_3_login.png
- This page show up when user click Forgot Password button
- Show us how error validation look like (screenshot: 01_4_login.png)
4. Device Management
Manage Device
screenshot: 06_2_device_list.png
- 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
- Match form content
Device List View
screenshot: 06_1_device_list.png
- There's + button on top right bar to let user create new device
- User can delete each list by click 'X' button
Camera List
screenshot: 06_1_device_list.png
- When user navigate on each device, there will be camera list
- User can check/uncheck checkboxes
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
-- Gallery
-- Help
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
- To add camera to multi view user will single tap on the camera icon in the top left hand corner. This will produce the device tree.
- Sidebar background use transparency
- Sidebar will cover 25% of the landscape layout
- Simulate how Device Tree View works on expand/toggle
- User can select the camera from the drop down list and drag the camera into one of the designated video tile.
Drag & Drop Activity
- Apps needs to display the correct tile layout during drag operation based on the number of cameras in the device. (See Adaptive Tile Layout)
- App shows silhouette of the device being drag, which follows the user's finger.
- If device exceeds 16 channels (4x4 layout), the app will only open the 1st 16 cameras.
- After 16 tiles are opened, user can no longer drag Devices into the tile. Prompt user to close tiles before dragging more devices.
- User can rearranged by drag & drop
- When user drag into 'Drop to Remove' panel, it will close the video (03_7_Video_functions.png)
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)
- When user adds the 5th camera application will auto switch to 1Big 5 Small layout (02_3_Video_Tile.png)
- When user add the 7th camera application will auto switch to 3x3 (02_4_Video_Tile.png)
- When user adds the 10th camera application will switch to 4x4. (02_5_Video_Tile.png)
- User cannot add more than 16 cameras. When all 16 cameras are fill up, when user drops a new camera to an active tile, application will close the existing tile and display the new tile.
- Similarly when user starts to remove cameras the layout needs to also auto adapt.
7. Video Functionality
screenshot: 03_1_Video_functions.png
- Action on the functional menu strip affects only the video of a Single Selected Tiles.
- This only visible when user selects an active video tile AND selects the functional menu button
- Fullscreen function (03_2_Video_functions.png)
- Playback function (03_3_Video_functions.png
- Stream Type function (03_4_Video_functions.png
- I/O Trigger function (03_5_Video_functions.png
- Aspect Ratio function (03_6_Video_functions.png
- Drop Here Panel to Remove function (03_7_Video_functions.png
- Video function (03_8_Video_functions.png
- Expand/Collapse function (03_9_Video_functions.png
8. Playback Functional Menu
screenshots: 04_1_playback.png & 04_2_playback.png
- Show how datepicker and video playback show up
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
10. Favorites Management
screenshot: 07_add_favorites.png
- This screen will be page list Favorite Camera
- User can delete selected camera
Target Audience
- Styx TruVision Customers
Judging Criteria
- Completeness and accuracy of the wireframe as showed in the attached storyboard screens.
- 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?
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.