top of page

Wanna Hear It Records

Desktop - 2 (3).png
15_ Macbook Pro Mockup Front view.png

The Project

Wanna Hear It Records, a small independent record store in Boston, gets a mid-fidelity website redesign focused on improved navigation, 

Team

Solo Project

Scope

  • Market Research

  • User Interviews and User Persona

  • Card Sort and Content Schemes

  • Wireframing and Prototyping

  • Usability Testing

Timeline

One week

Overview

Background

Wanna Hear It Records, a small independent record store in Boston, was selected for this mock web redesign because of its growth potential among local record stores competing for business in the Greater Boston Area.

 

The Ask

After identifying Wanna Hear It Records' (WHI Records) opportunity to gain market share, optimising the intuitive navigability of their website was a logical next step to increasing sales, especially from first-time customers.

Priorities

The goal was to test the current website for specific user flows, and improve the usability through iterated and tested redesigns such that quantitative usability metrics would prove the new design easier to navigate for the average user.

UX Research

In this information-gathering phase, I interviewed users on their relationship with record stores and record store websites. I tested both old and new website designs with users and developed a persona of our target user.

Questions to answer

How does WHI Records fit into the competitive landscape?

How can WHI Records attract more business?

How can WHI Records create the smoothest possible experience on their website?

Market Research

Wanna Hear It Records opened in 2020, and despite the challenges of the COVID-19 pandemic made a name for themselves in the local vinyl buyer community as a store that carries a wide range of genres, with as much attention on chart-topping pop as more fringe areas like punk and metal.

Selecting a range of independent and chain stores in the Boston area, and including Spotify as a stand-in for competition from music streaming services, I completed a SWOT analysis, competitive analysis, and feature inventory of each offering to analyze how WHI Records' site measured up within the competitive landscape.

Screen Shot 2023-01-13 at 11.18.32 PM.png
Screen Shot 2023-01-13 at 11.22.31 PM.png
Screen Shot 2023-01-13 at 11.24.42 PM.png
Screen Shot 2023-01-13 at 11.26.36 PM.png

User Interviews

With each user, I conducted an interview with standardized questions, a contextual inquiry of the current site, and a card sort to see how they preferred to arrange and navigate the organization of vinyl records.

The interviews revealed that a common reason that music enthusiasts either did not buy vinyl records or were hesitant to buy from record stores was because of general confusion about where to begin, a sense of intimidation because of elitism or gate-keeping around the culture of vinyl album collection, and a lack of ability to preview an album before purchase. I aimed to address these concerns through this web redesign.

My findings concluded that:

Wanna Hear It Records has an OPPORTUNITY to capture more market share of VINYL RECORD BUYERS by creating a more friendly, accessible experience both in-store and online.

User Persona

Screen Shot 2023-01-13 at 11.36.59 PM.png

Adam, 39

Cambridge, MA

Software engineer

From trends gleaned through the user interview process, I developed the user persona below:

Adam loves music, and he likes the experience of shopping for vinyl, though he mostly listens to music on Spotify. If he finds a particular album he knows well in a record store, he’s happy to buy it – though when just browsing through records he doesn’t know much about, he’s at a bit of a loss. He’d like to be able to find records arranged by genre, price, A-Z, and special release for occasions like Record Store Day.

 

When Adam has a specific album in mind, he might go to a record store’s website to buy it. He likes that there’s a “pick up in store” option on the website because he lives close by, and he can take a look at the other records in the shop while he’s there.

 

Record shops can be a bit intimidating, and Adam wishes he has more guidance in the store. He wishes he had a better idea of what he might be buying before putting money down for it, especially when he has Spotify for free in his pocket.

  • Browses record stores occasionally, especially on Record Store Day
     

  • Enjoys playing vinyl records but could use more guidance on what to buy
     

  • Will buy an album on vinyl if he already knows it well
     

  • May also buy albums that look interesting if the price isn’t too high
     

  • Spotify user

Problem Statement
 

Adam needs to be able to navigate, choose and preview albums more easily on the Wanna Hear It Records website because he is hesitant to buy a vinyl record unless he knows something about it first.

How might we…
make it easier for Adam to choose albums he may want to buy on the WHI website?

How might we…
make the albums on the WHI website more filterable and browseable for Adam to look through?

Web Redesign

As I restructured the navigation of the website, improved search options and addressed mislabelling and redundancies, I also kept in mind the competitive opportunities WHI Records has by optimizing their website and addressing new potential customers' concerns.

Questions to answer

What trends emerged from the research that revealed problems in the current web design?

What changes can be made to improve usability?

Will the changes made result in improved usability metrics?

Content Schemes

Based on the contextual inquiries and card sorts, I proposed the following redesign of the content and navigational schemes.

Frame 2 (2).png

Wireframing and Prototyping

I brainstormed a few solutions for wireframing the new content, and arrived at a promising layout. First testing a low-res version with users, I then refined to mid-resolution and conducted a second round of usability testing with improved results, select screens of which are included below.

Desktop - 3 (6).png

Usability Testing

Usability Testing picks up where previous research, like contextual inquiry, left off. Two rounds of testing result in an iterated prototype with improved usability metrics.

Questions to answer

Are users having an easier time navigating the site?

What metrics can be derived to help set the bar for future iterations?

User Tasks

I conducted one round of usability testing, with the three user tasks below.

 

Task 1:
Find the Radiohead album OK Computer and put it in your cart.


Task 2:
Find the Radiohead album OK Computer by looking it up by artist or genre and put it in your cart.


Task 3:
Find the Radiohead album OK Computer in the Staff Picks section. Identify which staff member picked it and find their other album picks. Find other releases from the same record company.

Find the first iteration of the web redesign here.

Iterated Testing

In the first round, 8 out of 12 users (67%) completed each task in 1 minute or under, and all 12 users completed the tasks within 2 minutes.

 

There were hesitations and errors noted around a few features:

  • Design of the "Shop Now" button on the homepage

  • Lack of search bar functionality

  • Pagination on search result pages

  • Expectation that Staff Picks section would be arranged by staff member

I made adjustments to the prototype to ensure that the next iteration would show improvement around these points. In the following round of testing, 10 out of 12 users (83%) completed each task in 1 minute or under, and all 12 users completed the tasks within 1 and a half minutes.

Iterated Prototype and Next Steps

While the metrics associated with this iterated prototype are promising, and show an upward trend of improved usability, there are still other user flows to test and, along the way, aspects of those flows to refine to reach the next best prototype. 

I would like to focus the next rounds of testing on flows involving the virtual listening stations I included on the product pages, to counteract users' hesitancy to buy without a preview of the album.

Find the current prototype here.

Desktop - 12.png
bottom of page