Document Sample
Documentation Powered By Docstoc
					Meier Bass Website

N241 Website Documentation

Chris Meier
                                    N241 Website Documentation
                                              Chris Meier

Site Purpose

The purpose of the Meier Bass website is to provide a clean, accessible website to easily browse the

collection of basses stocked by the Meier Bass store. The (fictional) Meier Bass Company is a locally

owned purveyor of bass guitars. What sets it apart is the Meier Bass initiative. Similar to the Toms

shoes “One For One” policy, Meier Bass promises to donate 50% of all revenue to the local academic

music departments around Monroe County and the greater Indiana area. A friendly user interface and

upfront charitable goals should increase profit and consumer trust.

Needs Analysis

       Provide information about the Meier Bass Company

       Easy-to-use website – no clutter, no sensory overload with color, no hidden schemes

       Showcase the stock of basses


       Provide an online showcase of bass guitars.

       Short-term goal of financially supporting and facilitating growth in music departments around


       Long term goals of bringing awareness to the importance of supporting the musical arts in

       today’s education system and growing the company to include areas outside of Indiana and

       support more staff and more transactions.

Audience Characteristics

                                              Page 2
                                        N241 Website Documentation
                                                  Chris Meier

Visitors to the Meier Bass website will generally fall in three categories of characteristics:

Professionals -

                  Will be currently involved in musical education programs, private lessons, or

                  professional musical ensembles.

                  Will have past experience with other websites that sell basses.

                  Will have a discerning eye in regard to instrument quality, good customer service, and


Students –

                  May be brought to the website and predisposed to purchase specifically from Meier Bass

                  from hearing about the Meier Bass initiative.

                  Will be currently active in school bands, student-led bands, or any number of musical


                  Will be knowledgeable of basses.

                  Will probably be technologically savvy, a participant in social media outlets, such as

                  Twitter, Facebook, and Google Plus, and a frequent visitor of other popular sites, like


Novices –

                  Will be searching for a starting bass, and likely a cheaply priced one.

                  Will have limited knowledge of bass guitars.

                  May not know about the Meier Bass initiative before visiting the site.

                  May be easily deterred from the website by a confusing UI.

                                                  Page 3
                                     N241 Website Documentation
                                               Chris Meier

Primary Audience

The primary audience for the site will be musicians, students, faculty of music education programs, or

anyone else who is interested in purchasing basses.

Secondary Audience

The secondary audience will be those not specifically looking to purchase a bass. This audience will be

small and far between, so therefore they are the secondary audience. Included in this group may be

potential investors or those interested in learning more about the Meier Bass Initiative.


There are many different companies that could be viewed as competition to the Meier Bass online store.

National stores such as Guitar Center, and Musician’s Friend could be viewed as the dominating rivalry

to any up-and-comer. However, Meier Bass is a privately owned and locally run store. What sets it

apart are its charitable goals and friendliness with the community of professional and student musicians.

We trust consumers to prefer friendly customer service and charity to the impersonality of large

corporations. For that reason, the most immediate competitive sites of Meier Bass are the local music

shops in Bloomington and around Indiana.

