What is Wall of Sound?

They are a small, local, independent record store that prides themselves on an eclectic, personally curated selection of new and used music on multiple formats. Wall of Sound has a physical location in the Capitol Hill area of Seattle and a website with link to their online store. Their site and the store both have a very exclusive and minimalist approach to the record store business. Their site offers very little in interactive elements and mainly displays logo store information, their branding statement, a link to their online catalog through the 3rd party site Discogs.com, and a broken link to their newsletter via email.

Project Duties

For this project I was the interaction designer, researcher, information architect, and content strategist.

Project Scope

This project goal was to redesign the e-commerce experience for one of 8 local businesses' existing websites based on one of 3 given user personas. As a music enthusiast I was drawn to the challenge presented by creating an accessible e-commerce solution for an exclusive store. In 2 weeks I completed the following:  researched the business and competitors, created a sitemap, created user storyboards, conducted card sorting, created 3 users flows for the persona, created paper prototype for the 3 flows, created wireframes for 3 flows, and created a clickable prototype for 3 flows.

Problem Statement

Wall of Sound has an eclectic, well curated selection of music that lends itself to exploration and discovery, but its static website and aloof sense of cool make it a tough sell for a new user looking for that next musical gem.

Solution Statement

The redesign of the Wall of Sound webpage will help our user John to connect to Wall of Sound’s world of music through a fully functional e-commerce site that empowers music discovery and allows for improved feedback.

Business

The 2 main components I looked for in competitors were independent music stores with physical and online catalogs. I looked at 3 other competitors: Everyday Music, Amoeba Records, and Easy Street Records and Cafe. I compared differences in their experiences from their brick and mortar locations to the online stores. Even though both Everyday Music and Amoeba were smaller chain stores they were still deemed as independent record stores offering curated specialized products across multiple genres. Of the 3 Easy Street was the most similar in its store size and attitude in that both were places better served by visiting the store in person.

Users

Persona

Between the personas shown I felt that ‘John’ was the best choice for Wall of Sound. John is a savvy art and ‘cool’ minded consumer that I think would buy music from a good online store experience. The challenges with Wall of Sound and John are that he is very wary of unfamiliar retailers. Bridging this gap of trust is key for John in buying music from Wall of Sound. He also wants to know more about what Wall of Sound is selling than what they are currently providing.

Interviews

I conducted some questions to dig into the record store experience to figure out the kinds of features users want from buying music. I conducted interviews with 3 classmates around record stores and music buying habits.

I asked them questions that would help inform what features would appeal to music enthusiasts as well as newcomers. I wanted to understand the music listening habits that dictate how and when people purchase music. 

These questions would assist me in appealing to the hardcore music lover that the business caters to while bringing in the less experienced but curious customer that is my user John. 

When looking to buy an album in a store where do you go?

“Sonic Boom, it is close to me.”

“I will maybe get something in Best Buy if I am getting other things”

“I never go to the physical store, but go to an online store”

What do you look for in a record store?

“I like places with curated music, but not too small. I like it to be midsized”

“Friendly and knowledgeable staff”

“Listening stations”

“Categories that make sense”

When looking for new music how do you discover it?

“I go on Spotify”

“Friends tell me”

“I see the posters for new albums in the front of the records store”

User Flows

Below I illustrate the 3 flows for John through the updated Wall of Sound website. John is browsing through the music collection, purchasing an album, and then rating the experience.

Sitemap

When I took users through it there was confusion on what pages were leading where. I also realized the need for top navigation as well as side filters. With all my features and navigation sorted I was able to make my sitemap. This sitemap is the final one created after feedback was given on my hierarchy.

Sketches

Here are my initial sketches to determine pages needed for John’s tasks and the features for each page. Right away I knew I wanted to give John a “New Releases” section to give him some guidance on his new music search.

Paper Prototype

After user testing several sketched versions of my home page, product page, and contact page I felt as if I had enough of a direction to start creating paper prototypes. I still felt unsure of my navigation method for whole site and wanted to focus on that in the next round. The paper prototypes were showing issues with sidebar navigation and confusion with filtering for music while fighting with other buttons for navigation.

Wireframes

Homepage

From responses to the paper prototype I was able to come up with improvements for the homepage. The paper prototype showed issues with my sidebar navigation scheme, which caused issues with my browsing filters. I switched navigation to the top and changed filtering to the left side of the page for ease of use in browsing. The homepage gives John everything he needs up front for his journey of music discovery with a search field, browse field, and new releases shown up front.

Product Page

Initially my sketch wireframes felt good due to my paper prototyping and sitemap conclusions, but when I put them into an interactive InVision prototype feedback from users showed my product page needed some iterations. Users were confused about my "Recommended" review button, the album info, and how to select a track to listen to a sample. The image on the left is my first version of the product page and the image on the right is my iteration. I changed the page title to the album title, I added the recommendation/review in the info, and I made the tracks look more interactive.

InVision Prototype

This video of my InVision prototype shows the flow for my user John, browsing through the Wall of Sound catalog to find a CD and then buying it. The flow for browsing music was final but the checkout screen was not updated per user feedback. With more time I would like to update and retest the checkout process to make it clearer with less scrolling. 

As a music nerd, Wall of Sound presented a unique challenge that was hard for me to pass up. Here was a quintessentially cool, aloof music store with an extensive online catalog that was trying to reach a wider, more curious audience. The persona of John was an avid collector of cool, but he was new to what Wall of Sound offered. I needed to bridge the gap between the business's independent, DIY attitude in terms of music exploration with John's hunger for new and cool experiences. 

As far as my ability to deliver on both needs for Wall of Sound and John, I felt mostly successful. Users responded positively to my solutions for viewing Wall of Sound's extensive catalog, but were less enthused with my checkout process. Checking out was deemed by a good section of users as cumbersome, and I ran out of time within the 2 weeks to make the next step of iterations.

This was my first project creating wireframes in Sketch and I had workflow issues. I experienced time management issues when I started making the required screens for my user flows. By the time I got to creating wireframes I was 2 days away from presenting the project to the class. Initially Sketch was more daunting than I had anticipated and I pulled an all-nighter to get everything done for my 3 user flows. I had a single day for testing and iterating on my InVision prototype, which led to a lack time on much needed revisions for my checkout process.