Billy Likes Soda Project Proposal Eliza(Beth) Sutton Instructor Natalie Hruska IMD123 XA: User-Centered Information Design | W6A1 December 13, 2013

Billy Likes SodaProject Proposal

Eliza(Beth) Sutton

Instructor Natalie Hruska

IMD123 XA: User-Centered Information Design | W6A1

December 13, 2013

Bill Likes Soda Project Proposal | December 13, 2013 2

Table of Contents

Stakeholder Identification 4Stakeholder History 5Stakeholder Goals/Objectives 6User Demographics: Audience #1 7Goals/Needs: Audience #1 8User Demographics: Audience #2 9Goals/Needs: Audience #2 10User Persona #1 11User Persona #2 12User Persona #3 13User Scenario 14Meeting the Objectives of the Stakeholder 15Meeting the Objectives of Audience #1 16Meeting the Objectives of Audience #2 17Functional/Content Specifications: Homepage 18Functional/Content Specifications: Playlist Page 19Functional/Content Specifications: Contact Page 20


Table of ContentsContinued

Features: Homepage 21Features: About Page 22Features: Events Page 23Content Assets: Homepage 24Content Assets: About Page 25Content Assets: Events Page26Architectural Map 27Wire Frame, Concept #1: Homepage 28Wire Frame, Concept #1: About Page 29Wire Frame, Concept #2: Homepage 30Wire Frame, Concept #2: About Page 31Style Guide: Colors & Fonts 32Style Guide: Sample Images 33Style Guide: Sample Text 34Mock-up/Prototype: Homepage 35Mock-up/Prototype: Playlist Page 36Mock-up/Prototype: Contact Page 37Citations 38Contact information 39


Stakeholder Identification

The stakeholder for this project is the band Billy Likes Soda, a new Cleveland-area cover band that has only performed a handful of times.

The idea for the band was born out the love of music among four friends working together at a local advertising agency.

Friends since college, they each have played in small local bands before but have recently found themselves each without a band and decided to form one together.


Stakeholder History

Cover band Billy Likes Soda has been together for only a couple of months and have had a few performances to date.

Their goal is to increase their number of performances while promoting the band via an online presence to their two audiences: • potential venue, restaurant and pub business owners • socially-active fans of live music

By including performance videos and photos, bio’s, a playlist, event schedule and contact information, Billy Likes Soda’s website will provide everything needed for business owners to make their decision to hire the band.

This same information will also attract and retain fans.


Stakeholder Goals/Objectives

To provide band-hiring decision makers with the information needed to book the band.

To provide band-hiring decision makers with an events calendar to see availability and learn when and where they can attend a live performance.

To attract and retain fans and live-music patrons via performance videos, photos and band members’ biographies.

To provide an events calendar for potential and current fans who want to learn about the band’s next performance.


User DemographicsAudience #1: Socially-Active Live Music Patrons

Males and females ages 18 to 35.

Students and young professionals.

High school through college graduates.

Basic to advanced computer skills.

Likely own a smartphone.

Has computer access.

Social media savvy.

Fans of live music.

Patrons of music venues, restaurants and pubs.

Have active social calendars.

Often make plans at a moment’s notice.


User Goals & NeedsAudience #1: Socially-Active Live Music Patrons

Want information about venues, restaurants and pubs who offer live music nearby.

Need information on performance dates, times and locations for Billy Likes Soda.

Want to see videos of previous performances.

Interested in learning more about the band and its members.

Want to see a play list of the band’s songs.

Would like to connect with the band on social media.


User DemographicsAudience #2: Venue, Restaurant & Pub Owners/Band-Hiring Decision Makers

Males and females ages 30 to 55.

Venue, restaurant and pub owners and band-hiring decision makers.

High school to college educated.

Computer reliant.

Likely to own a smartphone and a portable computer device for work & personal use.

Well-versed in Internet searching.

Average awareness and use of social media.

Regularly searching for new music talent.

Rely heavily on Internet for sourcing various business needs.


User Goals & NeedsAudience #2: Venue, Restaurant & Pub Owners/Band-Hiring Decision Makers

Need to find local bands with little effort.

