Challenge Summary
Welcome to "Hercules - PX Video App Design Concepts Challenge". For this challenge, we are looking for a design concept ideas to showcase our PX Javascript Framework capabilities to our colleague. The idea is to create a working sample of Video streaming app. At the end of this challenge, we would like to see the best possible UI/UX concepts for the Video Streaming Application by utilizing all the PX framework capabilities.
01) Splash Screen
02) Homepage Screen
03) Asset Detail Screen
04) Video playback Screen
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype/project from copilot fajar.mln (via forum or email)
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
01) Splash Screen
02) Homepage Screen
03) Asset Detail Screen
04) Video playback Screen
05) Search Screen
06) Other Screens
- Provide a MarvelApp presentation of your design to help us understand your design concepts (replace your checkpoint images).
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Background Overview
PX is a framework (see http://www.pxscene.org/) for creating cross-platform UI applications using JavaScript. For this challenge, we are looking to develop a working PX application to show its capabilities which can be shared with all developers and partners.
Because we are focused in the video streaming business, we want to use this as the main ideas for the creation of the application. Think of an Over-the-Top (OTT) video application, like Netflix, with the added note that you have not only on-demand television shows and movies but also live television streams available for users.
The application should also support content search so make sure your designs include that.
Challenge Goal
- Create the best possible UI/UX and develop a unique platform to showcase all PX Framework capabilities. Your designs should be extremely engaging and exciting for the user.
Design Considerations
- Consistency between your design concept ideas and PX framework capabilities
- Smoothness concepts for Interaction, Animation, and Transition between every screen
- What should the priority features be?
- UI/UX Best Practice for Cross-Platform Video Streaming App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate using various input devices (remote, keyboards, etc)
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Target Device
- We are targeting TV displays (1280x720) to account for future set-top box implementation.
Branding Guidelines
- Font: Open to Designers
- Icon Style: Open to Designers
- Colors: Open to Designers
Documentation
- Image/Photo Assets: https://drive.google.com/drive/folders/0B6kvOdxpqnKMMmlhTnFxOUF0OVk?usp=sharing
Stock Artwork (Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Marvel App
Upload your screens to Marvel App for review and to showcase the experience (ask for Marvel App prototype/project from copilot or PM in challenge forum)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=615430
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Splash Screen
- Shown when user launches the app / On startup.
- Ideally, the app will have a fast launch, so this screen only has limited time to appear.
- Think how you can show the application brand in a short time to the audience.
02) Homepage Screen
- This is where the user will be able to explore the various live streams and on-demand videos that are available.
- Popular content, List of available channel/on-demand/etc, Recommendations, etc.
- Quick Summary information / Thumbnail overview when user select or hover one of the videos (description of video, rating, HD or not HD, subtitle, movie time, etc)
- Pinned videos, etc
- Remember that user might have a variation for their control devices, from a keyboard to remote TV, how can you offer the best experience for all those input devices.
03) Asset Detail Screen
- When a video asset is selected and the relevant metadata is shown. This can be a distinct separate page or a modified view of the Home page.
04) Video playback Screen
- What is shown when playback is initiated.
- System control to manage the video (fast forward/stop/recording/etc).
- While you won't obviously be designing the stream, there is information that can be provided in this screen.
- Show us the best concept to give the best UI/UX experience for the user using any features available in PX Framework.
05) Search Screen
- Would like to include some sort of content search
- Should include some genres and content categories on the “browse page/search result page”
- Ability to perform another search quickly
06) Other Screens
- Show us other screens that make sense/relatable with Video Streaming App
- Needs to focus on features that you can utilize from PX Framework
- Think of the best possible Interaction, Animation, and Transition between each screen.
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience
- Client partners and their developers. We want them excited about what you can do with PX Framework - how good it can look and perform. We need your help with the looking good part!
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 a layered PSD file, or Adobe Illustrator as a layered AI file or as Sketch Files.
Final Fixes
As part of the final fixes phase, you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Round 1
Submit your initial design for a checkpoint feedback01) Splash Screen
02) Homepage Screen
03) Asset Detail Screen
04) Video playback Screen
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype/project from copilot fajar.mln (via forum or email)
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback01) Splash Screen
02) Homepage Screen
03) Asset Detail Screen
04) Video playback Screen
05) Search Screen
06) Other Screens
- Provide a MarvelApp presentation of your design to help us understand your design concepts (replace your checkpoint images).
- Make sure all pages have correct flow. Use correct file numbering. (00, 01, 02, 03)
Background Overview
PX is a framework (see http://www.pxscene.org/) for creating cross-platform UI applications using JavaScript. For this challenge, we are looking to develop a working PX application to show its capabilities which can be shared with all developers and partners.
Because we are focused in the video streaming business, we want to use this as the main ideas for the creation of the application. Think of an Over-the-Top (OTT) video application, like Netflix, with the added note that you have not only on-demand television shows and movies but also live television streams available for users.
The application should also support content search so make sure your designs include that.
Challenge Goal
- Create the best possible UI/UX and develop a unique platform to showcase all PX Framework capabilities. Your designs should be extremely engaging and exciting for the user.
Design Considerations
- Consistency between your design concept ideas and PX framework capabilities
- Smoothness concepts for Interaction, Animation, and Transition between every screen
- What should the priority features be?
- UI/UX Best Practice for Cross-Platform Video Streaming App!
- How quickly could you find information?
- The interface will be easy and intuitive to navigate using various input devices (remote, keyboards, etc)
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
Target Device
- We are targeting TV displays (1280x720) to account for future set-top box implementation.
Branding Guidelines
- Font: Open to Designers
- Icon Style: Open to Designers
- Colors: Open to Designers
Documentation
- Image/Photo Assets: https://drive.google.com/drive/folders/0B6kvOdxpqnKMMmlhTnFxOUF0OVk?usp=sharing
Stock Artwork (Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Marvel App
Upload your screens to Marvel App for review and to showcase the experience (ask for Marvel App prototype/project from copilot or PM in challenge forum)
Challenge Forum
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=615430
Screen Requirements
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
01) Splash Screen
- Shown when user launches the app / On startup.
- Ideally, the app will have a fast launch, so this screen only has limited time to appear.
- Think how you can show the application brand in a short time to the audience.
02) Homepage Screen
- This is where the user will be able to explore the various live streams and on-demand videos that are available.
- Popular content, List of available channel/on-demand/etc, Recommendations, etc.
- Quick Summary information / Thumbnail overview when user select or hover one of the videos (description of video, rating, HD or not HD, subtitle, movie time, etc)
- Pinned videos, etc
- Remember that user might have a variation for their control devices, from a keyboard to remote TV, how can you offer the best experience for all those input devices.
03) Asset Detail Screen
- When a video asset is selected and the relevant metadata is shown. This can be a distinct separate page or a modified view of the Home page.
04) Video playback Screen
- What is shown when playback is initiated.
- System control to manage the video (fast forward/stop/recording/etc).
- While you won't obviously be designing the stream, there is information that can be provided in this screen.
- Show us the best concept to give the best UI/UX experience for the user using any features available in PX Framework.
05) Search Screen
- Would like to include some sort of content search
- Should include some genres and content categories on the “browse page/search result page”
- Ability to perform another search quickly
06) Other Screens
- Show us other screens that make sense/relatable with Video Streaming App
- Needs to focus on features that you can utilize from PX Framework
- Think of the best possible Interaction, Animation, and Transition between each screen.
Important:
- Keep things consistent. This means all graphics styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target Audience
- Client partners and their developers. We want them excited about what you can do with PX Framework - how good it can look and perform. We need your help with the looking good part!
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you interpret the requirements and show us new ideas and concepts.
- Cleanliness of your graphics and design.
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 a layered PSD file, or Adobe Illustrator as a layered AI file or as Sketch Files.
Final Fixes
As part of the final fixes phase, you will be asked to update the style tile to reflect any new elements that you have added to the design. You may also be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.