Amoeba Music - IA + UI Redesign

Background

Amoeba Music is an independent music retailer with stores in Berkeley, San Francisco, and Los Angeles, CA. They are iconic in the music scene for offering a wide assortment of products, from vintage and new music, movies, to everything in-between.

The purpose of this concept project was to enhance the information architecture of their website to support two primary business objectives: increasing online sales and driving more in-store visits.

By understanding the needs of two key user groups—first-time visitors seeking clear access to location- and item-specific information, and loyal customers looking for interactive, brand-aligned experiences—the redesign aimed to create a simple and intuitive user interface.

Problem: How might we make it easier for users to find and purchase items online while encouraging them to visit Amoeba’s physical locations?

Goal: Design a simple and intuitive user interface reflecting Amoeba’s distinctive brand reputation as a community-driven music retailer.

Content Audit

I began Amoeba’s information architecture redesign by conducting a thorough content audit of the website. Suffice to say, there was a ton of content to sift through, but luckily for me my skilled Spreadsheet Assistant shouldered most of the burden (many thanks, Google Sheets). By categorizing and analyzing the existing content, I was able to visualize how the site's pages were distributed across sections.

Results:

Close to half of the pages were dedicated to the Music category, followed by Albums and Artists. This indicated the site's strong focus on music product offerings. Smaller sections like Policies, Movies, and General information reflected areas that needed clarification in the upcoming phases of the project. Some categories, like gift cards and cart pages, initially appeared ambiguous in where to place them. Ultimately, I hoped to gain a better sense of how real users would categorize Amoeba’s content through a Card Sorting activity.

Card Sorting

This open card sorting activity was an essential step in refining Amoeba Music's website structure. The activity involved 10 participants who all had online shopping experience. Participants were tasked with sorting 38 cards representing the website’s content into categories that made sense to them.

While most of my participants were calmly grouping the site’s content together, I had one who clearly has a disdain for record labels - “@#$%& record labels!” he said as he read the card. I’m not sure which label he has beef with but maybe take it up with them, man?

Results:

After taking a look at the response data, there were clear patterns that emerged. For example, participants strongly agreed on a General Info category, which included items like About Us, Contact Us, FAQs, and Store Locations. Additionally, participants grouped content like Buy, Cart, Gift Certificates, and Shipping into a Shopping category. Lastly, about half the participants created a Merchandise category for posters, stickers, and T-shirts.

That said, not everything was as straightforward as it seemed. Content like In-Store Signings and Trending Albums were particularly challenging to categorize, revealing areas where further research was needed. Most surprisingly, almost all users grouped CDs and Vinyl together, yet there was disagreement on what to call that category.

The Initial Sitemap

Based off of the card sorting responses, I normalized the categories of content on Amoeba’s website and reflected these changes when building the initial sitemap. Most users included a General Info category, which I named Store Info. Additionally, users had a Shopping category with content such as Buy, Sell, and Shipping to name a few. This helped guide how I laid out shopping content on the sitemap.

I labeled the Amoeba Spotlight and Sounds & Stories pages to give loyal customers a place find more niche and specific content or information. The Store Info page gives new users the ability to learn more about Amoeba as a company (location, contact info, policies, etc.). Despite this initial iteration, I needed to test the sitemap with users through a Tree Test to determine the efficacy and clarity of the proposed site structure.

Tree Test

The tree test involved eight total participants, with 50% of them having previously shopped in-store at an Amoeba location (this was exciting to hear because so far no other participants had been familiar with the shopping experience at Amoeba).

Participants were tasked with navigating a simplified, text-only version of Amoeba’s website to find specific information related to purchasing music, selling old records, or finding information about in-store events. The goal of this tree test was to determine if the site structure makes sense so users can locate information intuitively.

Results:

The results of this test were extremely informative and provided some surprising insights for the current structure. For instance, users had trouble finding info related to selling albums to Amoeba, with 5 of 8 users looking in either Music or Merchandise first. This suggested to me that their mental model for selling products is related to buying products.

There were multiple insights like the one mentioned above which informed me that the current site structure needed adjustments in both content labeling (i.e., Sounds & Stories) and content hierarchy (i.e., Selling, Amoeba Exclusives, Albums/Artists).

Revised Sitemap

I made some major changes to the sitemap and proposed this final structure. A notable change was moving Albums a page lower within the hierarchy as users overwhelmingly looked for this content within the Artists page. Additionally, I consolidated content from Sounds & Stories (and removed this page altogether) to be included in Amoeba Spotlight page to serve as the curated content section on Amoeba’s website. Lastly, I moved Selling, and relabeled it Sell & Trade, from the Store Info page and added this page under both Music and Movies given users are expecting this information to be in close proximity to sections related to buying items. At this stage it was time to move into creating wireframes of Amoeba’s website based on this sitemap.

Navigation and Wayfinding Wireframes

After working with our users to determine the best way to organize Amoeba.com’s content, it was time to redesign the website’s navigation and wayfinding structures, as well as the search/filtering system. I approached this aspect of the project from a mobile-first perspective given the pervasiveness of cell phones in our lives—this guided the initial navigation design process.

Following responsive design principles, the primary navigation is hidden in a hamburger menu and would appear as an overlay once the user taps on this icon. The user would then have the flexibility to navigate to different pages of the site through this menu. The utility navigation sits on the right-hand side of the screen with options for the user to view their account profile or view items in their cart.

Additionally, there is a search bar below the primary and secondary navigation allowing users to immediately search for a product, event, or piece of Amoeba content as soon as they open the website.

On the homepage there are multiple wayfinding cues to help orient users on the site. For example, there is an established button hierarchy of large primary buttons (Amoeba Vinyl Club section), medium secondary buttons (used in the newsletter sign-up field), and text-links as tertiary buttons. When users scroll down to the bottom of the page there is a footer navigation for business-related information and access to quick links, as well as Amoeba’s social media shown via their respective icons.

As users move throughout the site, or if they were to access the site sideways, there are further wayfinding cues such as breadcrumbs displaying the user’s current location on the site. Pages will also include titles and imagery/captions to give further contextual cues of a user’s location. Lastly, pages such as product pages, search results, or events will include pagination to allow users to clearly see the number of pages of content.

When users search for a specific item, the number of results are displayed at the top of the page below the search query. Users are offered the ability to filter and sort these items. If a user taps on the filter button an overlay menu appears giving them multiple options to further refine their query. Given that there would be a large number of facets to go through, there would be a search bar within each filter and a scroll bar optimizing speed and search flexibility. Users are then able to select one or multiple facets at a time with a check box, and specifically within the Release Year filter the facets would be represented as tags. Finally, if users tapped the sort button a modal would appear on screen and give them the option to sort via Release Date, Customer Reviews, and ascending or descending Price.

Conclusion

Working with Amoeba on this information architecture redesign was a rewarding and challenging process—I hope these improvements will be considered for implementation. I’m happy to discuss any aspect of this project so please feel free to reach out. Ultimately, I’d love to get user feedback on these wireframes so we can continue to improve the online Amoeba experience.