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