Music & Arts IA Redesign

Music & Arts homepage with mega menu open


Date Fall 2018
Role Individual project
Skills Information architecture, interaction design, prototyping
Tools Optimal Sort, UXPin

As a course project, I assessed and redesigned the information architecture of the music supply sales site, Music & Arts, including a new interaction pattern for mobile navigation and updated homepage design.

1. Understanding the Context

An education-focused music supply site, Music & Arts aims to be “a one-stop-shop for students, parents, and educators alike,” with a large selection of product offerings including instruments and accessories, as well as rental, lesson, and repair programs. 

User Groups

Core Tasks


  • Novice- to intermediate-level musicians


  • Music educators
  • Parents of student musicians
  • Professional musicians
  • Select and purchase or rent an instrument
  • Select and purchase music/instrument accessories
  • Sign up for music lessons
  • Get an instrument repaired

Looking at the site contents, the stated mission, and their blog posts, it is clear that Music & Arts is geared towards beginning musicians of all ages. K-12+ student musicians, their parents, and school music education departments are of particular interest, and are served by rental programs, informational content, and an educator’s membership program. Although not a clear target audience, general shoppers for music gear are well-served by the extensive product catalog, which includes professional-grade equipment and detailed filtering, as well as their repair services.

2. Mapping the Current State

I constructed a comprehensive inventory of the current information architecture by looking at the navigation menus, site map, breadcrumbs, filters, and content pages.

Overview of the current site map. To see the tertiary & quandary levels under SHOP, view the complete Excel document.

Major Issues

  • Product category levels are inconsistently implemented, e.g. woodwind & brass accessories are secondary, but orchestra and other accessory categories are tertiary
  • Category labels include inconsistencies in application, ordering, and clarity
  • “General Accessories” is a catchall of unrelated sub-categories
  • Valuable content like buying guides, student resources, and information about services is difficult to locate or not included in the navigation
  • Footer categories are poorly differentiated
  • Navigation is not optimized on mobile, significantly degrading the user experience

3. Future State Proposal

Revised site map overview. View the complete future state site map here.

Redesign Goals

  1. Restructure Shop subcategories to improve ease of finding products, especially for users with limited domain knowledge
  2. Improve mobile navigation interactions with the aim of creating parity in experience and capabilities across devices
  3. Reorganize and create sub-categories for Lessons, Repairs, Rentals, and Educator content to increase content accessibility and discoverability
  4. Create an appropriate balance and cohesion among the four major programs: product sales, lessons, repairs, and rentals

Category Organization

In the revised site map, sub-pages are added for each of the services to reorganize and increase access to existing content by chunking overly long pages and promoting related buried or orphaned pages. Under SHOP, the number of top-level product categories is reduced from 16 to 12 and changes to labeling and order are intended to provide a stronger information scent to shoppers. Subcategories are reorganized and combined or deleted & redistributed where appropriate, in order to implement consistent hierarchy and general organizing principles. Some labels are revised for clarity and consistency. All duplications have been evaluated and retained only where essential, most significantly within Classroom & Kids, a special designation assumed to have significant business importance.

Site Design

In addition to changes to the navigation to reflect the revised IA, an update of the homepage has been proposed to clarify the site scope and provide a better overview of the available content and services. Highlights include:

  • Retention of promotional content and “Best Sellers” section to highlight products for sale
  • Inclusion of a “Services” section for promotion and quick access
  • Surfacing of valuable educational content and buying guides from the blog


Current state mobile navigation – tertiary & quandary category levels are implemented as filters

While the hover interaction of the mega menu on desktop allows user to quickly investigate multiple paths and explore the large product assortment, the current navigation pattern on mobile significantly increases interaction costs and delays feedback. Currently, tertiary and quandary category levels are collapsed under a Filter button on the product thumbnail page. If users even discover additional categories there, it is necessary to repeat this process on multiple pages to reach the level of specificity that is likely to be most helpful to shoppers.

Proposed mobile navigation interaction

In the updated mobile navigation, tertiary and quandary levels are made accessible via the menu. An accordion interaction is used at the top level to promote exploration and discovery of the full scope of products and services. This accordion pattern is repeated at the 3rd & 4th level selections to make search more efficient and allow for browsing. Access to higher-level categories is provided at each step for uses with less-defined needs or product knowledge.

Sample Task & User Journey

Scenario: A parent is needs to purchase a replacement string set for his sixth-grade daughter’s violin. He’s not familiar with string instruments, but the note from her music teacher suggested medium tension synthetic strings like D’Addario Pro-Arte or Thomastik Alphayue. They had rented her instrument from Music & Arts at the beginning of the school year, so he returns to their website to begin his search.  

Task: Find and select suitable replacement strings for a student violin.

  • Current mobile user flow