E-Commerce Redesign
Dusty Strings
The Dusty Strings Music website was in need of a rehabilitation, as the designers had attempted to showcase both the products the shop has to offer, as well as the instruments the shop manufactures. They accomplished this by providing in-depth information regarding a few choice instruments - however the lack of organization and poor compartmentalization of this information rendered the site very difficult to use as an e-commerce site.
Role /
Researcher & Designer
Role /
9 Days
Year /
2017
The Objective
Dusty Strings is a local music shop in Seattle which serves its community in a variety of musical ways, as a venue, vendor, educational source, and manufacturer. However, this breadth of service has left their website both cluttered and impenetrable, and they are in need of a redesign to make their website more navigable.
The Goal
To redesign the information architecture of Dusty Strings' website, so that a musician can easily access concise and reliable information about music equipment before making a purchase.
The Skills
Information Architecture, Contextual Inquiry, Persona Development, Card Sorting, Affinity Mapping Iterative Design Process, High Fidelity Prototyping
User Research
User Interviews & Contextual Inquiry
A list of questions was compiled to ask users to gain insight to their shopping needs, such as:
- What criteria do you use when looking for a musical instrument or accessory?
- How do you shop for a high-price musical item? What is your process? And for low-price items?
- Recalling the last time you were shopping for a musical item, can you tell me about frustrations you may have encountered, if any?
Contextual inquiries were also conducted with each of the participants, to better understand pain points they came across while using the Dusty Strings website. Included among the assigned tasks were:
- Please find a set of strings for your harp
- Please find and purchase spare strings for your hammered dulcimer
- Please find a guitar between $400-$900
Key Findings
I compiled the information from my user research into an affinity map, from which I was able to develop insights found below:
- Users value clarity in an e-commerce site
- Users want it to be easy to make purchases
- "Making the decision is hard enough, making the actual purchase should be second nature"
- Information is valuable, but too much of a good thing is bad – it clutters the experience
- Users feel they should be able to get to anywhere on the site, from anywhere else
- Users trust real customers over site copy & store representatives
- When making large purchases, customers use sites to narrow selection, and the store to test and make a final decision.
Competitive Analysis
Before making adjustments to the Dusty Strings website, a round of competitive analysis was necessary to gain insight to the navigation conventions of other music e-commerce sites.
​
A layout comparison of the Dusty Strings site with 4 competitors made the target site’s shortcomings quite clear. Below is an example, showing the product description pages of other music e-commerce sites as compared to that of Dusty Strings, on the right.
After demonstrating the weaknesses of the Dusty Strings site with a layout comparison, a color-coded and numeric quantitative heuristic evaluation summarizes the overall shortcomings of the target website.
Personas
With these research findings, I created two personas, one of which was an experienced and active musician, while the second was a casual piano player. The primary persona is shown below:
Adam
27 || Single || Longtime Dedicated Musician
​
"I enjoy the learning experience of searching for a new instrument, but I can't stand feeling bombarded by biased information while I'm seeking out specs and reviews of equipment."
Main Goals
-
Seek out products with high customer ratings
-
Get hands on an instrument and test it out before committing to a purchase
-
To make quick repeat purchases of small items
​
Needs
-
Streamlined purchase process
-
To organize site's products to his liking
-
Easy and painless site navigation
​
Pain Points
-
Too much information mixed in with the items for sale
-
Does not trust salesperson's motives
-
Dislikes when site is overly complicated
Adam has been playing music most of his life, and has experience across styles and instruments. He has a strong general knowledge of music equipment, but wants to gain specific insight about a handful of harps he is interested in.
Problem Statement
"As an experienced and knowledgeable musician, I want quick and easy access to a site's products and trustworthy reviews so that I can make an informed decision before purchase."
Solution Statement
Present the shopping experience and information in a manageable way, allowing the user to narrow
their search quickly and access legitimate user reviews, so that gaining confidence in their purchases is a
painless process.
Sketching & Ideation
With a clear idea of what users wanted, I started to design the information architecture of the site with a card sorting activity. Pictured below is the fifth iteration of this exercise, by which time an effective organization of products began to come to light.
With this map in mind, I began sketching ideas for the redesign, following conventions laid out by competitors to execute user needs.
​
I focused on three pages:
-
Home Page
-
Product Listing Page
-
Product Detail Page
Prototyping
After brainstorming ideas with sketching, I created a paper prototype to test with users. Taking their feedback into account, I created the second iteration in digital medium fidelity. After a second round of testing, I moved into high fidelity for the third iteration of the site. Below is a progression of the product details page.
Iteration Nº1
Usability Testing Round 2
Usability Testing Round 1
Iteration Nº2
Iteration Nº3
Key Takeaways
-
In the first iteration, users wanted the images to be aligned and an option to add reviews.
-
The heading in the second prototype was too large, and so it was shrunk for the third.
-
The "Item Added" button in the second prototype was not placed well, and so it was placed above the Add-to-Cart button in the high-fidelity prototype.
-
An Add Review button was added just beneath the item name
-
Reviews at the bottom were "Verified" to ensure legitimacy for the user
-
A function to reserve and test an instrument in the store was added as well, and would be tested in the next round of usability testing to determine its validity.
In order to enhance the users' shopping experience on the Dusty Strings site, I reshaped the site's information architecture, taking advantage of e-commerce conventions laid out by competitor sites. A common and persistent search bar, filters, and user reviews were added to the site, and the long-form information was thoroughly divided from the shopping experience. Each of these were added at the request of the user, and the site’s layout was refined through user testing over three iterations. Since most users still wanted to test instruments in-store, I added a feature to set an instrument aside for a day to keep someone else from snatching it up. I hypothesize that this feature would be beneficial to the user as well as the business, who would could advertise the demand for reserved equipment, thus alerting other shoppers to the instruments desirability. This, however, would have to be validated or falsified in further usability testing.