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

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

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.

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

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

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.

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). The time and date of the blog entry will also be displayed at the bottom of the image when scrolled over.

When an individual image is clicked on the user will be taken to a unique blog page for that particular entry.

19 4.2 Blogger’s entry page

BLOGS entry page

The blogger will be able to upload text, images and video to his or her page. By clicking on the ‘+’ sign on the entry, readers will be able to distribute the entry to their personal social networking pages or personal blog, or rate it on Digg.

20 05. Rally

5.1 Rally home

RALLY entry page

The RALLY section of the site will be the repository of all things rally past, present and future. From here visitors to the site can access the latest rally news, apply to enter the rally, review the latest route and peruse images and video from the past 11 years.

The top left nav will list the following elements: RALLY LATEST ENTER THE RALLY 2010 ROUTE MAP GALLERY INFO

The individual elements are described in detail below.

21 5.2 Rally Latest

RALLY latest

RALLY LATEST will link directly to the 2010 RALLY blog page, which will contain editorial provided or commissioned by the Gumball website editor.

RALLY article

22 5.3 Enter the Rally

RALLY enter – as accessed through the static nav and the rally page

Like the top right static navigation, the ENTER THE RALLY online application form will be accessed directly from the Rally page. The background image for the entry form will remain the same when accessed from both portals.

23 5.4 2010 Route Map

RALLY route

The ROUTE MAP will link to a simple bespoke map that will ideally include some level of functionality.

This will perhaps include pop up novel stats about each city. A Gumball skinned Google Maps ‘mash up’ could also be used to make the map more interactive. Russell to investigate.

24 5.5 Images and Video Utilising the latest technology, this area of the site will host and highlight the rally’s visual history in a simple yet devastatingly effective timeline.

A very good example of this kind of gallery can be viewed at www.fwaphoto.com/ (see below).

Each previous year of the rally will be represented by one screen’s worth of grey overlaid large thumbnail images (50 max). Of these, some will host video that will be flagged up by the inclusion of a ‘play’ arrow on the image.

When scrolled over the image will be illuminated in its full colour glory and a block of text describing the image and crediting the photographer will be displayed at the bottom of the page.

When clicked on, the photos will open as full screen hi-res images, while the videos will open as full screen video when the video is of adequate quality, or half screen size when lower quality. Options to use YouTube or a similar video hosting service will be explored to reduce bandwidth demand and its associated costs.

As with all other destination pages a hi-res image will provide the background, although this image will be more heavily overlaid to avoid a visual conflict with the thumbnails.

Although this is a more complex page than other destination pages, the principle, secondary and static pages will remain in place as with other pages.

RALLY gallery

RALLY image display – ‘x’ feature allows all text to clear to reveal full image

26 06. Features

6.1 Features Home

FEATURES home

The FEATURES home page will host a list of the longer length articles and interviews that will be featured on the site.

The list will become scrollable when the list exceeds the page length.

These features will be compiled mainly from interviews with Gumball friendly celebrities, business people anyone with a story to tell about the Gumball or their involvement with the rally/brand etc.

27 6.2 Features copy

FEATURES copy

The FEATURES COPY pages will host the body of the copy from the feature.

These pages will be equipped to host images and video embeds and will be scrollable for longer copy.

28 07. Store

7.1 Store Home

STORE home

The site’s online store will be the one-stop-shop for all Gumball attire and merchandise. It will follow the site’s style guide of using hi-res imagery as well as an innovative approach to displaying the clothes and Gumball merch.

The principle navigation on the Store home will feature the following links: BIG BEN TO BIG APPLE [name of current campaign] FEATURED ITEM [selected item of the day/week/month] APPAREL ACCESSORIES COLLABS DVDs & ART SALE

29 7.2 Store Campaign

STORE campaign home

The Campaign page will effectively be the look-book for the most recent run of T-shirts.

STORE campaign item

30 7.3 Store Featured Item

STORE featured item

The featured item space will be designated to a store item we are looking to push on the site. The item will change on a regular basis, frequency to be agreed.