Want the convenience of searching for bands online.

Require play list to assess appropriateness of music.

Want to see performance videos of bands to help make hiring decision.

Need quick-to-find contact information.

Would like to see band’s events calendar to determine availability and possibly attend a performance.


User Persona #1Member of Audience #1: Socially-Active Live Music Patrons


User Persona #2Member of Audience #1: Socially-Active Live Music Patrons


User Persona #3Member of Audience #2: Venue, Restaurant & Pub Owners/Band-Hiring Decision Makers


User ScenarioKaren: A Socially-Active Live Music Patron

Karen lives in a suburb of Cleveland and enjoys hanging out with her friends after school via social media as well as meeting up for a night out. Karen and her brother, Bob share similar tastes in music and he likes seeing live bands, too. In fact, they sometimes run into each other on an evening out on the town.

She has a few favorite spots she likes to go, but is looking for something new so she asks Bob for suggestions. “That’s easy”, he says. “Remember that new band I was telling you about the other day?” he asks. Over dinner last weekend, Bob told Karen about a band called Billy Likes Soda, saying they were an excellent cover band featuring music by some of the bands he and she both liked such as Sum 41, Blink-182 and The Killers.

“Oh, yeah, that’s right! What’s their name again?” she asks. “Billy Likes Soda” says Bob. Karen gets out her smartphone and does an Internet search on the band. She immediately finds a link and clicks to their website. There, she sees performance videos on the homepage and decides to click on one. Her brother was right, she thinks. “They are awesome!” Karen says to herself.


Meeting the Objectivesof the Stakeholder

Create and develop a website that showcases performance videos, photos and band member biographies.

Include search engine optimization (SEO) for top-level search engine results.

Increase Facebook fans by 200% within 3 months of site launch.

Increase band bookings by 200% within 3 months of site launch.

Provide site users with a playlist and events calendar.

Offer easy-to-find contact information on the website.


Meeting the Objectivesof the Socially-Active Live Music Patron

By way of SEO, offer top-level search engine results on various search terms including “Cleveland” and “live band” so that users can find information about Billy Likes Soda.

Provide information on performance dates, times and locations for Billy Likes Soda (BLS).

Offer BLS videos of previous performances.

Include biographies of band members to explain musical roots and influences.

Show the band’s play list to communicate music style.

Provide links to BLS on social media such as Facebook and Twitter.


Meeting the Objectivesof the Venue, Restaurant & Pub Owners and Band-Hiring Decision Makers

Offer an online presence for Billy Likes Soda.

Through SEO, include Billy Likes Soda in top-level search results.

Include a play list to communicate the band’s musical style.

Offer performance videos for band-hiring decision makers.

Display quick-to-find contact information to inquire about booking the band.

Offer an events calendar for decision makers to: • determine the band’s availability• find out where the band can be seen live to aid in hiring decision


Functional/Content SpecsHomepage

A large video dominates the page. Video updated regularly.

Global navigation appears at top of page.

Social media links are beneath global navigation.

Local navigation at the bottom includes: • Go Backstage (About page)• Check Events (Events page) • Book BLS (Contact page).

The footer includes a call-to-action and copyright information.

There is no sidebar.


Functional/Content SpecsPlaylist Page

A large duotone image dominates the page.



A black box encloses the text which lists the bands and songs.




Functional/Content SpecsContact Page

A large duotone image dominates the page.



A white box encloses the contact text and form.

A color image of the band members is inside contact box.




FeaturesHomepage

Feature How will the feature be implemented What concerns do we have about this feature

Content

Logo that links to the homepage (Global)

Included in the Global navigation is the Billy Likes Soda logo that when click on, directs the user back to the homepage.

No concerns as there is also a link for “Home”.

• Billy Likes Soda (BLS) logo

Video A band performance video embedded from YouTube, the image space will be full screen width and take up approx. 75% of the page depth.

Users may not have the proper video player plug-in installed in their browser. There may be buffering issues which would cause users to leave the website.

• Embedded video

Navigation Buttons (Global)

Navigation buttons will be utilized for Global navigation in a color bar along the top right of the page. These will have rollovers and hypertext links to the various pages within the site.

