Bop Street Records
The Challenge
We were tasked with finding an outdated website, to redesign the website and add/implement an ecommerce component, keeping in mind the user needs and goals of one of three personas provided to us. I chose Bop Street Records, a local Seattle record store with an outdated, barebones website with minimal content and ecommerce handled by an outdated eBay page.
My Solution
I redesigned the current website and reorganized and created content pages. Because of the limited content offered on the eBay page, I created an album inventory organization, allowing customers to browse by genre, artist, as well as find staff picks and bestseller lists. Additionally, I added an ecommerce/product checkout component for onsite, online shopping.
My Role
This was an individual concept project, so I was responsible for the entire UX process, from the initial research through the final design.
Original Site Map
Comparative Analysis
A review of awwwards.com award-winning e-commerce sites revealed current trends of large, full page hero images, minimal text on the home page, and with smaller global navigations at the top of the page, a sharp contrast from Bop Streets current text heavy home page with one small image and a large, clunky global navigation.
Contextual Interviews
Bop Street Records has been a Seattle staple since 1974, and they boast an "inventory of over half a million titles [including] Rock, Soul/R&B, Jazz, Blues, Classical, Country, World and many other genres from the 1920's to 1990's." I wanted to try and replicate the experience of browsing through these titles in person, so conducted contextual interviews with customers in record stores, asking how they expected to be able to look for records in record stores.
Redesigned Site Map
Wireframe
Staff Picks
onClick returns to home screen
Navigation header on all screens
Buttons lead to respective landing pages
Shopping cart indicates once item has been added
Search bar for detailed search by keyword
Picture of staff member, onClick leads to page of recommendations
Preview of three recommended albums, onClick leads to product page
Global footer on all pages, includes social media links
Sign up for newsletter
Payment Information Page
Global header buttons removed during checkout
onClick return to home screen
Bar indicating which step of the checkout process
Card type will be identified by card number
Checkboxes allow use of shipping information
Add different billing address if needed
Order summary box on all checkout pages
Footer stays the same
Order Summary Page
Check out stage
Summary of shipping and billing address, buttons for editing if needed
Add or subtract quantities of item in cart
Final ‘submit order’ button, leading to final ‘order complete’