31 7.4 Store Apparel

STORE apparel home

The Apparel section will enjoy two unique horizontal nav bars at the bottom left of the screen. The higher of the two navs will represent the category of items, with the lower nav giving the visitor the opportunity to return to the other areas of the store.

The page will automatically default to T-shirts, with the various lines displayed vertically on the left of the screen.

As with all other areas of similar navigation, when a left hand link is scrolled over the background image to change to the relevant T-shirt.

Once clicked on the visitor will be taken to a page detailing the specific item. By clicking on the colour options, the background image will change to reflect the numerous options. The desired item’s size can also be selected at this point.

In a similar manner to amazon.com’s feature of flagging items that customers have also purchased in addition to the selected item, a minimum of two other store items will be displayed on this page.

32 When the visitor adds an item to the cart via the clearly signed ADD TO CART button, the message CART ITEMS 1 will be displayed at the bottom of the top right static nav. When more items are added the number of items displayed will rise accordingly.

In addition, once an item is added to the cart, a new button will show on the page reading VIEW CART that will link directly to the cart.

STORE apparel item detail

33 7.5 Store Cart

STORE cart

Selected items will be displayed individually with the colour-way and size displayed. An option will also allow the user to delete an item.

A single nav bar will sit horizontally at the bottom left of the screen that will link to CONTINUE SHOPPING and TERMS while a CHECKOUT button will sit under the total price display.

34 7.6 Store Login

STORE log in

If the visitor is not logged in when the CHECKOUT button is clicked, he or she will be taken to a STORE specific log in page.

STORE sign up - enter details – page 1

STORE enter details – page 2

CHECKOUT mock up to follow once a shop solution has been decided upon.

36 08. Sponsors

8.1 Sponsors Home

SPONSORS home page

The SPONSORS home page will be accessed from the ALL SPONSORS link on the secondary nav section of the site and from numerous link points elsewhere on the site.

It will feature all of the headline and secondary sponsors with links to SPONSOR US, PEOPLE WE DO BUSINESS WITH and PAST SPONSORS.

37 8.2 Sponsors individual pages

SPONSORS individual page

Each individual sponsor will be allocated their own page that will contain a brief editorial explaining their relationship with Gumball and a hi-res background image reflecting their brand in a Gumball setting, ideally with celebrity endorsement. A link to the sponsor’s website (preferably a page talking about their relationship with Gumball) will also feature predominantly on the page.

38 8.3 Sponsor Us

SPONSOR US page

The SPONSOR US page will give a brief top-line description of what sponsors can expect from Gumball and the benefits of being associated with the rally or the company’s other endeavours.

A link to MORE INFORMATION will direct inquisitive visitors to a more detailed page explaining the structure of sponsorship deals – and links to the SPONSOR HOME and PAST SPONSORS page will also feature on this page (to be added on build).

39 8.4 Past Sponsors

PAST SPONSORS page

Former Gumball sponsors will be displayed alphabetically to encourage potential new sponsors to get involved. Where any of the past sponsors still have mentions of their involvement with Gumball their name will link to the feature. This page will be accessed from the SPONSORS HOME page and the SPONSOR US page.

40 09. Networks

NETWORKS home page

The NETWORKS tab will present direct links to Gumball managed social network presences that will open up in a new window. Additional smaller platforms will be accessed via the OTHER tab, which will open the NETWORKS home page.

This page will also act as a hub for all social networking activity and will include all links and Gumball approved fan sites. The page will also be linked to directly from other pages and stories.

41 10. About Us

10.1 About Us in detail

INFO home

The ABOUT US section of the secondary navigation will offer visitors to the site all of the top- line Gumball information they should ever require.

To make this information easy to access and navigable, when clicked on the ABOUT US tab will display three areas of further navigation, those being the self-explanatory: INFO, MEDIA and CONTACT US.

