Helping Artists Encounter Inspiration

Larrivée | Responsive E-commerce Website Redesign

Overview

Larrivée is a boutique guitar builder based in Oxnard, California. The brand's goal is to provide affordable luxury instruments for its players.


This e-commerce redesign for both desktop and mobile platforms involves reorganizing Larrivée's information architecture and navigation, adding a direct checkout process for all products, and overhauling the brand's design guide.

Team

Yoon Han

Timeline

November 2023 | 2-Week Sprint

Tools

Figma, FigJam, Whimsical

View Figma File

View Prototype

Design Guide

Understanding Users

I began this project by interviewing six potential users of Larrivée's website. These users had varying degrees of experience purchasing musical instruments, equipment, and accessories through online resources. Following their interviews, all six users were asked to navigate Larrivée's current website for usability testing.

Key Insights and Trends Derived from User Interviews and Usability Testing


  • Larrivée's current system of organizing their main product line of acoustic guitars is unintuitive and daunting for users to navigate.

  • The website's "Pro Shop" houses all 109 of its available accessories, parts, and merchandise on the same product listing page with minimal filtering options for users to narrow down their search.

  • Although products offered from the "Pro Shop" are directly available from Larrivee's website, the company's guitars can only be purchased through third-party dealers, forcing users to either redirect themselves to other storefronts or search for nearby dealers to shop for guitars in person.

  • The outdated design and layout of Larrivée's website instill a lack of confidence in users, causing a hesitation to place orders, even for inexpensive products.

To address these critical observations noted from user research, I decided that this redesign project would focus on three major changes:


  • Reorganizing Larrivée's information architecture and navigation

  • Adding a direct checkout process for all products

  • Overhauling the brand's design guide

Reorganizing Information Architecture and Navigation

Information Architecture: Acoustic Guitars


With acoustic guitars being the core product as well as the central identity of Larrivée's branding, I wanted to make sure that potential customers would run into the least amount of confusion when looking into the company's offerings. According to user interviews, shoppers naturally increase effort into researching purchases as they become more willing to spend greater amounts of money. Providing easy access to all of the necessary information that users want to see before committing thousands of dollars on a new instrument became a high-priority focus for this redesign.



Users expressed that browsing Larrivée's acoustic guitar product listing page felt overwhelming because there were over a hundred options covering a wide range of price points without clear differentiation between models. This was especially true for users who had less experience shopping for guitars due to the website's use of industry jargon. Even for the knowledgeable shopper, navigating through these products became tedious as they had to familiarize themselves with Larrivée's unique product organization system.

Product navigation organized by series specific to Larrivée's catalog

Products represented by unintuitive model names consisting of a string of letters and numbers, followed by the series they fall under

After researching the guitar market, I noticed that Larrivée organizes its guitars solely by series, unlike its competitors who offer multiple categories to help shoppers refine their search. These competitors employ various classifications, including physical descriptions like "Model", "Shape", and "Size" to aid users in navigating through their extensive selections. This approach is particularly effective because most guitars today are variations of a handful of designs that became popular decades ago. Organizing guitars by these templates makes it easier for users to navigate catalogs, even if they are not familiar with a particular brand because the designs are not unique to a specific company but rather used commonly throughout the industry.

Fortunately, Larrivée provides a graphic at the end of their 2019 catalog of the twelve body styles used in their builds along with corresponding model names. Having this information made it very straightforward when creating a second, more user-friendly, category of navigation.

To the left is a section of the redesign's sitemap displaying acoustic guitars sorted by series (as structured on Larrivée's current website) and style (a newly added secondary category).

Navigation: Acoustic Guitars


After adding another second category of navigation for acoustic guitars, all users, whether or not they are familiar with Larrivée's products, can confidently browse the company's catalog.


The modern and simple visual redesign contributes to a more efficient navigation experience by applying familiar conventions and eliminating information overload.

Information Architecture: Pro Shop


Larrivée's "Pro Shop" is one of the current website's primary categories of navigation that houses all of the company's miscellaneous products apart from guitars. At the time of the redesign, there were 109 different accessories, parts, and merchandise all populating the same page with only six categories of secondary navigation and no tertiary level of navigation available for users to efficiently browse products.


Users expressed frustrations with how much time and concentration it took to scroll through the countless items when asked to locate products that happened to be towards the bottom of a page. It was abundantly clear that certain product listing pages were unnecessarily overcrowded and changes needed to be made to the information architecture of the "Pro Shop".