There might be specific content that the user is looking for that is not included in the sections represented in the navigation bar.

• About• Playlist• Events• Gallery• Videos• Blog• Contact

Social Media Icons (Global)

Two social media icons—Facebook and Twitter—will be placed below the global navigational bar.

None; the logos are large enough to view on top of video image.

• Facebook icon• Twitter icon

Hypertext Links (homepage)

Three colored bars with black text will be placed at the bottom of the homepage. These bars will contain text links and are marked “Go Backstage” (goes to Videos page), “Check Events” (goes to Events page) and “Book BLS” (goes to contact page).

These pages are basically highlighted versions of pages already included in the global navigation. Therefore, there are no concerns that users may not see these at the bottom of the page.

• Go Backstage (Videos)• Check Events(Events page)• Book BLS Contact page)


FeaturesAbout Page

Feature How will the feature be implemented

What concerns do we have about this feature

Content

Navigation Buttons (Global) Navigation buttons will be utilized for Global navigation in a color bar along the top right of the page. These will have rollovers and hypertext links to the various pages within the site.







“About” Text Typeset in white on a blue background, this text will be approx. 2-3 paragraphs long.

None; by design, the text should be legible and easy to read.

• “About” text

Biography Text Each biography will be one paragraph of white text placed on top of a color block.

Formatting issues may occur on mobile devices.

• Biography text (4)

Biography Photos Each band member will have one dominant photo and two smaller photos, all associated with their bio.

There may not be enough current photos of the band to meet this number of photographs.

• Band photos (12)


FeaturesEvents Page

Feature How will the feature be implemented

What concerns do we have about this feature

Content

Navigation Buttons (Global)

Navigation buttons will be utilized for Global navigation in a color bar along the top right of the page. These will have rollovers and hypertext links to the various pages within the site.







Background Image

A duotone photograph will be used as an overall background.

None; the content placed on top of it will be, by design, legible.

• Band photo

Events Intro Copy White text will be placed on top of a purple color block and will contain an intro paragraph.

None; by design, the text should be legible and easy to read.

• “Events” intro text

Venue Logo For each Event listing, there will be a small venue logo next to the listing. Clicking on these logos will open a new browser window, taking users to the venue’s website.

Venue logos may not be available to include on the BLS website. Users may not know to click on the logo for more info about the venue.

• Venue logo(the quantity varies as Events calendar changes)

Venue Text While the number of listings will vary from week to week, each will always contain: Date, time, venue name (a hypertext link to the venue’s website) and address.

Maintaining this page will be imperative in conveying current information to patrons and venue, restaurant and pub owners.

• Venue text(amount varies as Events calendar changes)


Content AssetsHomepage

Asset Format Description Associated Assets/Media

Other Information

BLS Logo (Global)

.png The Billy Likes Soda logo that will appear globally on each page.

Static logo To be provided by Stakeholder.

Navigation (Global)

HTML/CSS This is the blue color bar at the top right of each page with hypertext links to each section of the site.

Rollover graphic/text

While this will appear as one solid bar, upon rolling over each of the hypertext links, a white block appears and the text turns blue. Links are:• About • Videos• Playlist • Blog• Events • Contact


.png The Facebook and Twitter logos that will appear globally on each page.

Static logo • Facebook logo• Twitter logo

Video .MOV, .MPEG4, .AVI, .WMV, .MPEGPS, .FLV, 3GPP or WebM

This is the band performance video that appears on the homepage.

Video Video to be uploaded to YouTube on a dedicated Billy Likes Soda channel, then embedded into the BLS website.

Highlighted Content (Local Navigation)

HTML/CSS This is the 3 color blocks at the bottom of the homepage with hypertext links.


These bars will contain text links and are marked:• Go Backstage” (goes to Videos page)• Check Events (goes to Events page)• Book BLS (goes to contact page).


Content AssetsAbout PageAsset Format Description Associated

Assets/Media Other Information

BLS Logo (Global)

.png The Billy Likes Soda logo that will appear globally on each page.


Navigation (Global)







Background Image

.png The black and white image that fills the background of the “About” page.

