the vinylist
A vinyl turntable e-commerce website
Product
An e-commerce website selling vinyl lovers that sells vinyl turntables, speakers, and records.
Role
UX/UI Designer, UX Researcher
Tools
Figma, Procreate, Google Drive, Midjourney
Duration
May - June 2024
Overview
The vinylist is an e-commerce website for vinyl lovers that sells vinyl turntables, speakers, and records.
This project was done as a part of my Springboard UX Design course as a capstone 2 project. As students, we were required to pick a project that presented a problem and solve the problem through a redesign of key pages.
Project scope
The goal for the vinylist was to improve conversion from browser completion of checkout to increase revenue on the product’s mobile-web experience.
The product manager tasked us with re-designing a web platform to solve the problems shown above. I did secondary and competitive research on how I might solve these problems. After ideating, sketching, creating a clickable prototype, testingm and iterating, I was able to create an impactful website that solved these problems that gained positive feedback from my mentor & potential users.
Target User
25 - 38 years old
User base is 52% men
Med-High income earners
They take their audio experience very seriously. They will spend a lot of money on this investment so are very picky and do their research
02 Research
The first thing I did was delve into research to see how my competitors were attacking the same problem and better understand how of web design may help with conversion.
a) Secondary Research:
Design and Conversion Rate
The secondary research focused on a scientific study done on retail website design and conversion rate.They believe that state of flow increases purchase intention and therefore increases conversion rate. The authors experimented with different aspects of web design in e-commerce sites and examined if flow was increased, decreased, or interrupted.
b) Competitive Analysis:
Amazon, Ebay, Apple & Best Buy
In my competitive analysis research, I studied the websites of four top performing e-commerce websites (Amazon, Ebay, Best Buy, and Apple). My goal was to examine how these companies were streamlining the shopping process and ensuring conversion rates. I also wanted to see what features these websites had to compare similar products.
01 Exploring the Problem
For the assignment, we were given a scenario in which a company (the vinylist) needs to enhance their browsing and checkout experience to greatly improve their product’s usability.
The vinylist presented with 2 problems:
50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
Additionally, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Right now, users must make an account to purchase.
Product manager’s hypotheses
Users are unable to determine which vinyl turntable is best based on relative features
Users are frustrated that they must make an account to purchase.
Solutions
Create a comparison chart so that users can easily compare relative features
Create a streamlined guest checkout experience
03 Ideating + Sketching
The first thing I did was delve into research to see how my competitors were attacking the same problem and better understand how of web design may help with conversion.
a) How might we allow users to easily compare similar products?
I liked the comparison chart on the product description page of the e-commerce websites in my competitive analysis. I specifically liked the look and function of the ones on Amazon and Best Buy the best
I also wanted to implement a separate comparison page like that of Best Buy’s so that users can easily choose which products to compare.
b) How might we streamline the guest checkout process?
I really liked the checkout flow of Best Buy. When checking out, they present two options: sign in or checkout as a guest. They have an option at the end of checkout to create an account by inputting a password.
I wanted to ensure that users feel they are inputting the minimum amount of information when checking out as guests so I wanted to divide the guest checkout process in two pages: shipping and billing.
04 Sitemap + User Flows
I wanted to keep the navigation as simple and easy as possible as I learned in my research that lots of extraneous links may disrupt conversion. I boiled the site down to five main pages:
Home
Turntables
Stereo
Records
About Us
For the user flow, I was able to combine my two solutions to one flow:
Compare products and purchase through guest checkout
05 Style Guide
To get inspired, I created an inspiration board for a guideline on how I wanted the website to feel. I was inspired by different album covers, waves, and vinyl lines. I especially loved the colors of the Stevie Wonder album.
Color palette
When deciding on the colors for the brand, I wanted to highlight the uniqueness and retro art of vinyl music. Vinyl music is often described as warm, dynamic, and immersive. Therefore, I decided on a red-orange hue named Cinnabar (#EE3F27).
Additionally, I included a Teal (#006C67) for links and a nod to blues representing intellect, clarity, and technology.
Brand attributes
Savvy
Focused
Dependable
Movement
06 Wireframes + High Fidelity
I designed a total of 5 pages (Home, Products display page , product page, cart, and checkout). The ones I focus on here are the product page and checkout since they include both my solutions.
I then turned my sketches into wireframes. I used Best Buy, Amazon, Sonos, Audio-Technica, Nike, and Turntable Lab as proportion guides and inspiration.
Product page
Solution 1:
My solution was to allow users to easily compare products with a comparison chart. I took inspiration from mostly Turntable Lab and Best Buy.
Guest checkout
Solution 2:
I researched how my competitors tackle guest checkout and liked Best Buy’s model. I liked how they made the sign in path and guest checkout path as separate and clear as possible. I also like that when checking out as guest, they gave users the option to put their email and create a password so that they may create an account.
07 Usability Testing
I made a script and decided on the questions I wanted my participants to complete. My test objective was to see if users can easily navigate the website’s features. Specifically, the mini menu, filter, comparison feature, and guest checkout features. I also wanted to get their overall opinion on the UI/UX of the website.
I tested 3 participants who met the requirement of shopping for products online.
08 Iterations
Based on the valuable feedback I gained from my usability testing, I made a few changes:
Top navigation
moved buttons to middle
Home
changed banner text colors to a brighter red-orance
changed “for Audiophiles” to “high-end”
Product display page
changed “select models to compare” to bright-red orange
put stroke around each item picture so that users will know that they can select these ones
09 Final High-Fidelity Prototpye
Reflection
Overall, I think the problems were solved effectively. My main constraint was time but I was still able to create something I am really proud of. Getting feedback on my designs is always helpful and I am beginning to love showing my work to my friends. This project definitely put my Figma skills to the test (charts galore) but I loved designing in the e-commerce and media space. I hope to work on many more projects in these fields in the future!
Key Takeaways
1
Things that are noticeable to me might not be noticeable to all users
During testing, users were unsure of how to select products to compare on the products display page. Although I could notice it well due to the bright orange text. I noticed my users had trouble finding the “compare” button. I made sure to make it pop by filling it with the orange color which resulted in users being able to find the button.
2
The primary color shouldn’t be used at every chance
While designing the high-fidelity wireframes, I utilized the primary color (cinnabar) everywhere I could. However, I found that this takes away attention from my call-to-action UI elements. In the future, I will play around with adding more of the secondary color or playing with opacity to give the primary color its moment.
3
“Flow” is an important factor in the e-commerce world
During secondary research I was introduced to the concept of flow in the e-commerce frame. I thought of how I online shop and remembered how many times I was frustrated with registration, banners, bad websites, and etc. I realized these “disruptors of flow” stopped me from purchasing items many times. Moving forward, I will make sure to keep flow in mind so that users have a streamlined web experience.