Home
Home
Spin Spectrum
SPIN SPECTR UM
research
About
A project brief was provided to me as the designer, to create an e-commerce website. The client's key objectives were to:
-
Create a sleek and dynamic experience for the user
-
Have a clean and modern design
-
implement simple and intuitive navigation systems
Solution:
Provide a breath of fresh air by creating an online vinyl record store with a sleek and modern design
Problem Statement:
Users are tired of untintuitive websites of online vinyl record stores. They also seem to be outdated
Target Audience:
-
Music Enthusiasts of All Ages
-
Audiophiles and Vinyl Heads
-
Professional musicians and djs
-
Ages 18-65
START
User Flow
Diagram
CONFIRM
Create
Low Fidelity Wireframes
Mid Fidelity Wireframes
The biggest change I made between the low and mid-fidelity wireframes, was the way the filtering options looked and operated. Referring to the Project Brief, it states as follows, “Users are tired of the complex and unintuitive navigation systems in traditional online stores, so we provide a breath of fresh air with our sleek and dynamic experience.” In order to really deliver this, I removed the checklist style of features. Which I find to be outdated and too complex. I felt it is more sleek and dynamic, to add the filters at the top of the screen as buttons the user can easily toggle between.
User Testing
Using the Mid-Fidelity Wireframes, I conducted a usability test with three participants. I gave them a scenario in which they needed to complete a task. The task given to them was:
“
you want to buy a vinyl record, based on the screens provided, how would you go about doing that?
“
jeremy
“I think everything looks great and works as expected”
“I think that the font on the buttons, for example, the “buy now” button, is a little too stylized. Personally, I’d prefer if it was just a little more plain.”
“Could just be an optical illusion, but I think that the button for ‘shop by format’ might be a different size than the other buttons its next to.”
Data Engineer, 41, Los Angeles
taylor
“Wow, I really like the clean layout. This is actually easier to use than some websites that I use!”
“I first tried to add the album to the cart because that’s how I shop when I’m on other sites. But I actually wasn’t able to. So that’d be nice to be able to do that.”
“I think it should show me my final total on the Place Order page before I buy the item. I definitely want to be able to confirm that before I place my order”
Account Manager, 37, Seattle, WA
leo
CF Student, 25, Seattle, WA
“I noticed that you had a back button when you’re on the payment screens but not on any of the other screens. It feel like it should be on all the screens or none of them. Just to be consistent.”
“I feel the font is rather large for the screen on the Confirmed Order screen. I had to scroll just to read that little blurb, which I feel it should be readable without having to do that.”
before
after
Added invoice section after feedback from users saying it’s important to know what they are going to be charged before they finalize a purchase.
before
Changed the typeface on the ‘Buy Now’ and ‘Add to Cart’ Buttons to be less stylized. One user tester said it was easier to read and grabbed more attention with a bolder, more simpler typeface.
after
before
after
One user was confused why there were back buttons on the payment screen only and not the other screens. I decided to remove them altogether to keep the clean aesthetic of the screens and keep everything consistent
before
One user was confused why there were back buttons on the payment screen only and not the other screens. I decided to remove them altogether to keep the clean aesthetic of the screens and keep everything consistent
after
Reiterate
After the user testing was conducted and analyzed, I made some changes to the interface based on the feedback.
Brand Guidelines
WHO WE ARE
Welcome to Spin Spectrum, your vintage vinyl record haven! We celebrate diversity and inclusivity in music, providing a laid-back atmosphere for collectors and newcomers alike. Dive into our eclectic selection and discover the perfect record to add to your collection, no matter your taste.
spin spectrum embraces the essence of vinyl culture
“
“
quality curation
At Spin Spectrum we pride ourselves on offering
a carefully curated selection of vinyl records, ensuring each piece reflects our commitment to quality musical experiences
easy experience
Spin Spectrum aims to always provide an easy to navigate online shopping experience. Choose to shop ala carte or join our subscription service and let us do the choosing for you
diversity
Our brand is a celebration of diversity. Spin Spectrum welcomes music enthusiasts from all walks of life, creating an inclusive space that appreciates the richness of different tastes and backgrounds
PERSONALITY
laid back & approachable
We, at Spin Spectrum, are approachable and down-to-earth. Our brand communicates ease and friendliness.
hip and trendy
We stay ahead of the curve, effortlessly integrating modern trends into our vintage-inspired identity. Spin Spectrum is the epitome of cool.
inclusive
Spin Spectrum welcomes music enthusiasts from all walks of life, creating an inclusive space that appreciates the richness of different tastes and backgrounds.
OUR CORE VALUES
COLOR PALETTE
FFAB20
PRIMARY
CD1002
SECONDARY
151515
ACCENT
AND TEXT
EFEFEF
ACCENT
AND TEXT
These colors are bold and represent the vintage aspect and will contrast well with the modern typefaces that Spin Spectrum uses to fulfill the need for a modern and sleek feel to its experience.
VOICE
not so serious
We love to communicate in a friendly and approachable tone. Wording shouldn’t be taken too seriously and the use of slang can be used throughout the company.
passionate
Share our passion for music and the vinyl experience. Let the enthusiasm for our products shine through in all communications.
diversity driven
Use language that embraces diversity and inclusivity. Celebrate different music tastes and cultural backgrounds.
DO’S
Logo can appear with or without the text
Logo can appear with or without the black background
DON’TS
Rotate, skew/distort, or change the color
LOGO
Final Designs
Come as you are.
No need to create a login or memberships necessary. Feel free to peruse our selection and shop whenever you please! If you do decide to join our club, you’ll have a curated selection of vinyl records that we think you’ll love based on your search criteria, purchase history and whatever you choose to browse!
Use our easy-to-use filters to search for what you need or simply to explore! Or if you know exactly what you’re looking for, you can always find it using our search function!
Find what you need.
Shopping mae easy.
Use our easy-to-use filters to search for what you need or simply to explore! Or if you know exactly what you’re looking for, you can always find it using our search function!
Get more when you join.
THANK YOU
Spin Spectrum was a fun passion project to have created and worked on. Being a music lover myself, I found enjoyment in immersing myself as a user. With my personal interest, I believe I was able to create a product that users would want to interact with. Based on the client's needs outlined in the project brief, I was confident that those needs were met. Users that i had tested overall had a positive experience; noted that the app was fun to use, sleek, and intuitive. Mission complete.
User Stories
