Hercules - PX Video App Design Concepts Challenge









    The challenge is finished.
    Show Deadlinesicon-arrow-up

    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.

    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.

    Challenge Format

    This competition will be run as a two-round challenge.

    Round 1

    Submit your initial design for a checkpoint feedback
    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)

    Round 2

    Submit your final design plus checkpoint feedback
    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)

    Regarding the Rounds:

    • To be eligible for Round 1 prizes and design feedback, you must submit before the Checkpoint deadline.
    • A day or two after the Checkpoint deadline, the challenge holder will announce Round 1 winners and provide design feedback to those winners in the “Checkpoints” tab above.
    • You must submit to Round 1 to be eligible to compete in Round 2. If your submission fails screening for a small mistake in Round 1, you may still be eligible to submit to Round 2.
    • Every competitor with a passing Round 1 submission can submit to Round 2, even if they didn't win a Checkpoint prize.
    • Learn more here.

    Full Description & Project Guide

    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

    - 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:

    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.

    - 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.

    How To Submit

    • New to Studio? ‌Learn how to compete here.
    • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
    • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
    • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

    Winner Selection

    Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

    Reliability Rating and Bonus

    For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
    Read more.


    2018 Topcoder(R) Open


    Screening Scorecard


    Your Design Files:

    1. Look for instructions in this challenge regarding what files to provide.
    2. Place your submission files into a "Submission.zip" file.
    3. Place all of your source files into a "Source.zip" file.
    4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
    5. Create a JPG preview file.
    6. Place the 4 files you just created into a single zip file. This will be what you upload.

    Trouble formatting your submission or want to learn more? ‌Read the FAQ.

    Fonts, Stock Photos, and Icons:

    All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy here.


    All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to pass screening here.

    Questions? ‌Ask in the Challenge Discussion Forums.


    • Layered PSD files created in Adobe Photoshop or similar
    • AI files created in Adobe Illustrator or similar
    • Sketch

    You must include all source files with your submission.