Barnstorm Music Redesign
And eCommerce Add
15 years ago a young Andy Conley grabbed his savings and walked down to the new music shop, Barnstorm Music. I was the owner, Ted’s, first customer. To this day we keep in touch.
For this project, I was tasked with creating the information architecture and eCommerce capabilities for Barnstorm Music's website to work within the time of Covid-19.
2 Week Sprint
Solo
Axure RP 9
Optimal Sort
Pen & Paper
Responsibility Overview
To complete my project I needed to do quite a bit of leg work. Originally, I was only supposed to add an eCommerce feature. I eventually realized Barnstorms website had been shut down. The Wayback Machine had a version of the website and this is when I knew I needed to redesign the entire site.
To accomplish this project I conducted the following:
-
User Interviews
-
Competitive Analysis
-
Card Sorting
-
I created four (4) user-flows and a site map.
-
Created sketches, wireframes, and low/high fidelity mockups.
-
Conducted multiple usability tests
-
Lead the presentation to stakeholders.
Barnstorm Music's Current Site
Barnstorm’s current site… did not exist. It looks like with the ease of setting up a Facebook store page, a small shop doesn’t feel the need to have a full site. But this didn’t stop me from wanting to build it out. If I could show Ted the value, who knows?!
-
The older site does not have a lot of basic site information like categories or even a product page. The page itself was very overwhelming, and the contact information was out of date.
-
In its current state, the site wouldn’t help your average customer make a purchase from home and with the world changing, online sales are pivotal.
Research And Results
Method
-
Five (5) User interviews
-
Four (4) Musicians
-
One (1) General Online Shopper
-
Affinity Mapping results
-
-
Competitive Analysis
-
Card Sorting
Results Overview
-
User Interviews: Every participant wanted to see filtering options and integrated pay features. Importantly, musicians want to feel and hear an instrument before purchase. They also did not trust the larger sites, due to how vast and impersonal they are.
-
Competitive Analysis: Competitive analysis showed that current music sites were incredibly vast, some with thousands of pages. The sites were chaotic and at times overwhelming and in-genuine. They did, however, share a lot of the same heuristics. Navigation and layout were quite similar.
-
Card Sorting: My card sort revealed people categorized instruments by general name. A guitar was a guitar, ‘type’ didn’t matter. Users would also categorize unfamiliar instruments like the ones they most closely resembled.
What Does This Mean?
The majority of users who saved articles would lose track of them in their Reading List. This lack or organization resulted in the user never returning to read the article.
Let's Meet Our User, Sophie!
Bio
Sophie is a full time Graphic Designer and amateur musician from the Boston area. When she isn’t working, she loves playing music and putting out new songs to her fan base. She is a solo act and most of the instruments are programed, except for her guitar which she will record live to get that “in-person” sound.
Pain Points
-
Sophie doesn't want to spend money on an instrument she can’t hear first.
-
Big music dealers site’s have poor navigation.
-
Sophie doesn’t trust big music dealers.
-
She wants to quickly check out without saving information.
Wants
-
Sophie wants a way to hear the instrument before her purchase.
-
She wants a quick and effective navigation system.
-
Sophie wants to know her shop cares about the instruments.
-
She wants a quick checkout.
Problem Statement
Sophie wants to purchase a new guitar but due to the ongoing pandemic she is unable to go to her favorite local music shops. Sophie needs a way to can quickly locate her items, hear how they sound, and easily check out.
Design Process
Sophie's Key Needs
-
A navigation bar that is easily traversed.
-
A way to hear the instrument she wants to purchase.
-
A way to allow her to feel the instrument before purchase.
-
A way to gauge trustworthiness.
-
A quick, non intrusive way to checkout.
How We Addressed Sophie's Needs
-
A top-shelf navigation system built using information from card sorting to help Sophie.
-
Include a video of the instruments within the product description page so Sophie can hear the instrument.
-
Including Sophie can “reserve” an instrument for an in-store play-through.
-
Including live customer reviews or tweets.
-
Integrating payment apps as-well-as asking for as little information as possible.
Site Map
User Flows
User Flow 1: Making A Purchase
User Flow 2: Search And Filter
User Flow 3: Reserve An Instrument
User Flow 3: Reserve An Instrument
Sketches
Home Page
The Homepage would be a typical grid style shop. The top navigation will host the different categories of instruments with current deals right below it. Below the deals, you can see live tweets right on the home page to see what current news and people are saying regarding Barnstorm. Sophie could also make an account right from the main page.
Product Page
The individual product page held a bit more information on the guitar, including a description, more images, a video for Sophie to watch, and, if Sophie wanted, she can schedule a day to come in and play the instrument by reserving a trial.
Search Results Page
The product page would also follow a grid design. Sophie would be able to filter out to exactly the type of instrument she wanted. Or, simply type it into the search bar above the top navigation.
Product Page - Reserving Product
When the “reserve trial” button is selected, a drop down calendar and email input will appear and Sophie will be able to schedule an in-person play with Barnstorm!
Wireframes
I upgraded my sketches into wireframes using Axure and made some changes to the initial sketches. From there, I also included a couple pages I had not thought of, including confirmation pages and visual changes when actions are taken.
Home Page
I changed the “Live Customer Tweets” section to a Customer Reviews page. This page would allow Sophie to see the most up-to-date reviews while leaving one directly on the same page. Once she submits her review, the text box will change into some confirmation text.
The “My Account” page was also removed, in exchange for a small icon in the upper right-hand corner. Moving that section to an icon reduced the idea that users needed a profile.
Product Page
Once selected, a calendar will drop down and Sophie will be able to pick an available date, enter her email, and schedule a time for her and the owner to meet up and try out the new gear! She will receive a confirmation email after she hits submit.
Product Page
Building customer trust is important, so I included a customer reviews page. Here, Sophie can read up on others experiences, and even leave a review for herself.
User Testing
With my wireframes reaching mid to high fidelity, I began to user test the journey Sophie would take.
The user test was conducted with 3 participants, each were given 3 different tasks.
Task 1
Buy a Strandberg Boden guitar.
Task 2
Reserve a spot to try the Strandberg Boden.
Task 3
Leave a customer review.
User Testing Takeaways
Each user finished the tasks quickly and with little, if any, issues. The design seemed to resonate with how people are used to purchasing.
While observing, I saw just how many people went straight to filter the products. This shows just how important a thorough, accurate, and efficient filter would be.
Iterations
Home Page - Wireframe
-
The original header included a stacked business name and large icons.
-
The footer had large, black and white images
Check Out - Wireframe
-
The “Review your Order” page was towards the middle of the Sophie’s journey.
-
The “Review your Order” lacked necessary information.
-
The “Review Your Order” page allowed Sophie to select “In-store Pickup” before going through payment information.
-
The page included the top-navigation incase Sophie wanted to continue shopping.
Home Page - Final Design
-
The newest header would include a much larger company name and smaller icons, balancing the header’s weight.
-
The new footer had smaller icons that included the actual coloring and style of the links they led too
Check Out - Final Design
-
In the newest version, the “Review your Order” page was moved towards the end of Sophie’s journey.
-
More of the Sophie’s order information was made visible.
-
Since the “Review Your Order” page was moved to the end of Sophie’s journey, she no longer needed to choose if she wanted an in-store pick-up from this page.
-
The top-navigation was removed to prompt Sophie to complete the purchase instead of abandoning to look at more options.
