Leather Better
from UGC to UX: a Redesign Rooted in Results
Client Overview
Leather Better is a proudly Canadian brand built around one powerful, all-natural product that revives leather, vinyl, wood, and more. From restoring tired couches to polishing saddles, motorcycle gear, boots, and antiques, its results speak for themselves. From thousands of glowing reviews came an abundance of UGC* (before-and-after photos) from real customers across the globe.
Founded by Daniel Fagan after a chance gig at an Australian trade show turned into a passion, Leather Better was born in a Toronto kitchen with a simple mission: make a better conditioner. One that’s non-toxic, colour-neutral, smells good, and actually works. A decade and hundreds of trade shows later, Daniel and his team still sell it face-to-face, but now, the magic of Leather Better is available online too.
And while the product delivered instant gratification in person, the website needed to do the same by earning trust at a glance and guiding users through a sea of use cases with the same confidence as a trade show demo. That’s where we came in.
Project Scope
Leather Better’s original site, built on the now-retired Debut theme, couldn’t keep up with the evolving needs of a product that thrives on customer proof and in-person demos. We migrated the store to Shopify’s modern Honey theme (Online Store 2.0) and reimagined the entire digital experience from the ground up.
The goal? Make a single-product store feel just as powerful, trusted, and versatile online as it does at a trade show booth. That meant modernizing the design and structure while turning real customer results into a guided selling engine. We simplified the navigation, built use-case-specific landing pages, and surfaced before-and-after UGC throughout the journey to build trust and drive conversions.
To make product discovery even more intuitive, we added a custom quiz that walks users through items they have at home (furniture, boots, tack, auto interiors, and more) and recommends the ideal Leather Better bundle based on their needs. It’s not only a smarter way to guide shoppers, but a strategic tool for future marketing segmentation and personalization.
“Working with the Ask Kenna team completely transformed my website.”
~Daniel Fagan ✨
Before the Migration
- Navigation was overloaded: 3 main menus, 6 use-case collections, and multiple app-driven galleries and pages created friction and bloat.
- Header conflict: dual currency apps and poor scaling caused visual bugs with cart icons and menu overlap.
- Homepage relied on outdated elements: floating review tabs, emoji-heavy product names, and clashing red branding.
- FAQ and content pages: long-scroll text lists buried critical info, hurting mobile usability and SEO.
- Limited use of visuals: before-and-after proof was there, but siloed in galleries or hidden in app widgets.
Trade Show Charm to Online Confidence
Before the migration, Leather Better’s site was built on Shopify’s Debut theme which relied heavily on outdated layouts, third-party apps, and dense navigation. It was functional, but not flexible, and certainly not reflective of the product’s real-world impact.
The navigation featured three main menus and six use-case dropdowns, each with app-powered galleries and info pages. This created unnecessary complexity, especially on mobile. The header was also cluttered with overlapping icons from dual currency tools and an announcement bar app. Product names included emojis and full sentences, and the theme's colour palette leaned red, clashing with the earthy, professional tones of the brand.
Content pages and FAQs were long scrolls of unstructured text, while powerful before-and-after visuals were buried deep within apps or tucked away in galleries far from the main selling journey.
So we rethought everything.
We migrated the site to Shopify OS2.0 (with the theme Honey by Archer Commerce) and used Sections Everywhere* to rebuild the store like a visual guidebook - elevating trust, clarity, and conversion with every scroll.
- Navigation Overhaul
A simplified main menu now guides users through the journey: Buy Now, About, How Much Do I Need? (direct link to the quiz), and Results. We consolidated scattered content and removed app dependency for performance and control. - Homepage Redesign
Instead of a static hero image, users are welcomed with real video demos, UGC galleries, and interactive before-and-afters; all strategically linked to use-case-specific landing pages. - Use-Case Quiz Integration
A new interactive quiz helps customers identify the types of products they want to restore, then recommends the ideal Leather Better package. It supports both product discovery and future marketing personalization. - Product Page Enhancements
We implemented “sibling” products to showcase all sizes/packages on one product page, added metafield-based educational content, and introduced a sticky ATC* button for frictionless mobile conversion. - Content Page Strategy
Pages like About, FAQ, and Contact were restructured with rich visuals, anchored sections, and app-embedded reviews providing a more engaging and accessible experience. - Gallery & Results Pages
Six category-driven gallery pages showcase Leather Better’s transformative power, using customer-submitted photos, videos, and testimonials. Each one is tailored to a specific use case, like Furniture & Antiques or Saddlery & Tack.
Navigation Overhaul
Reduced from 3 dropdown menus to 1 streamlined path: Buy Now, About, Quiz, and Results.
- Buy Now now leads to a unified product page powered by sibling products, allowing customers to view all available Leather Better package sizes in one place. (You’ll find more detail in the Product Page Enhancements section.)
- About brings together all the trust-building essentials in one place. It includes a heartfelt Letter from the Founder, a reorganized and categorized FAQ section, and a refreshed Contact Us page with visual branding and a built-in form. Customers can also browse Reviews, access the Store Locator, or head to the Resellers page to apply as a retail partner - making it both informative and action-oriented.
- Quiz: How Much Do I Need? Educates shoppers on what the product can be used on, and how much they will need for the job.
- Results became the new proof hub with 6 UGC-driven gallery pages organized by real-life use cases.
- Removed third-party announcement bar and used Honey’s native one for simplicity and speed.
Before & After
Before and after screenshots of the navigation, and a video of the new mega menu on mobile.
Homepage Redesign
- Replaced the oversized hero image with embedded YouTube video content, with autoplay removed for accessibility.
- Introduced Before & After sections linking to specific galleries.
- Added media grids that work like a visual directory; each tile leads to a targeted gallery with rich UGC.
- Utilized metafields to add contextual content blocks around the featured product.
- Swapped the red palette for Leather Better’s signature warm brown tones, mirroring logo and product packaging.
The screenshot on the right is of the Homepage before. The following video showcases the new Homepage.
Quiz Integration
A new interactive quiz helps customers identify the types of products they want to restore, then recommends the ideal Leather Better package. It supports both product discovery and future marketing personalization.
To date - 18% of customers that took the quiz converted as buyers.
AOV is up 5%, but the AOV for those that complete the quiz is up 48%.
Product Page Enhancements
- Implemented sibling products to represent all 6 package sizes on one parent product page using clearly labeled icons.
- Blended trade show UGC with studio shots for a real-life feel.
- Introduced sticky Add-to-Cart button.
- Added metafields for Market based content, free shipping, and dynamic content in the Choose Your Size accordion.
- Integrated accordion content blocks: What it works on, Why you’ll love it, and How to use.
- Finished with Judge.me review widget + styled star ratings.
Cart Updated to a Drawer
The cart is where interest can stall or accelerate. No bottlenecks - we removed friction to keep momentum moving all the way to checkout.
Before & After
Drag the slider to see the before and after comparison
Content Page Strategy
- About: turned the founder story into a rich text section using “Sections Everywhere,” now enhanced with review carousels.
- FAQ: broke one long list into card-based categories with anchors and accordions - plus an infographic walkthrough.
- Contact: added a visual mascot, simple greeting, and embedded form with location, socials, and support links.
- Reviews: brought in Judge.me’s full-page embed + carousel with custom brand-colored stars.
The screenshot on the right is of the FAQ Page before. The following video showcases the new FAQ Page.
Galleries & Results Pages
We took a modular content strategy for Result Pages. Each results page followed a consistent modular content framework designed to educate, inspire, and convert:
- Hero media: engaging video or photo to anchor the page
- Collage-style before & afters: paired with real customer reviews for authenticity
- UGC media grid: curated directly from customer reviews from Judge.me
- Product recommendations: tailored to the restoration use case
Please see video for revamped versions.
"Working with the Ask Kenna team, completely transformed my website.What started as a basic setup quickly became a polished, professional-looking site that truly reflects my brand. They took the time to understand my vision and brought it to life with impressive efficiency and creativity.
Their natural eye for design and user experience significantly improved the look, feel, and flow of the site. Since launching the new version, my average order value and conversion rates have noticeably increased. I highly recommend Ask Kenna to anyone looking for a stunning, high-performing website."
~ Daniel Fagan (& Cowbee)
The Outcome
A Polished Digital Transformation.
The collaboration between Leather Better and Ask Kenna led to significant improvements across the board:
- The website redesign focused on intuitive navigation and a streamlined shopping experience, making it easier for customers to find and purchase products.
- Incorporating user-generated content, such as before-and-after photos and customer reviews, built trust and showcased the product's effectiveness, leading to higher engagement rates.
- The combination of improved UX and authentic content contributed to a notable increase in conversion rates, turning more visitors into loyal customers.
- The refreshed visual design and cohesive storytelling reinforced Leather Better's brand, emphasizing its commitment to quality and customer satisfaction.
This transformation not only elevated Leather Better's online presence but also laid a solid foundation for future growth and customer retention.
*Please see Sprout Home: Built to Bloom for a more details focus on Sections Everywhere.
Acronyms:
- UGC - User Generated Content
- UX - User Experience
- ATC - Add to Cart
Looking to update your store or migrate to Shopify?
Let’s talk. [Contact Ask Kenna →]