American Leather User Experience Design
American Leather User Experience Design

American Leather User Experience Design

Published June 2, 2020 in Feature Story
Mr Beams Magento 1 to BigCommerce Migration
May 21, 2020
Mr Beams SEO Case Study
July 20, 2020
“American Leather's partnership with Classy Llama far surpassed expectations. Their team has become an extension of our own not only in development, but also in finding solutions that save time and money. Classy Llama has shown the utmost patience and professionalism while keeping our budget in mind. Classy Llama took our website from the very fragile state left by our previous development team, and gave us a robust, smooth running machine with room to grow.”

Marjorie Gala

Sr. Digital Marketing Specialist, American Leather

American Leather is a custom furniture manufacturer based out of Dallas, Texas offering a wide variety of styles and coverings. They started with the goal of helping dealers deliver custom furniture to their customers faster. American Leather brings custom furniture from concept to completion within 30 days. They don’t have any brick and mortar stores, but they partner with furniture retailers who offer their furniture. 

Americanleather.com is the main catalog source used by retail partners to show buyers custom options in real-time and create the perfect piece of furniture. American Leather wanted to improve the experience for their resellers and also their consumers shopping at home and looking for the closest retailer.

American Leather came to Classy Llama looking for a partner that could understand their big picture goals and objectives and offer creative solutions that brought real value. 

The two areas American Leather wanted to focus on first were their Product Detail and Product Listing pages.

The team at American Leather was also hungry to manage more site features on their own. A key objective was empowerment to take their ideas and run with them without extra development. 
Product Detail Page

American Leather uses their product detail pages to show unique furniture styles that can be customized by the dealer. Their existing product detail page had a small amount of content: a description, product images, and configurable options like material, color, and leg style. 

They wanted a design that allowed their team to add additional content when needed and showed the flexibility of their products without overwhelming the buyer.

Our solution was to use product detail pages as landing pages for each style of furniture. We wanted to help shoppers see each style as a starting point to their perfect custom piece, rather than emphasizing a single final product.

We started by designing a custom header that included the style name and buttons that anchored to specific content within the page. We also created a carousel gallery to display pieces of furniture in that specific style. These images of previously built custom furniture in beautifully designed spaces help customers imagine the possibilities of each given style.

We also created a new page section to display customization details and specs for the furniture style.

Example: https://www.americanleather.com/london/

Custom Swatch Product Listing Page:
American Leather has nearly 600 leather and fabric options to choose from. These options range from texture and type of leather or fabric, to what seems like every color imaginable.

Previously, American Leather had a form that allowed customers to request a swatch sample by mail, but the only way for customers to see all the swatch options was by viewing individual product detail pages and seeing what was available.

American Leather requested a dedicated landing page to quickly allow visitors to see their over 500 fabric and leather options. They also wanted to incorporate a user experience that gave the shopper the control to easily filter down their extensive collection to find the specific cover that suits their needs. 
For our solution, all of the swatch options were created as products in BigCommerce, and then we used custom fields to create specific information and fields to filter by. We needed all swatches to be created separately instead of using variations, because of the way American Leather wanted them displayed on the page.

There were two main custom pieces to this:
  1. Custom fields and filtering functionality added to the faceted search that BigCommerce provides.
  2. The site displays a summary of key information in a dropdown when a swatch is selected. To do this, we needed to create a relationship between all swatches of the same type so all available colors for a swatch type would be displayed. 
The Result:
Classy Llama was able to quickly build the relationship American Leather wanted from an agency and jump into creating the vision they had. Classy Llama helped to build a foundation to empower American Leather to manage their site internally as much as possible.
Product Detail Page:
We were able to create a new design which really captured the idea of a specific style of furniture, while displaying the key information that viewers needed to see. The content is more wholistic and easily accessible.  
Swatch Product Listing Page:
Now American Leather can provide specific pages for both leather and fabric to their customers. This allows viewers to easily see all the different types of coverings and colors that American Leather provides, which not only makes it more convenient to find and request swatch samples, but also helps to increase sales by quickly catering to the needs and wants of their buyers.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.