Garrett Leather Redesign
Who is Garrett Leather?
Garrett Leather specializes in providing leather for aircraft, automotive, yacht, commercial, and domestic markets to interior designers, upholsterers, and manufacturers.
Garrett Leather is still family-owned and operated to reinforce its strong dedication to providing personal attention and care to each of its clients.
Mission
Garrett Leather's first e-commerce site was old and pieced together from several different designers and developers working on it since its inception in 2005.
The challenge was to create an e-commerce site that would enable interior designers, upholsterers, and manufacturers to use garrettleather.com as their primary source for ordering leather, instead of the traditional way of filling out PDFs and emailing them to their Customer Service Representatives.
Role
Lead Product Designer
Team
Project Manager, Business Analyst, 2 designers, lead developer, 2 onshore developers, and 3 offshore developers
Assignments
Affinity Board/Diagram, Severity Framework, Personas, Sitemap, Customer Journey Map, Low and High Fidelity Wireframes, and a Style Guide
Timeframe
2023-2024
Gathering Insights
Affinity Diagram
My team and I conducted interviews with our primary users—interior designers and wholesale leather buyers—to identify any pain points they were experiencing with the Garrett Leather eCommerce website.
Our research focused on:
- Understanding user goals and needs
- Identifying pain points with the current site
- Gathering suggestions for potential improvements to the new site
After collecting feedback from our users, we created an affinity board to pinpoint UI/UX issues. We organized these problems into common themes.
Severity Framework
After collecting and organizing all pain points and potential UI/UX changes, my team and I could break down these issues by their severity and frequency. This approach helps the team maintain organization with issues and solutions.
Total Severity Score
I took further steps by organizing the issues into broader categories and assigning each one a Total Severity Score based on the total UX effort and the frequency with which the team will encounter these issues.
This allows the design team to identify issues requiring the most effort and aids the project manager in assigning time estimates.
Getting to know our primary users
Personas
I created personas after our user interviews to remind the team who we are redesigning this eCommerce website for. We need constant reminders of their needs, experiences, behaviors, and goals.
Narrowing down the scope of design work
Sitemap
We collaborated with our Garrett Leather team to create a sitemap that improves the site's structure and enhances navigation. I always prefer to develop sitemaps before starting any design work. This helps the entire team understand the project's content scope more effectively.
Low Fidelity Wireframes
Looking at the Product Listing Page (PLP) and Product Display Page (PDP).
One vital section of the website that encountered various issues, ranging from aesthetics to images not loading, was the Product Listing Page (PLP). We focused on enhancing the visibility of the left-side filters by utilizing accordions to clearly indicate their expansion. These filters include key attributes for ordering leather, such as color, leather type, collection, performance, and a search bar for more precise listings.
Additionally, we addressed another challenge: streamlining the process for users to quickly and efficiently order samples of any type of leather. The names of the leather types are now easier to read on our new PLP page because we removed them from the photos of the leather images.
When a user selects a leather product, they will encounter a much clearer Product Detail Page (PDP) that allows for easy selection of new leather colors, with a corresponding clear picture displayed to the left. Inventory, discounts, properties, and test performances for each product are also listed in accordions to save vertical space. Lastly, similar to the PLP page, the PDP provides a quick option to add samples to the cart.
Product Listing Page
Product Listing Page w/selections
Product Display Page
Style Guide
After developing low-fidelity wireframes, our design team created a comprehensive style guide to ensure consistency for all designers and to assist frontend developers in their future work. We opted for a classic black and white aesthetic, complemented by subtle leather tones.
High Fidelity Wireframes
Looking at the Product Listing Page (PLP), Product Display Page (PDP), and Home page.
In the high-fidelity wireframes of the PLP (Product Listing Page), we aimed to draw attention to the color palette featured in the left-side filters. This was a major priority for our clients, and we believe it helps users quickly scan for colors, making it easier for them to find the leather options they are looking for.
If you take a closer look, you'll notice that the "order sample" buttons, which were present in the low-fidelity wireframes of the PLP page, are no longer visible. We determined that these buttons created too much visual noise while users were scanning through leather swatches. Instead, the button will appear when a user hovers over a leather swatch, allowing them to easily add that leather sample to their quick cart.
The PDP (Product Detail Page) showcases our focus on providing large, bold, and beautiful images of Garrett Leather's products. The gallery features photos that highlight the color, texture, and videos of each family of leather.
On the home page, we have maintained a consistent look and feel throughout the entire site to create a strong sense of unity across Garrett Leather's online presence.
PLP w/selections
PDP of Leather
Home - Garrett Leather
Mobile Design
Looking at the home page, PLP, and About pages in mobile view
An important aspect of Garrett Leather's redesign was enhancing the mobile view. In the old version of the site, ordering was nearly impossible, and the visuals were not appealing. Our goal was not only to address these issues but also to create a shopping experience that users would remember and want to revisit repeatedly.
The Product Listing Pages (PLP) and Product Detail Pages (PDP) incorporate the same strong elements as the desktop version, featuring bold images, beautiful colors, and a user-friendly shopping experience.
Home page
PLP w/selections