Static image Image to be provided by the Stakeholder and modified to a duotone in Photoshop.

Color Block HTML/CSS Color blocks upon which text is placed: blue, orange, red, green and teal.

Static image These color blocks will be centered left and right on the page.

Body Copy .txt, .doc or .docx

This is the text that tells the history, location, type of music and call-to-action.

Text To be provided by Stakeholder or copywriter.

Bio Text .txt, .doc or .docx

This is the text for the 4 band members’ bios.

Text To be provided by Stakeholder.

Bio Photos (12) .png These are the 4 sets of 3 photos for each band member.

Static images To be provided by Stakeholder. Images are to be sized in Photoshop.

Horizontal Rule HTML/CSS This is the 1-px horizontal line that separates each bio.

Static image Horizontal rule is to be 1 pixel in size and white in color.

Back-to-top Arrow

.png The arrow that appears at the top right of each band member bio block, taking the user back to the top of the page.

Image link Upon clicking on this arrow, users are taken back to the top of the page.


Content AssetsEvents Page

Asset Format Description Associated Assets/Media

Other Information

BLS Logo (Global) .png The Billy Likes Soda logo that will appear globally on each page.


Navigation (Global)







Background Image

.png This is a duotone image that fills the background of the page.

Static image Image to be provided by the Stakeholder and modified to a duotone in Photoshop.

Color Block HTML/CSS This is the color block (orange) upon which appears the events copy.

Static image This color block will be orange and will be centered left and right on the page.

Venue Logo .png This a logo for each venue listed. Quantity: TBD

Image link This is an image link that when clicked on, opens a new window with the website of the venue. To be provided by Stakeholder or venue. Logo to be sized in Photoshop or Illustrator.

Event Listing .txt, .doc or .docx

This is the text that includes date, time, venue and venue address.

Text The venue name will be a hypertext link that when clicked on, opens a new browser window with the venue’s website. The venue name will be in bold while the other text is regular weight. To be provided by Stakeholder and venue.

Horizontal Rule HTML/CSS This is the 1-px horizontal line that separates each event listing.

Static image Horizontal rule is to be 1 pixel in size and white in color.


Architectural Map


Wire Frame: Concept #1Homepage


Wire Frame: Concept #1About Page


Wire Frame: Concept #2Homepage


Wire Frame: Concept #2About Page


Style GuideColors & Fonts


Style GuideSample Images


Style GuideSample Text

Page Titles

Body Text

Captions None

Call-to-Action


Mockup/PrototypeHomepage


Mockup/PrototypePlaylist Page


Mockup/PrototypeContact Page


Citations Animal Planet. Web. 18 Nov 2013 <http://animal.discovery.com>. Billy Likes Soda Facebook Page. Logo and band photographs.

5 Dec 2013. <https://www.facebook.com/pages/Billy-Likes-Soda/153968881460919>.

Brew Your Own. Web. 18 Nov 2013. <http://byo.com>. Britannica Image Quest. Web. 18 Nov 2013.

<http://quest.eb.com.ai.libproxy.edmc.edu>. Cleveland.com. Web. 18 Nov 2013. <http://www.cleveland.com>. Entrepreneur. Web. 18 Nov 2013. <http://www.entrepreneur.com>. ModCloth. Web. 18 Nov 2013. <http://www.modcloth.com>. NBC News.com. Web. 18 Nov 2013. <http://www.nbcnews.com>. RestaurantNews.com. Web. 18 Nov 2013.

<http://www.restaurantnews.com>. Rolling Stone. Web. 18 Nov 2013. <http://www.rollingstone.com>. The Verge. Web. 18 Nov 2013. <http://www.theverge.com>. Typecast. Typograpy. 6 Dec 2013. http://www.typecast.com. Wallpapers Wide. Dec 5 2013

<http://wallpaperswide.com/black_beer_bubbles-wallpapers.html>.


Contact Information

Eliza(Beth) SuttonStudent #[email protected]

Documents

Billy Likes Soda Project Proposal Eliza(Beth) Sutton Instructor Natalie Hruska IMD123 XA: User-Centered Information Design | W6A1 December 13, 2013