Challenge Summary
Welcome to the Hercules University XOC Monitoring Service Design Challenge .
For this challenge we need your help create storyboard screen that will improve old design look and feel.
We attached expected format on the new version of Hercules Internal Channel Monitor screen.
Round 1
Initial Design of Hercules University XOC Monitoring Service on this Monitor Size : 1024x576px
1. New Channel Monitor Page
Notes : Any comments about your solutions
Round 2
Final Design of Hercules University XOC Monitoring Service on these following sizes:
- SD Size : 1024x576px
- HD Size : 1920x1080px
1. New Channel Monitor Page
2. Channel Selection Flow
Notes : Any comments about your solutions?
Hercules University Application is application for instantly watch TV shows and movies in HD on any TV or stream them on your computer, tablet, or smartphone.
For this challenge, we need your help to design Live TV Streaming Monitor screen that will viewed by internal users by follow existing design theme. Your submission need show some screen sizes variations explained on Checkpoint and Final Deadline Requirements
Attachment Files:
Existing-Screenshots.zip - Existing application screenshots
XOC | Monitoring Service updates.pdf - Channel Monitor Player Screen Wireframe
iOS7-Rebranding-Screens.zip - Old Design Reference for New IOS7 look
Old-Video-Player-Design.zip - Old Design Reference for Video Player Look
Form-Design.zip - Old Design Reference for Form Look
Current Channel Select Flow:
Note: Refer attached Existing-Screenshots.zip for screenshots below
Screenshot: 01-Pick-Number.png
- User logged in and is displayed with a single page where user can select the set of channels they want to "monitor" and the amount of time they want to "show" each channel before they change to the next one.
- FYI: Multi selected can support more than 100 channels that will monitored
Screenshot: 02-Video-Player.png
- It will go through the full list of selected channels, show each one for the amount of time specified, and then repeat until stopped.
Screenshot: 03-Channel-Logo-Transitions-A.png & 03-Channel-Logo-Transitions-B.png
- Transition screen when load next channel being monitored
- Screen showing next channel logo and preloader as indicator
04-Channel-Monitor-Result-Looping.png, Screenshot: 04-Channel-Monitor-Result-A.png & 04-Channel-Monitor-Result-B.png
- Once stopped, the user is presented with a "report" of the streaming - how many channels were shown, how many had errors, etc.
XOC Monitoring Service Design Submission Requirements
We want you create these following flow on your submission design:
1. Channel Monitor Page
Refer mockup of the proposed "new" look (XOC | Monitoring Service updates.pdf)
- We need use single page to accommodate all interactions about Channel Monitoring Activity
- Attached mock up is just starting point, you're encourage to improve the layout and look
- Remember, we will ask some HD sizes of this screen, make sure you create shape based on your source files, to make sure all graphic remain sharp when resized.
- For the new Channel Monitor page, page divided by "Player Screen" and "Runtime Statistics" columns.
Player Screen Area
- By page load, user will see the "Setting" modal
- You can reuse existing form design (Form-Design.zip)
- Follow form content and element need displayed for Setting screen.
Setting Form Content
-- Time Per Channel ( Input Field )
-- Repeat? ( Toggle Option )
-- Failures
---- Stop On Failures? ( Toggle Option )
---- Notifications? ( Toggle Option )
---- Sounds Enabled? ( Toggle Option )
- Should add "Save" button to save setting values
- How user edit settings after channel being played?
- After selected, this panel would show the video player
- You can reuse existing form design format
Run Time Statistic
-- University (Value will show University Name)
-- Channel Count ( Number of times channel played in cycle )
-- Time per Channel ( Amount of cumulative time channel has been played back )
-- Current Channel ( Current Channel being displayed )
-- Run Number ( Number of times Channel has been played )
-- Logs (Need ability to download / export the current Channel Monitor without stopping the test)
- Create interactive way show this Run Time Statistic
2. Channel Selection Flow
- Mimic the "Current Channel Select Flow" into the "Player Screen" area
- Mimic screen that show "Channel Transition" into the "Player Screen" area.
- Mimic video player being played into the "Player Screen" area. You can re-use Old-Video-Player-Design.zip as base. But follow new video player button on header and bottom area (screenshot: 02-Video-Player.png)
- Create how the "Channel Monitor Result" look into "Player Screen" area. You need improve this screen with better design.
Target Audience
- Hercules Internal Users
Judging Criteria
- How well you create storyboard that demonstrate new flow and look.
- User Experience of the "Monitoring Services".
- Consistency style with existing design theme
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file or any source graphics you created in Adobe Illustrator and saved as AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics.
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.