PITCHFORK_TITLE.jpg

In today’s climate of design it is pretty surreal how we can determine after a couple of seconds if a website “feels right”. For many of us, using an app has entirely replaced the need to search for a website. I’d like to show you my app solution to the music reviewing and content website, Pitchfork.

The Backstory:

Pitchfork’s website was originally designed for viewers to utilize their content on a computer. Unfortunately that didn’t translate well for their mobile audience. With the ever-developing capabilities of smart phones, a large portion of society uses their phones as their main tool to access the Internet, rather than using a computer.

For the past five years, I have been using Pitchfork for their diverse compilations of new music, reviews and other music driven content. However, I have always felt that their mobile website was lacking in organization and efficiency.

Findings:

For my research, I interviewed 10 people regarding their experience using Pitchfork’s mobile website. This process included finding reviews, specific artists, videos, and featured articles. After each explored the mobile website, they discussed their opinions about their overall experience.

  • As soon as people get into the Pitchfork homepage the first thing they do is scroll down.
  • Individuals unconfidently scroll and often get lost in the home page.
  • Rarely do people search or choose from the navigation bar to find what they are looking for (ex. reviews, artists, the latest).
  • The search interface is hard to view with its grey text and black background.
  • The navigation bar gets a little crowded at the bottom of the phone, especially when your browser icons are right below it.
  • Labeling of sections on pages doesn’t show enough hierarchy in typefaces.
  • Almost everyone I spoke with wants to see as much content as possible on all the artists they enjoy listening to.
  • They would prefer for an experience that allows­ them to quickly and easily digest information without taking time to sift through everything else.

Current Information Architecture:

Concept Architecture:

concept architecture.jpg

Design & Wireframe:

VISUAL DESIGN:

Type & Color:

As far as the typography, I felt it was good to keep GT Walsheim the typeface Walfork was based on and Tiempos Headline. Both worked great for headlines, titles and body text. I added a bit more hierarchy in weights and justification allowing for easier separation between sections.

When it came to color, I wanted to utilize the Pitchfork red. It adds a much needed pop to their mostly black and white color scheme and was a perfect way to excite the user into using the timeline feature. Subtle grays to separate articles were also implemented to add a necessary layer of depth in repeating fields.

Issues Addressed:

With a new design, I was able to address some of the key issues that I had discovered in my research.

  • The search bar is one of the first things you see at the top of the page rather than an icon found at the bottom.
  • A timeline feature has been implemented to fix the issue of scrolling too much. Now the user just needs to swipe or tap to go through the main pages.
  • The search section now generates viewable and predicted information as you type. This allows for a more accurate search.
  • A profile account has been implemented in this app. The user can click in the right hand corner to view their profile showing followed artists, suggested material and content they have saved or liked.
  • I also included artist profiles; these profiles include reviews, news, features and the ability to be followed.

Conclusion:

This project has been an eye opening experience into the world of UI & UX. One of my favorite parts of this process was developing ideas that directly spoke to the research I found with my interviewers. Writing out the information architecture was the first time I really dove into looking at each part of what makes a functional app. There was also a number of trouble shooting moments that tested me to think outside of the box (ex. How can I show the idea of progression?) With a thorough but simple redesign, Pitchfork can thrive in the app-dominated world.