A modern online marketplace to make it easier for music lovers to buy and sell vinyl records.

Made for my NYU Networked Media class. Further developed on my own time.

Vinyly Records

Tools

Deliverables

HTML/CSS/Javascript

Website Prototype

Duration

5 months, solo

VSCode/CyberDuck

Adobe Photoshop

An Overview

Vinyly Records is an online marketplace website designed for vinyl record lovers to buy and sell their records.

What is Vinyly Records?

The aim is to enhance the online vinyl shopping experience with interactive and modern design. This project also explored how I could bring my design ideas to reality using code instead of design software.

Goal

The Featured Feature

SOUND ON

Drag and Drop Tracks on an Interactive Turntable

Every track page displays the track’s information and features an interactive turntable that plays the record in real time.

Take me to the website!*

*Website responsiveness is undergoing development as I am still learning to perfect my web developer skills. Therefore it is recommended that you view the website on a Macbook browser, or scale the webpage down to a 1470px width.

The Problem

The current web design of online vinyl marketplaces is outdated.

According to a forum post made by user Dr.SultanAszazin regarding Discogs’ website development,

“Keep the web design for mobile devices and desktop devices different…Design should be based primarily on functionality…The lack of [improvements to the label/company pages] makes submitting very complex…The subform really needs to be designed in such a way that one can input with minimal mouse use*“.

*regarding inputting information (i.e., artist, label) for a vinyl record listing.

Dr.SultanAszazin’s response prompted me to further investigate features of the Discogs platform.

I noted several hard-cornered rectangles, standard gray buttons, underlined blue hyperlinks, and disorganized formatting throughout the Discogs website.

Such design practices are inconsistent and disorganized, making it difficult for users to navigate through them.

User Persona

Miles, 18, is a high school senior based in Brooklyn, New York. Miles loves to listen to music in his free time, and has a collection of vinyls and several vinyl record players that fuel his passion for music. Miles wishes there was a modern, trendy way to sell his old records, as he wishes to also buy some new ones before he heads off to college. Although there are current online storefronts to sell his records, Miles finds that these interfaces are complicated to navigate and their usability uninuitive.

Challenges

Needs

Miles, 18

∙ Can’t find any reliable, uncomplicated websites to sell and buy records

∙ Hates unintuitive and unusable design

∙ A streamlined customer experience of selling and buying vinyl records online

∙ An innovative way to shop for records

Research

Through interviews with 2 vinyl record DJs, the following data was collected on their vinyl record shopping habits:

They always have hoards of records they don’t use anymore.
- Consequently, they resort to selling their records to each other rather than posting them online. However, they end up not posting their records online because there is no adequate platform for that.
In order of preference on where they like to shop for records:

Going to each other’s apartments to look at the records spin on a turntable.
Discogs - the large library of thousands of records overtakes the poor website design.
Various miscellaneous platforms.

One claimed to like shopping through an IG seller’s page who features records in videos spinning on a turntable.
When they buy tracks, they look for tracks that have similar BPMs to the ones they want to mix with.

Solution

Based on the data collected on vinyl record shoppers on Discogs forums and vinyl record DJs, I aimed to implement the following design solutions throughout the Vinyly Records website to enhance the vinyl record shopping experience:

Make the process of record-shopping interactive by displaying a digital turntable that spins the records in-real-time. Users will be able to drag and drop a record onto the turntable to hear the record play, instead of pressing a button.
Simplify the listing process by organizing input field elements within a bounded listing space that requires “minimal mouse use”.
Personalize the user experience with an onboarding process and cookies. An account is necessary in order to post a listing to Vinyly. Usernames will show up next to a user’s listing. Recommended tracks are displayed based on a user’s cookies.
Create a modern design system that utilizes rounded borders, evenly distributed spacing, and brighter colors to modernize and organize the vinyl shopping experience.

Design Thinking

The design of this website combines timeless modern elements with nostalgic vintage aesthetics. The homepage showcases black-and-white photos, Vinyly sellers' listings displayed as Polaroid-style images, and descriptions rendered in a typewriter-like monospace font. This design process aims to modernize and streamline an interface grounded in vintage charm, while simultaneously maintaining its function. In addition, it was an opportunity to advance my knowledge and skills in back-end development, which I believe is a necessity to be exposed to in order to have a holistic understanding of web development.

Vinyly Sellers

This section can be scrolled through horizontally. Click on a listing to view the listing’s information (undergoing development). Click ‘View all’ to view all the listings on one page.

Explore by genre

Click on a genre to view the tracks Vinyly sellers have listed under that genre.

Navigation

Click on the Vinyly Records logo to access the homepage and My Store to access your online storefront. The Favorites and Cart pages are static and undergoing development. The search bar is functional for the homepage’s “Disco tracks just for you” section. Search results will be filtered based on the characters inputted to the search bar.

Personalized track recommendations

Tracks that appear here are personalized to your interests (undergoing development). Click on Fever by Kylie Minogue or True Blue by Madonna to view each listing’s information.

Footer Information

Read about Vinyly’s goals, mission, and identity.

Sign up to create your online storefront. Log in with the username and password you used to create your account. Your personal information is stored within a database.