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

Screen Shot 2017-10-24 at 6.14.06 PM.png
Screen Shot 2017-10-24 at 11.46.51 AM.png

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.

Screen Shot 2017-10-24 at 7.20.21 PM.png
Screen Shot 2017-10-24 at 7.20.44 PM.png
Screen Shot 2017-10-24 at 7.21.06 PM.png

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

Home Page.png
Screen Shot 2017-10-24 at 11.46.37 AM.png

Wireframe

Staff Picks.png

Staff Picks

  1. onClick returns to home screen

  2. Navigation header on all screens

  3. Buttons lead to respective landing pages

  4. Shopping cart indicates once item has been added

  5. Search bar for detailed search by keyword

  6. Picture of staff member, onClick leads to page of recommendations

  7. Preview of three recommended albums, onClick leads to product page

  8. Global footer on all pages, includes social media links

  9. Sign up for newsletter

Payment Information Page

  1. Global header buttons removed during checkout

  2. onClick return to home screen

  3. Bar indicating which step of the checkout process

  4. Card type will be identified by card number

  5. Checkboxes allow use of shipping information

  6. Add different billing address if needed

  7. Order summary box on all checkout pages

  8. Footer stays the same

Payment Information.png
Review Your Order.png

Order Summary Page

  1. Check out stage

  2. Summary of shipping and billing address, buttons for editing if needed

  3. Add or subtract quantities of item in cart

  4. Final ‘submit order’ button, leading to final ‘order complete’