Original Vinyl
Role:
Solo project
UX Research
UI Design

Timeline + Deliverables:
2 weeks
Revised Site Map
Add e-commerce function to existing site
Iterations based upon usability testing

Key Methods:
Contextual Inquiry
User Interviews
Card Sorting
Information Architecture
LowFi Wireframes
Usability Testing
HiFi Prototype
Problem:
Original Vinyl’s current website hides rather than showcases the available products, and redirects users to a third party site to shop and checkout. Original Vinyl is missing out on a customer base that prefers or relies on the online shopping experience.

Solution:
Original Vinyl’s new site places their unique and vibrant products front and center. Customers can now browse through inventory online, and discover new music along the way with suggestions and featured picks. The option to “pick up in store” also encourages customers to continue to stop in person, where the discovery process can continue!
A drawing of a record player with the message "Jump to HiFi Prototype." This button allows readers to jump to the HiFi prototype video below.
Overview
Original Vinyl is a local-favorite record shop in San Francisco. The store is heavily reliant on its' in-person shopping experience, and occasional pop-up shops at community markets.
A snapshot of the existing Original Vinyl Homepage with my notes overlaid: The current homepage does not showcase the products sold. The top navigation also includes a link to "original Vinyl, L.A." which could be included in the "About" section regarding shop locations.
While Original Vinyl's storefront is incredibly effective at luring in a curious vinyl connoisseur...their website is a missed opportunity to do the same. The current site (shown above) does not showcase their vibrant inventory, and practically hides the hyperlink to the third party online marketplace, Discogs.
Research Objective:

To understand users’ preferences and behavior when shopping for vinyl - and to identify pain points in the online shopping experience.

Research
First, I spent some quality time in the Original Vinyl shop. As I observed customers peruse through the inventory, I noticed a common sequence:

1. A customer explores the “New and Featured” section of albums.
2. They next scan the albums showcased on the perimeter wall shelves.
3. Finally, the customer begins sifting through the bins of inventory in the center of the store.

* Additionally, a few individuals went to the check out counter to inquire about the music playing in the store, or to request assistance in finding something specific.
A photo of the interior of Original Vinyl's San Francisco store. This photo shows shoppers looking at the Featured section and sorting through stacks of records.
Next, I interviewed 7 individuals, ages ranging from 27-55, who all had experience shopping for vinyl records. Some key insights included...
A drawing of 5 sticky notes from user interviews that state: "Record stores can be intimidating - because I am not a vinyl expert." "I'd like to shop online and pick up in store." "I enjoy when there are product suggestions based upon my preferences." "I need to see the condition of the vinyl inside." "I enjoy when music is playing in the shop, I have bought what happens to be playing many times."
Key Takeaway:

Many shoppers do not enter a vinyl record shop with a clear idea of what they are seeking. They are instead relying on inspiration and suggestions to influence a purchase.

Personas
Two distinct personas emerged from user interviews and affinity mapping the qualitative data:
Persona A is Lena Lewis. She says: "I don't shop for vinyl often, but I do enjoy picking out a record as a gift for someone else." I am to: - find something specific. - check the condition of my purchase. - support small businesses. I am frustrated by: - disorganized inventory. - short-staffed shops - long shipping lead times I enjoy: - finding what I need quickly - flexible payment options - attractive cover art Sometimes these things help: - a reliable search function. - express checkout. - shopping online and picking up in store.
Persona A is Jaime Jones. He says: "I am a novice vinyl shopper, and need some guidance and inspiration when shopping for records." I aim to: - build out my record collection. - support artists I already know. - discover new music along the way. I am intimidated by: - too many options. - feeling like a "newbie." - asking for help. I enjoy: - music suggestions. - album cover art. - an aesthetically appealing environment. Sometimes these things help: - the ability to apply filters. - a reliable search function. - shopping online and picking up in store.
Information Architecture
In addition to qualitative data gathered from user interviews, I also set up a card sorting activity in order to inform the organizational structure of the vinyl record inventory.
While "sorting by genre" did emerge as the favored structure, the idea for a "Discover" category sprung from a few card sort results that instead chose to sort albums by mood, theme, or decade. The above site map integrates these findings.
Link to Figma file here
Design
True to my architectural roots, I whipped out a roll of trace paper and got to work iterating on screen concepts that integrated a shopping experience into the Original Vinyl existing website:
A photo of a collection of hand sketched wireframes done on trace paper and taped onto my wall.
The new landing page incorporates a “Featured and New” section, similar to the in-store experience. Shopping was incorporated under a new “BUY” tab at the primary navigation in order to reflect the “BUY SELL TRADE” messaging on Original Vinyl’s signage.
6 low fidelity wireframes in black and white that demonstrate how inventory is now being displayed on the Original Vinyl website. New and Featured products are shown on the home page, with other categories nested under the "BUY" tab on the primary navigation.
The Solution:

Original Vinyl's new site draws inspiration from the in-person shopping experience; both encouraging discovery and maintaining an organized navigational structure.

Iteration
I conducted Usability Testing of the LowFi Prototype in order to identify areas to tweak for the next iteration. Users were excited by the Featured + New section on the Home Page, and described the check out process as "professional" and thus trustworthy.
An image of the low fidelity home screen with a revision bubble around the drop down menu I designed.
The drop-down menu design was a bit clunky to use, and one user suggested that all content should be displayed in one area. My next iteration evolved into a mega menu that was more accessible and clean.
An image of the low fidelity product page screen with a revision bubble around the suggested products section at the bottom of that screen.
Some users missed the "You Might Also Like" suggestions at the bottom of the product page. In my next iteration, suggestions were also displayed in the check out side panel.
An image of the check out page with a revision bubble around the shipping information section.
Users noticed that there was not a way to pick up the purchase in store, so I made sure to include this option in the next iteration shown below.

Drumroll please.....

High Fidelity Prototype
A number of the opportunities for improvement listed above were picked up in the high fidelity prototype below:
My next steps with this project would be to perform another round of usability testing on the high fidelity prototype, and to gather site analytics to even better understand how users shop on Original Vinyl online.

Keep scrolling for a bonus track...

A little something extra:
Just for fun, I explored a playful design for Original Vinyl's 404 page:
back to home
next project