INFO and MEDIA will in turn reveal deeper layer levels of navigation as follows: INFO: INFO, SPONSORS, PEOPLE WE DO BUSINESS WITH, EMPLOYMENT MEDIA: PRESS PHOTOS, ARTWORK & LOGOS, PRESS RELEASES, PRESS CLIPPINGS, ABOUT GUMBALL, GUMBALL HISTORY

The CONTACT US section will simply be a one pager with all necessary contact information and links to the NETWORKS home page.

42 10.11 Info

INFO home page - topics

The INFO home page will present a number of topic links that, when clicked, will direct the visitor to more information on the topic. This system will work using an anchor mechanism similar to the existing Gumball FAQs.

INFO – topics revealed

43 10.12 Sponsors

SPONSORS home page

The SPONSORS tab will link directly to the SPONSORS home page as describe on page 37.

The placement of the SPONSORS home page within the INFO section is to ensure maximum exposure to one of Gumball’s principle revenue streams, whilst giving value added coverage to existing Gumball sponsors.

44 10.13 People we do business with / partners

PARTNERS people we do business with

The PARTNERS page will effectively be a reciprocal links page for Gumball partners, suppliers and friends.

This page, although removed from the top level navigation, will help improve search engine optimisation. Offered links on this page could also be used as collateral in securing good deals with potential suppliers and entrants.

45 10.14 Gumball Creative

GUMBALL CREATIVE home

The GUMBALL CREATIVE home page will showcase the ingenuity and diversity of the in- house Gumball design team.

Contact information will be published with links to the ARTWORK & LOGOS and APPAREL sections.

46 10.15 Employment

EMPLOYMENT page

Prospective Gumball employees can visit this page to check on what criteria Gumball expects from potential employees.

The page will also present links to current vacancies through the VACANCIES tab and information on applying as an intern via the WORK EXPERIENCE tab.

47 10.2 Media

MEDIA home

The MEDIA section of the site will host numerous resources of use to members of the press and those looking to find out more about Gumball.

From here hi-res official photos, artwork assets and press releases will be downloadable – and press clippings will be viewable.

The image galleries will be arranged by year with only the very best photos and pieces of artwork selected. The GUMBALL HISTORY will likewise be ordered chronologically (most recent year first) with one-page irreverent editorials revealing the highlights of the rally through the years.

48 10.21 Press Photos

MEDIA press photos

The PRESS PHOTOS section will display a limited selection of the best photos from the most recent rally. Visitors will also be able to view images from earlier rallies by clicking on the arrow at the bottom left of the page.

When clicked on, images will fill the entire thumbnail image area with a link below the image inviting the visitor to download a hi-res version of the image.

49 10.22 Artwork & Logos

MEDIA artwork & logos

As with the PRESS PHOTOS section, the ARTWORK & LOGOS section will present the best downloadable artwork assets from each year’s rally.

This area will also act as a destination to send potential clients looking for art direction and design on the GUMBAL CREATIVE page (page 46).

A brief description of Gumball’s service in this area and contact details will also be incorporated in these pages.

50 10.23 Press Releases

MEDIA press releases listing

MEDIA press release article

Using the same functionality as the FEATURES pages, the PRESS RELEASE pages will flag up a list of press releases on the entry page with scroll down when the list exceeds the page length. When clicked on, these links will take the visitor to a full text version of the press release, with subsequent links and the option to download a pdf version of the release.

51 10.24 Press Clippings

MEDIA press clippings

The PRESS CLIPPINGS page will display the covers of magazines, logos from TV and radio networks, and websites that have covered the rally.

When clicked on these buttons will link to a scanned hi-res image of the complete article. As with the rest of the MEDIA section, each year of the rally’s history will be given its own page.

Owing to the large and varying amount of coverage the rally has received over the years, the thumbnail box will come equipped with a scroll down mechanism to reveal more articles, with the more prestigious publications sitting higher in the thumbnail box.

52 10.25 About Gumball 3000

MEDIA about Gumball

The ABOUT GUMBALL page will host top line information on the Gumball ethos – where, when, why, what, who kind off information.

In addition, a button will link to GUMBALL HISTORY.

53 10.26 Gumball History

MEDIA Gumball History

