IGN Video Hub Upgrade
Total Page:16
File Type:pdf, Size:1020Kb
Video Hub Update Project v1.0(7) Contents: Project Purpose: Requirements: Create a new presentation platform for promotion of original and popular CR-1: Hub Redesign video content in a manner which results in click through and video views. Findability of video content for users looking within specific content a) The hub must be redesigned to promote original content, core genres or categories should also be supported. video channels, and popular or relevant content. b) Users must also be able to find video content by topic area. Business Goals: Content Promotion: Present the depth and range of IGN's growing CR-2: Hub Slotting inventory of originally produced content to build brand awareness a) Editors must have the ability to slot direct links to the video player and audiences for these original shows and videos. and the new video or video playlist galleries. Audience Engagement: Promote expansion of our video ad inventory views along with overall unique views and video view metrics. b) The hub slotting tools must be updated to support this. Video Findability: Help users find videos within content categories and CR-3: Dynamic Indices platforms with video content on IGN. a) Dynamic Indices must be locally created for popular video KPI: platforms or popular video content in order to keep users within the IGN Click-through rate Video experience. Unique visitors Page views Tracking: ATA tracking, Google Analytics etc to determine how often video hub is viewed and links are accessed. Exclusions: This project will not cover: Creation of Video Mini-Hubs for promotion of Game Trailer, HD, Review, or Shows/Review content. These will each be new projects or a combined project. Creation of Super Sized Indices or Video Mini-Hubs on a per channel basis. This would be a new project which is network wide or specific to Video Indices. Video Hub Update Project v1.0(7) Overview Description: Change Log Entry Points: N/A Change Log Notes for Developers Video Hub Update Project v1.0(7) Overview Description: Video Hub Project Summary Page 4, 5, 6 N/A Entry Points: IGN Video Hub Page Section Nav Notes for Developers Video Channels Game Trailers Overview. New Hub page. Movie Trailers Links to new indices for video objects. Reviews Links to video player. Previews More Categories Slotted Content Top Video Stories Featured Video Core Content Channels Featured Shows Page (TBD) Featured Originals IGN Video Indices (to Player or to Index) Automatic Content Top Videos Latest Game Trailers Latest Movie Trailers Latest Video Reviews Latest Video Previews Latest Videos View All (for those Automatic Content sections with View All, link to appropriate index.) IGN Video Player Video Hub Update Project v1.0(7) Overview Notes for Developers (cont’d) 1 Network Imprint Description: IGN Video Hub – Top of Page (1) 6 Top Video Stories – General Requirements 2 IGN Logo and Video Image DHTML unit that displays custom story images of top 5 Entry Points: IGN Home Page, global nav, search engines. videos (slotted by editorial.) Unit must be 16:9 aspect ration. Pixel dimension of image [Google 3 Welcome [user name] | My Account | Log Out 1 4 Search: Web logo] area will be fixed and will be in the range of 427 x 240 to 480 x 270 (TBD by visual design.) Previews More Categories 5 Video Channels Game Trailers Movie Trailers Reviews Images may transition via animation (TBD by technical limitations of DHTML.) Top Videos Image order determined by editorial. 6 Video Ttile Notes for Developers The images will auto-refresh; users may also navigate 2 Lorem ipsum Object Name: Caption 7 Video Title Custom through images using UI elements described below. image dolor sit amet 1 Platform/Type Lorem ipsum dolor sit amet, Top Video Stories should be SEO friendly with headline for 1 Network Imprint. consectetuer adipiscing elit. each image included as an ALT tag. Standard network imprint. Object Name: Caption Aenean ultrices. 2 Platform/Type Top Video Stories – Video Title and Description. 8 8 Video Ttile 7 2 IGN Logo and Video Image. (To be designed.) Lorem ipsum Each image will be accompanied a header and Custom dolor sit amet Object Name: Caption summary/strapline as slotted by editorial. Customimage Top Video image 3 Platform/Type 3 Login/Logout. Size, font and placement TDB by visual design. Single line login box. Refer to mockup on Page 6. Object Name: Caption 8 Top Video Stories – Navigation Arrows. 4 9 Video Ttile Platform/Type DHTML unit will include previous and next navigation 4 Google Search. Lorem ipsum arrows. Watch Now Custom Shortened Google search for hub (Web, IGN.com, hub Arrow will enlarge, change color or otherwise indicate image dolor sit amet Object Name: Caption options). 5 Platform/Type INSIDER active state on hover. 10 Refer to mockup on Page 6. Clicking left arrow displays previous image and headline; right for next image and headline. 5 Section Navigation. Links to individual sections within video channel. Xbox 360 PS3 Wii PC Movies Insider 9 Top Video Stories – Watch Now button. Thumb Thumb Thumb Thumb Thumb Thumb DHTML unit will contain a button that links to video player Video Channels – dropdown that contains the following for Top Video currently displayed. links to video indices (which correspond with links in Featured Originals Button will animate (glow, enlarge, etc.) on hover (TBD Video Channels section described on “Bottom of by visual design.) Page” page): 10 Top Video Stories – Image Picker. DHTML unit will feature an image picker below image(s). [Games] [Entertainment] DVD Picker will not have labels but user should intuitively Wii Med rect Gear Customimage promo Customimage promo Customimage promo comprehend purpose. Xbox360 300x250 Movies Each rectangle corresponds to an image and order of Playstation 2 Stars rectangles mirror order of images as slotted by Playstation 3 TV editorial. PC Games Picker will have three states: unselected, current DS Video Title Video Title Video Title selection and hover selection. Each state will be PSP Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, visually distinct. Retro consectetuer adipiscing elit. consectetuer adipiscing elit. consectetuer adipiscing elit. Clicking on unselected rectangle will cause DHTML Top Game Trailers – links to Games Trailer Index (NEW). Story image unit to transition to image which Game Trailers view all > Latest Videos Movie Trailers – links to Movie Trailers Index (EXISTING.) 1 | 2 | 3 | 4 | 5 corresponds to clicked rectangle. See Hulu.com for Reviews – links to Video Reviews Index (NEW.) [time] [channel] [video title] example (albeit in Flash.) Previews – links to Video Reviews Index (NEW.) [date] [caption] (Combines multiple classifications: Behind the Scenes, Preview, Developer Commentary) [time] [channel] [video title] [date] [caption] More – dropdown with additional links. Each item links to Notes for Visual Designers Video 160x120thumbnail Video 160x120thumbnail Video 160x120thumbnail Video 160x120thumbnail video index for listed item (THESE ARE ALL NEW INSIDER INDICES): [time] [channel] [video title] 1 Login/Google Search Sections. [date] [caption] To appear on the same line, space permitting. Object Name Object Name Object Name Object Name Gameplay (Combines multiple classifications: Google search options will appear in a dropdown rather Platform Platform Platform Platform [time] [channel] [video title] Cinematic, Single-Player Gameplay, Multiplayer [date] [caption] than as radio buttons. Gameplay) Movie Trailers view all > Likewise, links to community content will be displayed in Movie Clips 1 | 2 | 3 | 4 | 5 [time] [channel] [video title] a drop down. TV Clips [date] [caption] Top Video Stories – General Requirements Interviews 2 Shows This section should be DHTML. Flash may be utilized as a last resort if DHTML is technically incapable of fulfilling requirements. (See next document page of Images must be 16:9 aspect ration. Pixel dimension of document for continuation of image area will be fixed and must be in the range of top of hub.) 427 x 240 to 480 x 270. Images may transition via animation (TBD by technical limitations of DHTML.) Video Hub Update Project v1.0(7) Overview Notes for Developers (cont’d) Network Imprint Description: IGN Video Hub – Top of Page (2) 6 Top Video – Content and Behavior (cont’d). IGN Logo and Video Image Example content: Entry Points: IGN Home Page, global nav, search engines. Alone in the Dark Video Review -X360 The Mummy: Tomb of the Dragon Emporer (2008) Trailer #2 – Movies Google Search My Account | Hello [user name] | Logout The Mummy 3 Trailer #2 – Movies MGS4: Guns of the Patriots Preview – PS3 Video Channels Game Trailers Movie Trailers Reviews Previews More Categories Metal Gear Solid 4 Easter Egg: Photo Beauty – PS3 1 1 4 5 2 Top Videos 2 Video Ttile If Media Classification is utilized, follow these rules for Notes for Developers display of text. Lorem ipsum Commercial Custom Common Object Name or Caption Video Title 6 Cinematic Review image3 dolor sit amet 1 Platform/Type Common Classification 1 Featured Video – Slotting. Lorem ipsum dolor sit amet, Single-Player Gameplay Preview Three (3) featured videos will be slotted at all times consectetuer adipiscing elit. (Output text as: Interview Common Object Name or Caption which. Aenean ultrices. 2 Platform/Type Common Classification Gameplay) Developer Commentary Each featured video will link to the video player. Video Ttile Multiplayer Gameplay Music Video (Output text Lorem ipsum (Output text as: as: Video) Custom Common Object Name or Caption Featured Video – Custom Image. dolor sit amet Gameplay) Fan Video 2 Customimage Top Video image 3 Platform/Type Common Classification Each Featured Video will be represented by a thumbnail Movie Clip (Output text as: Show image. Clip) Behind the Scenes Common Object Name or Caption Image ratio will be 16:9; exact pixel dimensions to be TV Show Clip (Output text Video Video Ttile 4 Platform/Type Common Classification determined by visual design.