20180618_214842882_iOS.jpg

Key Takeaways

  • Created a low-fidelity clickable prototype of a desktop webstore for a local record shop that combined the convenience of online shopping with the personalized, one-of-a-kind experience of visiting the store

  • To address the serendipitous feeling of stumbling into a new favorite record, I included a “Surprise Me!” feature that would pick a random record accompanied with a blurb from a store owner

  • Typical categorization tools like card sorting were limited in their effectiveness, as even savvy music fans are often uncertain of how to label a given record

  • With this in mind, I stuck with broader genre categories while allowing users to filter by subgenre

Background

Deep Thoughts is a record store in Jamaica Plain, MA specializing in offbeat music – psychedelia and world music, especially, though other genres are present. The store also sells a variety of other used goods, such as books and audio equipment, although they are a secondary source of revenue compared to the music.

20180618_220644355_iOS.jpg

Like any great record store, the owners are happy to chat about any given record that has caught a browser’s eye. While the store has a Discogs page (a site for record collectors to buy and sell secondhand), they do not have a dedicated webstore for desktop users.

 

The Problem

Local stores like Deep Thoughts have a special place in music fans’ hearts, but streaming and buying online is much easier. How might I emulate the shop’s unique quirks in an online desktop shopping experience?

Proposed Solution

A storefront that deeply integrates the owners’ insights into their product and offers an element of serendipity could be the best of both worlds.

 

Research

20180618_220651975_iOS.jpg

I looked to other music vendors (local and national) to see what solutions they implemented for online selling. The regional chain Newbury Comics was a natural first step, due to its comfortable fit between generalist vendors like Amazon and other, smaller record stores in the Boston area.

The site layout reflects Newbury Comics' recent positioning; in addition to selling records, they have plenty of pop culture paraphernalia. The clean look of Newbury Comics’ site is not matched in local stores within the area.

A sampling of competitors (local and regional). Newbury Comics' polished presentation is the exception rather than the norm.

 

Click to enlarge

A few trends quickly emerged based on interviews with music lovers. These people often have some idea of the records they’d like to get, but they adore the experience of browsing the stacks.

One user I interviewed recalled an instance where they visited their local record store to purchase a specific album. However, they explored for a while before grabbing that record. By the time they wrapped up the trip they had selected multiple records to buy. This behavior is mutually beneficial for the patron and the business, and something I wanted to replicate in my prototype for a Deep Thoughts webstore.

Leading Downstairs

This feeling of discovery as a key ingredient in record shopping in-person can be seen in how users valued the expertise of a record store’s owner. A user described visiting a record store while travelling abroad, where the shopkeeper answered their questions regarding a local act whose music they stumbled upon. The owner played the record as the user browsed, and they decided to purchase it based on what they heard.

 

Initial Sketching

My research provided some clear guideposts to adhere to while sketching out my designs. I didn’t want to radically rethink the online shopping experience – why fix what’s broken?

There were other ways I could differentiate the web store beyond the core shopping experience. To make the owners more present in the online store, I included blurbs about records on the associated product pages and elsewhere throughout the site. Most importantly, users needed to still have the opportunity to stumble upon a hidden gem in their browsing.

 

 

Content Organization

 

User flow for browsing/product discovery. Click to enlarge

 

This project was especially tricky in terms of determining how to place content in a sensible manner. Genre categorization would take a key role in navigation, but even with well-known acts it is difficult to definitively label them. More obscure artists made such issues exponentially worse.

I used a closed card sort to see how users would categorize a sampling of the products available in the store. The first attempt at card sorting with a user was extremely difficult, as the text items led to some confusion. I adjusted the card sort to include images for items (e.g. album covers), which helped to an extent. Nonetheless, it became clear that I had to make my own judgments regarding genre categorization.

Although Deep Thoughts sells items other than music, they are secondary revenue streams. As such, I felt comfortable in excluding these items from online sale.

Another consideration in organizing content lies in format. After deciding to focus on genre categorization as the main way to browse products, I found alternative methods for users to seek a given format. For instance, when browsing or searching for items, a user may filter for just CDs.

The flow for the Surprise Me! feature.

The flow for the Surprise Me! feature.

 

Testing and Iteration

While confusion with genre categorization was a major concern, I also wanted to address the opposite problem, wherein savvy music fans would want to dive into specific subgenres. My earliest sketch of the Rock genre page attempted to balance these conflicting needs by allowing users to select a subgenre (classic, indie, psychedelic...) and enter its dedicated page. A brief description below each genre listing would provide example artists for less-informed users.

Testing revealed that this extra step confused the latter set of users. To mitigate this issue while still allowing power users the flexibility desired, I integrated subgenre selection within a filter functionality I had created to allow for selection of specific formats (record, CD, etc.). If a user visits a given genre page, they are now greeted with two rows of selected items: Staff Picks and Popular.

From left to right: Original genre page (scrapped), subgenre page, genre page (first digital iteration), genre page (final)

Note how the subgenre page (especially the filters) were adapted into the final genre layout.

Prototype

Click on the image to try out the clickable prototype in a new window. Please note that the only currently active flows are for browsing items in the Rock genre, adding items to cart/checking out, and the "Surprise Me" button

Click on the image to try out the clickable prototype in a new window. Please note that the only currently active flows are for browsing items in the Rock genre, adding items to cart/checking out, and the "Surprise Me" button