Challenge Summary
Welcome to the Hercules TV and Movie Rating Game Storyboard - Regular User Functionality Phase 1 REPOST.
For this contest we need you to create the storyboard design for a TV and Movie Ratings Game. This game design must be attractive, addictive, easy-to-use web application where a user can select movies or TV shows that they’re interested in and then provide a rating to whether they think one list of items is better than another list of items.
Round 1
Initial Hercules TV and Movie Rating Game Storyboard - Regular User Functionality Phase 1 REPOST
1. Recommendation Game Flow
2. Metadata Flow
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final Hercules TV and Movie Rating Game Storyboard - Regular User Functionality Phase 1 REPOST
1. Recommendation Game Flow
2. Browse Game Flow
3. Metadata Flow
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Contest Details
Hercules Corporation is a subscription video provider. We want our customers to get maximum value out of their subscriptions, so we want to make it as easy as possible for them to find video content that is interesting to them. To help customers discover TV shows and movies, Hercules Corp has developed a video recommendation platform that can recommend similar videos to a customer based on videos that they like.
TV and Movie Rating Game Storyboard - Regular User Functionality (Phase 1) Contest Requirements:
Important Notes:
- The game will be called "The Rating Game"
- Use a logo placeholder in your design.
- Your design should have a "Game" feeling instead of "Website". This site can be inspirations of your design.
- This game will be developed for use on Modern Web/Mobile/Tablet devices (HTML5)
- Make sure all UI elements are designed to have a fluid layout, so it will support landscape and portrait layout.
- Use 1024px x 768px as the screen size for your game design
- Fonts allowed to use are: "Helvetica Neue", "Helvetica", "Arial" and "Sans Serif".
- Make sure you declare font information properly to avoid failed screening.
- The provided Image Posters must be used at 144px x 201px size. You can find the provided artwork in the Image Posters.zip
- “The client wants the design to look, feel, and interact like a GAME not a web page. We want you to be creative. Copying the wireframe will not be accepted”
- We're open to any color themes usage.
- Transitions/Interactions are our main concern to make the game look attractive/addictive. Suggest any animation ideas to make the application appealing and awesome.
- We are looking for a clean and professional game design
- Research the Web/Mobile/Tablet browsers guidelines for best practices, here's some links to help you begin designing the game for HTML5:
30 Excellent iPad App Interfaces
40 Inspiring iPad App Websites
A Showcase of 30 iPad User Interfaces
Best iPad Websites: 100 Inspiring iPad App Web Designs
30 Inspirational Ipad and Iphone App Interface Design
iOS Inspiration Site
In your submission, you will need to design pages that show the game click-path/workflow.
Note: There area some scenarios you should design based on the requirements.
Contest Requirements:
In this contest you're required to create these 3(three) game flows in your submissions design. Read more details information for each below:
1. Recommendation Game Flow
Wireframe Reference: RecsGameWireframes.pptx
- Landing Page
- Choose Type "Movies" or "TV Show"
- Select Genre
- A list of movies list displayed
- select the movies along with 2 recommendation sets
- Summary, user will be asked if they wish to complete another rating.
- After rating 3 titles, Award.
2. Browse Game Flow
Wireframe Reference: BrowseGameWireframes.pptx
- Landing page
- Choose Type "Movies" or "TV Show"
- Select Genre
- Select Filter, options: Genre, Start Letter, Year, Airtime
- 2 title displayed along with voting button
- Summary, user will be asked if they wish to complete another rating.
3. Metadata Game Flow
Wireframe Reference: MetadataGameWireframes.pptx
- Landing Page
- Choose Type "Movies" or "TV Show"
- Select Genre
- List of Movies List displayed
- Movies displayed along with 2 voting options
- Summary, user will be asked if they wish to complete another rating.
Game Flow Details Informations:
Landing Page
- This is the landing page of "The Rating Game". Design of this page should attract user to play the game.
- Design the layout of the landing page, so it will bring attractive, addictive, easy-to-use web app.
- The screen need include a start button for when the user is ready to start rating "Movies" or "TV Shows".
- This page will contains some helpful text and image. How the help should looks? How to present them on page?
Select Genre
- User click the options of "Movies" or "TV Shows" then landed on this page, where they can select one of these genre below:
-- Comedy
-- Drama
-- Action
-- Sci-fi
-- Note: There will some random variations options with longer characters in future development. Your design should anticipate that. But the maximum genre need displayed always 4 options.
- Need you to think how to go back to let user choose another rating flow of "Movies" or "TV Shows".
- This page will contains some helpful text and image. How the help should looks? How to present on page?
Select "Movies" or "TV Shows" From Genre
- After user selects to rate some genre. A list of that genre movies will be displayed.
- The user can select one, or request a new set if they don't like the choices displayed.
- There will be helplful text to guide user to select the movies option.
- Total poster need displayed on this page about 4 - 6 movies.
- Image Posters must be use 144px x 201px size. Re-use provided image posters inside Image Posters.zip
- Any other useful informations need displayed on each movie poster?
- Follow existing style guide for the action buttons.
- If user select one of the movies, it will take to flow as explains below.
Select "Movies" or "TV Shows" Set
- This page will contains 2 sets of movies group to let user choose which set is better.
- Each set should contains about 4-5 different movie posters.
- Each set should contains one action button to select the set.
- Re-use provided image poster in this flow.
- Add something about when user do mouse overs on image posters, maybe put some descriptions. Any other ideas?
Rating Summary "Movies" or "TV Shows"
- This page will contains list of user selected movie. It can show about 4-5 movies.
- There will some summary inforamation based on their choices in previous rating game flow.
- User can start new set of rating game based on existing genre. Or they can start the game by select "Movies" or "TV Shows" Set.
- Put some helpful text to encouraged user to play the new sets of rating game.
Award
- This screen will show after use do some series of rating
- Should place icon/image related to award
- Put some helpful text to encouraged user to play the new sets of rating game.
Browse Game Rating Screen
- This screen will show only 2 movies compared.
- Put some helpful text to help user voting the option.
- There will placed action button to select each options with "This is Important" label on the button. Any better wording?
- Put some helpful text to encouraged user to play the new sets of rating game.
Metadata Game Rating Screen
- This screen will show only 2 movies compared.
- Put some helpful text to help user voting the option.
- Instead of movie list in this page only show metadata description needed to voted
- Put some helpful text to encouraged user to play the new sets of rating game.
Target Audience
- Users interested in this Movie/TV Game
Judging Criteria
- How well you design game storyboards for TV and Movie Rating Game
- Cleanliness of page layout and all UI elements in every page.
- User Experience of the application.
- Consistency Design on Modern Web/Mobile/Tablet devices.
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 (sizes or colors) or modify overall colors.
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.