Helping Artists Encounter Inspiration

Larrivée | Responsive Web Redesign for E-commerce

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 restructuring Larrivée's information architecture and navigation, adding a direct checkout process for all products, and overhauling the brand's visual design.

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.

Larrivée's current website tested for usability

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:


  • Restructuring Larrivée's information architecture and navigation

  • Adding a direct checkout process for all products

  • Overhauling the brand's visual design

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:


  • Restructuring Larrivée's information architecture and navigation

  • Adding a direct checkout process for all products

  • Overhauling the brand's visual design

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:


  • Restructuring Larrivée's information architecture and navigation

  • Adding a direct checkout process for all products

  • Overhauling the brand's visual design

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:


  • Restructuring Larrivée's information architecture and navigation

  • Adding a direct checkout process for all products

  • Overhauling the brand's visual design

Restructuring Information Architecture and Navigation

Information Architecture and Navigation: 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 to 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.

Information Architecture and Navigation: 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 to 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.

Information Architecture and Navigation: 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 to 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.

Information Architecture and Navigation: 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 to 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

Unintuitive model names consisting of a vague string of letters and numbers

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 because the designs are not unique to a specific company and 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. Having this information made it very uncomplicated when creating another, more user-friendly, category of secondary navigation.

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

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


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

Redesigned navigation for "Acoustic Guitars"

Information Architecture and Navigation: Pro Shop


Larrivée's "Pro Shop" is a category of the current website's primary navigation that houses all of the company's various 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 found it frustrating and time-consuming to scroll through crowded product listing pages, especially when the desired items were located towards the bottom. This led to a reevaluation of the "Pro Shop" information architecture, aiming to alleviate overcrowding and streamline the browsing experience.

Larrivée's current navigation and PLP for its "Pro Shop"

Open card sorts were conducted with three of the potential users to discover how shoppers expect to see products categorized. All three card sorts yielded similar results so only minor adjustments were made to the finalized information architecture. The names of categories were also tweaked after scanning competitors' websites in order to adhere to conventional copy used throughout the industry.

Instead of cramming all of these newly formed categories back into the "Pro Shop", I decided that it would serve users best if the grouping was completely replaced by a few more divisions within the primary and secondary levels of navigation. This would address the issue of clutter while also eliminating any ambiguity brought on by the name, "Pro Shop".


Within the new primary navigation, "Pro Shop" products were divided into "Guitar Parts & Accessories" and "Merchandise". All items directly related to guitar maintenance and playing were put into "Guitar Parts & Accessories". Clothing and miscellaneous goods were put into "Merchandise".

Following the information architecture restructure and navigation redesign, users are able to save a considerable amount of time when searching for any particular product on Larrivée's website. The newly added categories and filters dramatically reduce clutter on overpopulated product listing pages, minimizing user frustrations and facilitating a more straightforward shopping experience.

Redesigned navigation for "Guitar Parts & Accessories"

Implementing Direct Checkout

While users are able to browse Larrivée's vast catalogue of acoustic guitars on their current website, there is no direct checkout option to purchase a guitar and have it delivered to the user's home. Instead, Larrivée directs its shoppers to other dealers that carry Larrivée instruments, forcing users to navigate multiple different websites to find a separate dealer that does ship the brand's products or locate a physical dealer nearby where they can buy a guitar in person.


To reduce the hassle and friction caused by Larrivée's current business model, a direct checkout process was added.

Rather than creating a brand new checkout page, I decided to implement Shopify's checkout process for Larrivée's redesign. With Shopify continuing to grow as one of the world's most popular e-commerce platforms, this decision would appeal to a wider audience that is already familiar with the system.

Overhauling Visual Design

One major concern brought up during user interviews and usability tests was the lack of trust that users had in Larrivée's current website. Users expressed that they would feel reluctant to make any purchases from Larrivée due to the outdated appearance and feel of the brand's site.


At first glance, it was fairly apparent that the current website did not follow conventional visual design principles. After a closer look, I was able to identify some of the issues contributing to its lack of appeal:


  • Misuse of typographic hierarchy

  • Overuse of brand color

  • Absence of negative space

  • Inconsistent proximity patterns


By addressing these problems within the visual redesign, I was able to establish a level of hierarchy, breathability, and consistency that is missing in the current website.


Below are a few of the final desktop pages and their responsive mobile pages demonstrating the visual design changes.

Desktop

Mobile

Final Thoughts

Through this project, I realized that thoughtful design is not merely a series of aesthetic choices, but a powerful tool that can drive business success across all industries. By enhancing the user experience and guiding consumers towards their objectives, businesses not only increase engagement and sales conversions, but also build up a unique brand identity that aligns with their particular values.

View Figma File

View Prototype