The GUMBALL HISTORY pages will host brief editorials (300 words max) describing each year’s rally using the same chronological mechanism as the MEDIA galleries.

This editorial could be written in bullet point form to give visitors all of the information they require in a digestible, quick to access form. This copy will be scrollable to allow for additions and amendments.

54 10.3 Contact Us

CONTACT home

The CONTACT US page simply gives visitors all of the contact information they should require. Management to decide on whether to included telephone numbers.

A button link to the employment section, listed as WORK AT GUMBALL, will also feature on the CONTACT US page.

55 11. Search

11.1 Search box

SEARCH found throughout the site

The ever-present SEARCH box can be found on every page on the site and allows the visitor the opportunity to enter a word, name or term that – when the return button is pressed – will return a page of SEARCH RESULTS.

56 11.2 Search results

SEARCH results

The SEARCH RESULTS page will return the visitor’s search request in a text format, listing at the top of the page the term searched for with a list of relevant headings below. The date of which the item was created, and the section in which the item is found, will also accompany the item title. The results will be presented in chronological order with the most recent item displayed first.

If technically possible, when a single image or a selection of images is returned as part of the search results, the most recent will then be used as the hi-res background image of the SEARCH RESULTS page.

For example: if the visitor searches for ‘Loomis’, the result would be presented as follows:

Loomis Fall at Miami Finish Line – 12/05/09 IMAGES & VIDEO 2009

Loomis Fall Signs up for the 2009 Rally – 10/01/09 BLOGS, RALLY NEWS

Loomis Fall Takes a Shower – 12/09/82 BLOGS, JOHNNY KNOXVILLE

57 12. Enter the Rally

RALLY enter – as accessed through the static nav and the rally page

The ENTER THE RALLY online application form will also be accessed directly from the Rally page. The background image for the entry form will remain the same when accessed from both portals.

58 13. Sign Up/Log in

Displayed as part of the static navigation at the top right of the site, the LOG IN / SIGN facility will allow visitors to become part of the Gumball community through a very simple sign up mechanism. Once submitted, their details will be logged and segmented within the Gumball database. An ‘opt out’ box will be included to drive sign-up to the newsletter.

59 14. Newsletter

NEWSLETTER sign up

Flagged on throughout the site as part of the top right static navigation, the NEWSLETTER sign up page will encourage visitors to sign-up for the regular Gumball newsletter.

If the visitor is already logged into the site, when this link is clicked on the latest newsletter will be displayed.

In addition to the above mock up, a button will be added from which the visitor can view the latest edition of the newsletter.

The Gumball 3000 newsletter will be a monthly missive distributed in html format to the entire Gumball database, possibly through a third party email broadcaster.

The aim of the newsletter will be to keep Gumball in people’s minds in between rallies and will actively market all Gumball activity, events and commercial ventures. Graphically, it will take its design cue from the website and will be additionally hosted on the site via a link on the sign-up page.

60 The email will: • drive significant traffic to the website • encourage sign-up through forwarding to friends • promote new Apparel items and Gumball merchandise • offer sponsors an opportunity to promote their relationship with Gumball • host competitions with prizes provided by Gumball and sponsors

The email template will be easily managed and will contain no more than eight items with very brief descriptions accompanied by engaging images. Each item will link to the relevant page on the website.

The database will be segmented so that certain members can be singled out for special one- off emails. For example: if we were to host a London based sample sale for Apparel, we could contact directly all fans of Gumball who live in a London postcode and all of those who have purchased items from the store in the UK.

61 15. RSS Button

RSS button

Simple, yet devastatingly effective, the RSS feed from the site, will mean those interested in all things Gumball, once subscribed, can be notified via their iGoogle page or bookmark bar whenever a new Gumball item is put live.

In addition to the RSS feed, we will be investigating ways in which all gumball3000.com content can be instantly populated to all of our major social networking presences as soon as it is uploaded through the CMS. We currently do this manually but an automated system will greatly strengthen the synergy between our social networks and the website.

62 END OF DOCUMENT