Amoeba Music
Remapping a site with user insights
The Problem
Losing a few hours browsing the aisles of a record store is a great way to spend an afternoon…
But when you translate the overwhelming nature of a record store to the web, it can create a frustrating experience for users.
I analyzed and tested the structure of Amoeba.com, the website for the iconic Californian chain of independent music stores, to understand how users currently use the site, and provided actionable recommendations for improvements.
Content Audit
PHASE ONE
Understanding the current structure of Amoeba’s website was my first priority.
I took inventory of the site and assessed it for consistency, usability, and accessibility.
Process
Scrawl
I used an automated scrawler to quickly gather information on the number of pages, links, and images on the site.
Categorize
This data was then grouped together and organized using a spreadsheet. Dead links, circular navigation, and the current site structure were carefully noted.
Analyze
This data was analyzed using Fred Leise’s 11 heuristics for analyzing website content, a reliable and thorough framework for discovering the strengths and weaknesses of web content.
Findings
I identified broken links, missing images, and poor wayfinding, all from years of adding content on top of content without a clear system or vision.
Here are a few examples from the original site.
The artists page was missing images for nearly all items listed.
Many merch categories contained no content
Merch organization and categorization was inconsistent, with items located in the wrong category. Here, enamel pins are present under "Accessories."
While enamel pins has its own category, where the items are not located.
The "New Releases" and "Pre-Order" links led to the same page.
PHASE TWO
Testing
With my own findings established, I investigated how the average user understood the language and grouping of Amoeba.com’s content through a card sort.
Card sorting is a exercise in which participants are asked to group a number of topics together instinctively, and then give each group a name.
I discovered new ways to categorize the navigation elements, and about confusing language that was currently being used.
My Card Sort - from Optimal Workshop
PHASE THREE
Creating a Sitemap
I created a new sitemap, implementing the data I had gathered from my card sort and content analysis to adjust the structure of the content.
PHASE FOUR
Tree Testing
I created the sitemap and conducted testing to validate my changes.
Tree testing is an exercise where users are given various scenarios with the goal of finding a specific piece of information. The “tree” represents the high-level navigation on the website, and the participant is tasked with clicking through the sections and selecting where they would expect the information to be.
Task Analysis & Examples
Tasks were designed to validate my changes made to the sitemap. Overall, users were able to find information successfully and directly.
Example One
Goal
Will users instinctively be able to locate gift certificates in the Merch section of the website?
Results
Yes!
Participants were able to locate Gift Certificates after they had been moved to the Merch Category with a high degree of directness.
Example Two
Goal
Users had trouble understanding the “Vinyl Care” label in the card sort. Will the change to “Vinyl Players & Care” be enough for users to locate the merchandise?
Results
The majority of users were able to locate the correct page, but only after much searching. This task highlighted another label that was causing confusion, “Buy, Sell, Trade”, many participants went there during their journey as it seemed like the place they would go to buy things!
PHASE FIVE
Development
I made changes to the sitemap and taxonomy used and created wireframes to showcase how the new sitemap would function.
Secondary to the new navigation structure, I also aimed to modernize the design to appeal to new users.
Homepage
Massively de-cluttered, moving the focus to the music
Large feature carousel above the fold.
Below are shortcuts to browse all music and movies, and further down contains links to the news and events section as well as merchandise and gift certificates.
Navigation
Re imagined as a fat menu, giving users plenty of room to browse to find the option they need
Search
Many participants reported the importance of a robust search function.
Further research is needed to find ideal filters.
Product Page
This product page was consolidated so that all versions of a release would be present on the same page.
CONCLUSION
Key takeaways and learnings
Amoebas current website has great bones, but is bogged down by an outdated maximalist style, overwhelming users with options.
Receiving direct feedback from users and ensuring they can correctly navigate your website is a rewarding experience. While it’s important to hear what they say, it is even more essential to understand what they do. Careful analysis and questioning can reveal essential insights into users mental models of your products experience.
A website’s information architecture is constantly evolving, and even with the changes I have made I cannot say this design will work in perpetuity. There is always more data to gather, evolving user expectations, and improvements to be made.
In the future, I will proctor user tests and tree tests of the current experience to better understand the most pressing issues. Doing this will allow myself to focus on the most pressing issues, and avoid "fixing parts of the website that are working as intended.
