Pitchfork Case Study & Redesign Matt Rondos Interactive Design I
Table of Contents Objective Statement 2 Analysis 1 3 Analysis 2 4 Analysis 3 5 Analysis 4 6 Analysis 5 7 Wire Frame 8 New Website Layout 9 Conclusion 10 1
Objective Statement Pitchfork, formerly known as Pitchfork Media, is a Chicago-based music website dedicated to music news, reviews and media. Their main focus is on independent musicians and artists, especially indie rock. However, they cover a wide array of genres including pop, hip-hop, folk, heavy metal, jazz, experimental and various forms of electronic music. The website has made drastic improvements from it s founding in 1995, but even in 2014 there are some blaring errors in the website layout that can be improved. In my website redesign for Pitchfork, I will make navigating through content as simple as possible. For their current layout, each section is divided by type of content but there is way too much to click on. They are trying to fit as much content as they can on the homepage with links to different articles when they should only have the newest and most popular news and reviews displayed. As someone who visits the website everyday for news, I m familiar with the layout, but to someone who is visiting for the first time, the layout could be rather confusing with all the different sections. I think making adjustments to the navigation bar and limiting the amount of content on the homepage is the key to a simpler, easier to operate, Pitchfork.com Pitchfork logos Then and Now 1995 2014 2
Pitchfork Media May 7, 1999 1.7 In Pitchfork s earliest stages, when the URL pitchfork.com was owned by a livestock company and they went by pitchforkmedia.com, they only did reviews on music. The background color is a maroon and the text is white in a serif typeface. There is no navigation bar. The most recent reviews are in a bigger font size in a grid on the left, and the reviews of previous days are displayed in a grid on the right. The most popular review of the day got a image of the album artwork next to the list of the current day s reviews. Reviews of past days would get a small picture of the album artwork next to them and the a one sentence summary. You can click on the artist/album title to go to the review page. 3
Pitchfork January 18, 2001 3.5 Pitchfork added daily music news and interviews along with their music reviews. Each section is separated into a grid/column with a image of the newest content and click-able links for the newest articles and reviews. You can search the website by keyword or browse content by letter. They continue to use a white serif typeface but changed the background color to a navy blue and headline text to a turquoise. They also have the name of the website and the current logo in different shades of blue up top. The first thing the eye is drawn to is the bright pink NOFX advertisement up top. 4
Pitchfork May 31, 2005 5.2 There is now a navigation bar with a designated spot right below the Pitchfork logo, prominently displayed in it s own column on the far left. The navigation bar also includes a search bar below each section. Content is still in a grid/column layout. Sections include top stories, record reviews, weekly features, daily features, track reviews and links to previous articles. An image from the newest article in each section is displayed on top the of the column. The text is now a dark gray sans-serif, which is much easier to read on the white and light blue background. Hits of the turquoise blue are seen in the logo and behind the title text of each section to give it some color. 5
Pitchfork December 19, 2009 7.6 With a white background, gray rules, dark gray body copy and red-orange title text, the website is now easier to read than ever. The top story, record reviews and pitchfork.tv are looking cleaner than previous versions of the website but it is still a very blocky layout with the gray rules. The navigation bar is working a lot better across the top with a search bar on the left side. The Pitchfork logo is displayed in the top left and is the first thing your eye goes to with the burst of red within the logo. 6
Pitchfork November 3, 2014 8.6 For the current layout of Pitchfork, they have album reviews and their most recent articles on the top of the page. More media like videos and feature articles are displayed below. An image from the most recent article and music reviews are displayed up top. Each feature video and article is also accompanied with an image. Aside from the serif font in their logo, the entire website from headlines to body copy is the same sans-serif typeface. Layout colors are black, white and gray which a hits of their signature red from their logo throughout in text and flourishes. Information is laid out in a grid format, with the most recent reviews and articles on top. The navigation bar is displayed up top right below the prominently displayed Pitchfork logo but is relatively small because most of the information someone who visits the site would want is in the recent news and reviews section. The biggest flaw in this layout is the advertisement right on the top of the page. 7
Wire Frame / Grey Box Method 8
Pitchfork November 10, 2014 10 BEST NEW LAYOUT For the new layout, I made the Pitchfork logo the first thing you see right at the top of the page. For the navigation bar, I only included the most popular sections: news, reviews, tracks, features, pitchfork.tv, best new music and pitchfork advance. The other sections that were listed on the last layout will be available on the more drop down on the navigation bar. I limited the content on the page to the four most popular sections: news, reviews, tracks and pitchfork.tv. You only can see the most recent content from each section to minimize the clutter that was a big problem on the previous layout. Each section has more breathing room as well, which is more aesthetically pleasing than having all the content clumped together. Minor tweaks in the text were made: the text at the top of each section was made bigger and changed from gray to black. It is labeling the section so you want it to stand out. 9
Conclusion Pitchfork has a lot of content so they put it all on the homepage. The content is now all there, but it is very cluttered and hard to navigate through, especially for someone who does not use the website very often or is a first time visitor. To fix this, I minimized the content on the homepage so only the most recent news, reviews, tracks and media are displayed. If one wishes to explore more content, they can click on the title text of each section, or click on a section on the more prominent navigation bar at the top of the page. Bibliography Screenshots of older Pitchfork layouts taken from archive.org/web 10