The first site I looked at was Melody Music Shop, LLC (


               Very clean and friendly design.

               Nice color coordination, consistent page design, and an intuitive, readily available menu

               on the left side.

                                               Page 4
                                      N241 Website Documentation
                                                Chris Meier

               The “About Us” page promotes trust in the owners, because it has friendly policies at the

               top and details their extensive music experience.

               Has the distinct feel of a “mom and pop” shop.

               Promotes community with the Student Accomplishments, Melody in the Media, and

               Events and Concerts pages.

The next website I visited was Sweetwater (


               Very busy design with lots of information presented on the home screen.

               Organized into boxes, but having so many sales on the home screen is too much of an

               overload of information.

               The “Deal Zone” link at the bottom is confusing, and I wasn’t sure how it really worked

               even after I clicked it.

               The footer at the bottom IS consistent, but it has tons of information on it too.

               The Menu options at the top of the page aren’t intuitive like the Melody Music Shop

               website. It has options such as What’s New, Research, Guitar Gallery, Cable Finder, and

               Case Finder; I didn’t know what these meant until I clicked them. It turned out Guitar

               Gallery, Cable Finder, and Case Finder were all different browsing areas to buy guitars,

               cables, or cases, but each one had a different design, giving it a stitched together feel.

               Also, when almost everything on the screen has different fonts, different colors, and some

               kind of “NEW!” or “SALE!” logo on it, it just becomes very redundant and headache


                                               Page 5
                                     N241 Website Documentation
                                               Chris Meier

               Below the main menu options at the top are a set of what I assume to be submenu

               options, which lead to essentially the same things as the other menu options (instruments,

               and equipment), so I’m not sure why the site needs so many different ways to get to the

               same places.

The other website I visited was Vance Music Center (


               The homepage is strange. It has many different fonts, and the layout is oddly compacted.

               Clicking on the links reveals that the entire website is relegated to a small square in the

               browser, which means there is actually very little information in the website, and it has a

               very amateurish feel to it.

               The website is not complete: the Used Merchandise section is under construction.

               An About Us section with only two sentences doesn’t promote much confidence in me,

               the potential consumer, to patronize the store.

               The Products section seems like it should be included in the About Us section.

               When you want to buy an instrument, some of the items don’t have links, and others link

               to the manufacturers’ websites. There seems to be no rhyme or reason to it.

Overall, the Melody Music Shop site wins the competition. The low resolution and oddly formatted

pictures leave something to be desired, but it has the cleanest and most thought out design of the three.

                                               Page 6
            N241 Website Documentation
                    Chris Meier


                   Page 7
            N241 Website Documentation
                    Chris Meier

Test Plan

                   Page 8
                                      N241 Website Documentation
                                                Chris Meier

I tested the website in Chrome, Safari, Firefox, and IE. I looked for differences in how styles were

displayed and also any broken links, typos, or discrepancies.

Best Viewed Assumptions

I built the website while constantly testing in Chrome, so Chrome has the best representation of what I

intended the site to look like. But there are only insignificant differences among the browsers, and any

newer version should work fine. It is, however, a little nicer on a small screen due to the fact that there

is a lot of empty space on either side of the page. But this is to be expected with the “jell-o” layout. It

also might be better to have a relatively fast connection speed so as to view all the pictures. I did most

work on my desktop Mac on a moderately fast Wi-Fi network.

Site Map


            STORE                           DONATE                       FEEDBACK

          ORDER PAGE                      INITIATIVE                   CONTACT US

                                          ABOUT US

Project Checklist
                                                Page 9
                            N241 Website Documentation
                                    Chris Meier

External Stylesheet 


Imbedded Stylesheet 


Header Comment      


CSS Style Comment   


Example of a Table  


Example of a <blockquote>


Example of an <ol> List


Example of a <ul> List


Example of a <dl> List

                                    Page 10
                                      N241 Website Documentation
                                              Chris Meier


Example of an Image Map       


Example of a PNG or GIF Image 


Example of a JPEG Image       


Example of a Form             


Example of a CSS-Delivered Roll

Over                                    dex.html

Example of a Style That Overrides

Another                                 asses.html

Canned Javascript Function    


Post-Project Analysis

1. How did you revise your project?

                                              Page 11
                                       N241 Website Documentation
                                                 Chris Meier

My project went through quite a few revisions, both in the overall direction of the project and in certain

design choices. My project was going to be an actual online store. But this turned out to be an

unnecessary hassle, and I wouldn’t be able to make it convincing. So instead I made it the website for a

fictional local shop, which made more sense and was more doable at my skill level. The design changes

all served to make the site more cohesive. For example, my wire frame shows a box of information

about the site surrounded on all sides by a background graphic. It made more sense, though, to put this

information in a new “About Us” section and get rid of the background artwork idea. I still have

artwork, but it is less obtrusive. After all, visitors to the site wouldn’t be looking for an art gallery.

They would want to see basses.

2. What learning did you take from the process of creating your project?

I learned that functionality is more important than sparkly effects when you’re designing a business

website. It needs to be concise and consistent in design. A client asking a web designer for a business

website probably won’t be looking for anything edgy or artistic. I actually had spent a lot of time

making banners for the different bass sections that were colorful and fun, but they ultimately didn’t look

professional or fit the theme. (You can see the banners in my website folder if you care.) Also, I

achieved a much greater understanding of how <div>’s work and how to style them.

3. Are there any sections that did not work as you liked?

I wish the background image was on the top and bottom, but I couldn’t figure out how to do that. It was

on the bottom first, but it looked wonky in certain browsers, such as Chrome. I also wish the overall

layout was more flowing and organic than boxy and segmented.

                                                 Page 12
                                    N241 Website Documentation
                                              Chris Meier


“5 Basic Rules of Web Page Design and Layout.” Grantastic Designs. Grantastic Designs, Inc, 2006. 8

       April 2012. Web

“25 Rounded Corners Techniques with CSS.” CSS Juice. 20 Sept. 2011. iEntry Network, 2012. 8 April

       2012. Web.

Bass images taken from Fender Musical Instruments Corporation, 2012. 18

       April 2012.

Bracewell, Stuart. Quick sketch of me playing the bass guitar, art. 18 April 2012.

Fender, Clarence Leonidas. A Patent Sketch for the Fender Precision Bass, art. 18 April 2012.

Giannoble, Sarah. Majorca, art. 18 April 2012.

Guy, Tammy. “Visual Design and Usability Yellow Brick Road.” UX Magazine. 5 Mar. 2011. UX

       Magazine, 2012. 8 April 2012. Web.

“Innovative User Interface Design.” Webcredible: Customer Experience Design. Webcredible, 2012. 8

       April 2012. Web.

Kyrnin, Jennifer. “How To Wrap Text Around an Image.” The New York Times Company,

       2012. 8 April 2012. Web.

Padilla, Mike. “User Interface Design – Taking the Good with the Bad.” Digital Web Magazine. 18 Jul.

       2006. Digital Web Magazine. 8 April 2012. Web.

                                              Page 13
N241 Website Documentation
        Chris Meier

       Page 14

Shared By: