Acoustic Wisdom, Online: 

The Olde Town Pickin' Parlor

The Challenge

The Olde Town Pickin' Parlor is known around the world for selling hand-crafted new and used acoustic instruments. It is not rare to stumble across a niche instrument that was once owned by a famous musician. Through the years, the OTPP has hosted internationally-touring bands and artists. It is a trusted source for all things acoustic for Denver-based musicians. 

 

Artists visit the OTPP’s brick-and-mortar store to find pertinent information and updates about OTPP’s unique inventory. However, as it currently stands, the same level of brand trust, dependable information, and insider wisdom that makes OTPP stand apart does not transfer to their e-commerce site.

 

The challenge:

  • Design a contemporary e-commerce site that successfully captures OTPP's in-store reputation.

My Role

Lead UX/UI Designer. I conducted all the research and designed all the visual elements of the project. 

Tools Used

  • Sketch

  • Photoshop

  • InVision

  • Xtensio

  • Zeplin

The Discovery Phase

I walked into this project with a few preconceived notions about the nature of guitar shops and the world of e-commerce.

​

  • My initial hunch was that OTPP's website was simply in need of updating--that its aesthetic was merely out of date.

​

  • Moreover, I based my observation on the following assumption: if most of OTPP's brand trust and wisdom is found at their shop in Arvada, Colo., wouldn't the site's main purpose be simply to point users to the shop itself?

User Interviews

User interviews revealed two crucial insights:

1. The OTPP mediates the historical narrative of its used instruments.

OTPP users find a historical value to OTPP's used instruments--there, one can find "a story behind them all", in one user's words. If the OTPP website cannot successfully communicate the historical narrative of a given instrument, users find it relatively useless.  

 

2. Second, musicians purchase instruments online.

This sounds elementary but it surprised me--it was not something I initially expected. Why is this the case? Some users feel comfortable buying an instrument through the OTPP website because they do not have the option of shopping at the brick-and-mortar store. Some users prefer to buy through the OTPP brand. 

Heuristic Analysis

(Missing Login Feature for
Repeat Customers)
(No Shopping Cart)

 

1. Nothing on the website indicates that one can engage in e-commerce activities. There is no shopping cart, nor is there a log-in feature for frequent customers. It is only when a user digs down into product description pages that s/he finds the option to purchase instruments online. As it stands, the shopping cart is 'hidden' in the small black band in the header. 

???

2. The website's information architecture is inadequate to the e-commerce experience. For example, clicking on the "Featured" tab takes the user to the "New Arrivals" page, and clicking the "Instruments" tab brings you nowhere--one must select a product category. This could lead to a confused organizational and informational structure.

???

???

???

3. Product display pages display almost no information about a given instrument. ​Not only does this work against OTPP's reputation as a purveyor of industry knowledge and a curator of unique craft instruments, but it also neglects what users like Ed and Billy want most: dependable instrument information and historical narrative.

Competitive Analysis

I wrote out a quick competitive analysis of the OTPP's competitors, which helped clarify some of the strengths of the Pickin' Parlor, where they might have a leg-up on the competition, and also where they might be lacking. 

Closed Card Sort

I also did a closed card sort with the various instruments on the OTPP website. Seeing that this is an e-commerce site, I wanted to ensure that everything was structured well in the site's information architecture to maximize the OTPP's business goals. 

Personas

After conducting user interviews, a heuristic analysis of OTPP's website, a business analysis of OTPP's Denver competitors, and a closed card sort of the OTPP inventory, I felt comfortable generating these personas, Ed Lee and Billy Freeman. Ed and Billy allowed me to see the OTPP site with new eyes.

  • Ed Lee loves high-quality, hand-crafted acoustic instruments.

  • Aside from the quality of these instruments, Ed appreciates the story each guitar brings to the table.

  • He is willing to drop a lot of cash on a used instrument from the Pickin’ Parlor: it is a trusted brand.

  • However, Ed lives two hours away from Olde Town and would prefer to shop online for his instruments.

  • Ed needs an informative and often-updated user experience for this process. â€‹

  • Billy Freeman is a recreational musician who is ready to buy his first handcrafted instrument. 

  • He often makes online purchases after a long research process.

  • While he is willing to buy a guitar online, he is turned off by poorly designed and poorly informed websites. It doesn’t matter what sort of reputation the shop might possess — if its website underperforms, he will take his business elsewhere. 

Synthesis

Through the research phase, a clear problem emerged: the knowledge and wisdom that sets the OTPP apart as an industry leader was almost completely missing from their website. Users could not access the relevant narrative information they want and need to make an educated online purchase. 

The Design Vision

I determined that the OTPP needs a contemporarily designed e-commerce site that communicates all available narrative and historical information about a given acoustic instrument. More than functionality, this site should tell an instrument's story and provide all available product information. The OTPP brand already builds trust and instills confidence; this same assurance and conviction should also extend to OTPP's e-commerce site. 

Framing the Direction (sitemap and userflows)

The first thing I did was clarify information at the site level. I reconfigured OTPP's sitemap and then reimagined how the personas would move through user flows to accomplish their goals.

Wireframes

  • I developed wireframes that would set those flows in motion while improving upon the existing site design. 
  • I added common e-commerce conventions that would enhance the shopping experience and OTPP's business model (a shopping cart icon, a search feature, a category filter on the product category page, and the option to favorite and compare individual products).
E-commerce
icons & conventions
Product filter
Banner signaling
New Arrivals
on Category Page
and PDP
Compare & Favorite options
Keeping personas Ed and Billy in mind, I designed signals for newly-arrived instruments as well as product descriptions that leaned more into revealing an instrument's historical narrative. 
 
I also added e-commerce design conventions: "Accessories" that could accompany the product and items the user "Might Also Like" based on this product.
Instrument narrative, not just stock product information.
Added accessories related to the product in question.
Added "You Also Might Like" to connect products and drive sales. 

Designing for Responsive Web

Per industry best practices, I designed the OTPP site for responsive web. After I finished the web wireframes, I sketched their responsive versions:

Mockups

Style Guide

Next Steps

  • Work with the OTPP team regarding design iterations and possible site implementation. 
  • Develop mockups for remaining pages in the new sitemap.
  • Work with designers to clean up and sharpen design issues.
  • LinkedIn Social Icon
  • Screen Shot 2018-11-19 at 11.11.20 AM
  • Twitter Social Icon
  • Medium
  • General-Assembly-Square-Logo

© 2019 by Jeff Appel