Gumball 3000 Website 2.0 Scope Document 1.0 Prepared by Andy Stone July 2009 1 Contents 01. Overview 03 08. Sponsors 02. Timeline of build 8.1 Sponsors Home 37 2.1 scope and design 06 8.2 Sponsors individual pages 38 2.2 site build 07 8.3 Sponsor Us 39 2.3 testing 08 8.4 Past Sponsors 40 03. Home Page & Navigation 09. Networks 41 3.1 Navigation overview 09 10. About Us 3.1 News listing 11 10.1 About Us in detail 42 3.2 Principle navigation 12 10.11 General Information 43 3.3 Secondary navigation 14 10.12 Sponsors 44 3.4 Static navigation 16 10.13 Partners - People we do 04. Blogs business with 45 4.1 Blogs Home 17 10.14 Gumball Creative 46 4.2 Blogger’s archive page 19 10.15 Employment 47 4.3 Blog entry page 20 10.1 Media 48 05. Rally 10.21 Press Photos 49 5.1 Rally Home 21 10.22 Artwork & Logos 50 5.2 Rally Latest 22 10.23 Press Releases 51 5.3 Enter the Rally 23 10.24 Press Clippings 52 5.4 2010 Route Map 24 10.25 About Gumball 53 5.5 Images and Video 25 10.26 Gumball History 54 06. Features 10.3 Contact Us 55 6.1 Features Home 27 11. Search 6.2 Features Copy 28 11.1 Search Entry 56 07. Store 11.2 Search Results 57 7.1 Store Home 29 12. Enter the Rally 58 7.2 Store Campaign 30 13. Sign Up/Log in 59 7.3 Store Featured Item 31 14. Newsletter 60 7.4 Store Apparel 32 15. RSS button 62 7.5 Store Cart 34 7.6 Store Login 35 2 01. Overview The new-look Gumball 3000 website will provide a high-resolution, image driven online platform showcasing the very best of Gumball’s unique offerings. Working within minimal design disciplines, the focus of each parent page will be an exclusive hi-res image lifted either from Gumball’s extensive archive or provided by a partner or blogger. The background image will engulf the entire screen space. To accommodate variations in aspect ratio, the image will automatically scale to the screen size it is presented on. Japanese fashion blog site, www.honeyee.com, have already developed a similar method of dealing with aspect ratio issues (see below). 3 4 The site’s principle navigation will be drilled down to just four categories with the permanently positioned Gumball logo constantly directing visitors to the home page: BLOGS RALLY FEATURES STORE Secondary pop-up navigation bars will direct visitors to: SPONSORS linking to information on Gumball’s relationship with headline sponsors NETWORKS Facebook, Twitter, YouTube, Flickr and Myspace ABOUT US Linking to the following subsections: MEDIA INFO CONTACT These sections will break down further as described below Static Navigation – present throughout the user journey SEARCH Keyword search facility NEWSLETTER Link to sign up for monthly newsletter and addition to the Gumball database ENTER THE RALLY Link to 2010 rally application form 5 02. Timeline of build If all goes to plan, the new Gumball 3000 website will go live on Thursday 1st October, following a three week period of testing. Content publicising the upcoming new website will run on the existing Gumball site in the run up to the launch with a newsletter going out to the entire Gumball database on the eve of the launch. 2.1 Scope and Design Wednesday 8 July 2009 Scope document and initial designs completed and delivered to: Maximillion Cooper (MC) Russell Fortune (RF) Action: Andy Stone (AS) and Ricky Bowry (RB) Wednesday 15 July Final comments and questions into AS and RB from MC, RF and Jon Duckett – executive producer for build (JD) Wednesday 22 July Comments and questions actioned by AS and RB Friday 24 July Designs approved and signed off by MC Monday 27 July RF begins build 6 2.2 Site Build to be confirmed upon RF’s return from holiday (13/07/09) 7 2.3 Testing to be confirmed upon RF’s return from holiday (13/07/09) 8 03. Home Page & Navigation: 3.1 Navigation overview The Gumball 3000 home page will be a dynamic hi-res image driven introduction to the latest in Gumball news and will act as an entry point and central hub of the site. The entire visual will have a light grey overlay that will disappear when the image is revealed through clicking on the top right ‘X’. 9 home page upon site entry home page with ‘X’ ticked to close navigation 10 3.1 News listing HOME displaying dynamic news listing To the right of the page, a text listing will show the four most recent items of content on the site. These items will have been generated through the BLOGS and FEATURES sections. On entering the site, the hi-res background image will reflect the lead story in this section. When the subsequent news links are rolled over the background image will change to the image specific to that news item. It’s brilliant. Through the content management system, the editor will be able to assign specific blog entries and features to be flagged and linked to from the home page, allowing certain articles to remain on the home page longer to enjoy maximum exposure. 11 3.2 Principle navigation HOME displaying principle navigation Sticking with the hi-tech, stylised and minimal themes that will resonate throughout the site, the navigation has been drilled down to four principle sections accompanied by an omnipresent home page logo: PERFORATED GUMBALL 3000 LOGO – linking back to home page BLOGS RALLY FEATURES STORE The principle navigation, positioned vertically top left, will only appear on the home page, although will be represented horizontally at the bottom left of all subsequent pages (as displayed below). The principle navigation will not link to any subsections but will link straight to the subsequent parent pages. The Gumball logo home page link will remain visible throughout the user journey. 12 13 3.3 Secondary navigation HOME with secondary navigation revealed SPONSORS The SPONSOR link will direct visitors to individual internal sponsor pages that briefly relay the sponsor’s relationship with Gumball, backed by a full page hi-res image reflecting this partnership – for example: Gumball car with PUMA branding / PUMA / Gumball collaboration driving shoe etc. Ideally we will have a revolving number of images per sponsor. A link to the sponsor’s website or online Gumball presence will also be featured. NETWORKS All principle social networking sites – namely: Facebook, Twitter, YouTube, Flickr and Myspace – will be directly linkable. Each will link directly to the predominate official Gumball page – for example: www.youtube.com/gumball3000. These links will be set to open in a new window. The navigation bar will be need to be flexible to incorporate new additions to the networks list – especially if a network not previously included is particularly prominent in one of the territories the rally is visiting – for example: Bebo being massive in Germany. An OTHER tab will also be included that will link to an internal NETWORKS home page that lists all social network presences and approved fan sites. 14 ABOUT US About us will be broken down into three subsections. MEDIA INFO CONTACT US When clicked on, the pop-up links will navigate directly to their subsequent parent pages as follows: MEDIA PRESS PHOTOS ARTWORK & LOGOS PRESS RELEASES PRESS CLIPPINGS ABOUT GUMBALL GUMBALL HISTORY INFO INFO SPONSORS PEOPLE WE DO BUSINESS WITH EMPLOYMENT CONTACT US One pager with full contact details and a contact email link 15 3.4 Static navigation HOME Static navigation A static navigation bar will be positioned vertically to the top right of the page. This bar will remain in place throughout the entire site. SEARCH Keyword search facility, linking to a search results page. NEWSLETTER Link to sign up for monthly newsletter and for addition to the Gumball database ENTER THE RALLY Link to 2010 rally application form LOG IN Link to the sign-up / log in page. Space permitting, this link will be renamed SIGN UP / LOG IN 16 04. Blogs 4.1 Blogs Home BLOGS entry page The BLOGS section of the new site will host the majority of the site’s content, including all news announcements. Twenty regular bloggers selected by MC will regularly contribute to the area using their own direct access to the CMS. Rather than having a dedicated news section, one of the permanent blog names will be RALLY NEWS, from which all rally updates will be flagged. The methodology behind the BLOG page will reflect the dynamicism of the HOME page. Technology and load time permitting, the blogger’s profile picture will be displayed as the entire background when his or her name is scrolled over. A brief description of the blogger will be published alongside their name – for example: DJ MUGGS // CYPRESS HILL or TONY HAWK // PRO SKATER AND GUMBALL VETERAN. 17 Scroll over of blogger’s name If the load time of the images is deemed too long for so many hi-res images, an alternative page will be built using thumbnails to represent all of the bloggers (as below). example of alternative blog home page layout courtesy of www.honeyee.com 18 4.2 Blogger’s archive page BLOGS archive page The blogger’s ARCHIVE page will feature a scroll down bar to the right of the active left hand side of the page. Images relating to each blog entry will be displayed and, when scrolled over, each will reveal a title and top-line description information on the blog entry, which will be limited to 140 characters including spaces (the same as a Twitter feed).