I created an e-commerce website designed to sell both vintage and new records in an effective and aesthetically pleasing way. The design is geared towards Generation Z and is meant to give a modern feel to a retro method of music listening.
Vinyl records are making a large comeback in Generation Z, making their mark as an aesthetic and exciting way to listen to any music. There is a large population of people collecting classic records from the 60s and 70s, but there is also this entirely new market for those who choose vinyl for its aesthetic and unplugged appeal. In creating this website, my goal was to match, and maybe even further develop, this retro aesthetic that Generation Z is trying to capture through their interest in vinyl records.
In the beginning phases of my research, I watched many YouTube videos from self-proclaimed record collectors talking about acquiring vinyls, the basic upkeep and proper handling of them, and some overall “dos and don’ts” of the hobby itself. Through this research, I decided that I did not want to discourage possible collectors from using this website by making things overly technical or angling the site towards a specific genre. Instead, I wanted to focus on what kind of things would appeal to this age demographic as a whole.
I asked myself how I would create something that is interesting, yet simple enough so that all of the album covers for sale would look cohesive next to each other. This is where the idea of the white brick wall came in. This is a very trendy concept and allows for a more rustic and real, yet modern feel to the concept of purchasing vinyl. It keeps the background light and relatively neutral so that every piece of cover art can maintain its original intention. I chose a color palette that had five completely different colors all with a more dusty tint so they looked worn and calming.
The vision I had for this website was to bring the experience of in-person record shopping to people who may have never had the experience of doing so themselves. The bins on the homepage are sorted by genre, and I envision on a computer screen that hovering over them would bring out some example albums of that genre. In the “Complete Collection” tab, all the genres sit side by side so that users can explore them as they go. However, for convenience, genre specific sections and the search bar can be used as a more targeted way of accessing individual albums or artists. Also, in the browsing pages, I removed any record specific information from the gallery so that users would have the complete experience of having to examine individual records by cover like they would do in stores. The pop up screen would turn each record to the back like users are having a closer look at the object in their hands.
Throughout this process, I learned a lot about creating prototypes. Adding animations such as the “Add to Bag” quantities, carousels, and the transitions between pages is something that is not immediately obvious to plan until you are in the throes of prototyping. It was a really helpful way for me to know what still needed work and what functioned properly. It also allowed others to test the site for me and let me know which features they liked and did not like.
This project was a very fun way for me to dive deeper into the world of UX/UI. The end result was successful and accomplished all the goals I set for this design. In the future, I would love for this to be expanded into a full website compatible for a laptop or desktop, and explore animations and features that are not possible in a touch screen space, such as mouse hovering. I would like the records to flip when users hover the mouse over them so that both sides are more readily presentable without having to click into individual pages. With more time and resources, I would love to expand the amount of records available and improve the organization and genres that they are divided into. I would love to also see this project expand into a space where users could buy and sell used records to create a community and allow collectors to find the records they are searching for.
