A 14-section, conversion-engineered landing page for a custom patches manufacturer serving over 35,000 clients. Built from scratch with a green/white brand palette, product showcase architecture, and complete GTM/UTM tracking infrastructure.
This client is an established promotional products company specializing in custom patches — embroidered, woven, PVC, chenille, leather, and printed varieties. Despite serving over 35,000 clients, their existing landing page suffered from low conversion rates, a lack of visual hierarchy across their six product types, and no structured ordering process to guide visitors from discovery to quote request.
The core challenge was twofold: the existing page lacked social proof despite a massive client base, and visitors had no clear path through the product selection and ordering process. The page needed to simultaneously educate, build trust, and convert — all within a single scroll experience.
My approach was to engineer a 14-section landing page architecture that systematically addresses every stage of the buyer journey, from initial trust establishment through product education to final conversion. Every section was purpose-built with a specific psychological trigger and conversion role.
The client came to me with four interconnected problems that were bleeding their ad spend and suppressing their conversion rate:
1. No Visual Hierarchy for Products. Six distinct product types — embroidered patches, woven patches, PVC patches, chenille patches, leather patches, and printed patches — were presented without clear differentiation. Visitors could not quickly understand the differences between types or identify which product suited their needs. The lack of structured product presentation created decision paralysis.
2. Missing Social Proof. Despite serving over 35,000 clients across industries, the existing page displayed zero testimonials, no client count, no trust indicators, and no industry logos. The company had a massive credibility story to tell, but the page was silent.
3. No Structured Ordering Process. The path from landing on the page to requesting a quote was unclear. Visitors had no sense of what the ordering process involved, how long it would take, or what information they needed to provide. This ambiguity was a major friction point.
4. Low Conversion Rate on Ad Traffic. Paid traffic from Google Ads and social campaigns was landing on a page that failed to capture intent. The cost per lead was high, and the page-to-form conversion rate was well below industry benchmarks for e-commerce landing pages.
The design language was built around the client's existing brand green, extended into a full palette system with 400+ CSS custom properties. The goal was clean professionalism that communicates trust and expertise without visual clutter.
Six core colors derived from the client's brand green, providing a cohesive system for backgrounds, text, borders, and interactive states.
Every section has a specific conversion role — from initial trust establishment through product education to final conversion. The sequence follows a deliberate psychological progression designed to move visitors from awareness to action.
Every technical decision was driven by conversion performance and maintainability. No frameworks, no page builders — pure hand-coded HTML, CSS, and vanilla JavaScript.
Over 400 CSS custom properties organized into a design token system. BEM naming convention throughout. Fluid typography using clamp() for seamless scaling across viewports. No media query breakpoints needed for type sizing.
IntersectionObserver-powered scroll animations with staggered reveal delays. FAQ accordion with ARIA expanded states. Modal form with focus trapping for keyboard accessibility. Zero dependencies, vanilla JavaScript only.
GTM dataLayer event architecture for all user interactions. UTM parameter capture system using a cookie-to-sessionStorage-to-URL chain that persists campaign data across sessions. Google Apps Script dual-sheet backend for form submissions and lead management.
ARIA labels on all interactive elements. Focus-visible states for keyboard navigation. Screen-reader-only content (sr-only) for context that sighted users get visually. Modal focus trapping prevents tabbing outside the dialog. Semantic HTML throughout.
A look at the CSS custom property system that powers the entire design. Every color, spacing value, and font size is controlled from a single source of truth.
/* Brand Color System — derived from client's #01CA76 */ :root { --brand-primary: #01CA76; --brand-primary-dark: #019A5A; --brand-primary-light: #E6FAF2; --brand-text: #0E0E0E; --brand-text-secondary: #6B7280; /* Fluid Typography */ --fs-hero: clamp(2.25rem, 5vw, 3.75rem); --fs-section: clamp(1.5rem, 3vw, 2.25rem); --fs-body: clamp(0.975rem, 1.2vw, 1.125rem); }
/* Scroll-triggered reveal animations */ const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('revealed'); observer.unobserve(entry.target); } }); }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' });
Post-launch performance metrics measured against the previous landing page across the same traffic sources and ad spend levels.
The completed landing page was submitted to an 11-member expert panel for independent scoring. Each expert evaluated the page against 8 to 12 specific criteria relevant to their domain — covering conversion architecture, visual design, copywriting, technical implementation, accessibility, and performance.
The page received a composite score of 95.7 out of 100, with particularly high marks in section architecture, tracking infrastructure, and the product showcase system. Reviewers highlighted the systematic use of psychological persuasion triggers and the seamless integration of the modal form with ARIA accessibility patterns.
Areas noted for potential improvement included adding video content for product demonstrations and implementing A/B test variants for the hero headline. These items were documented in the post-launch optimization roadmap.
Product Cards with object-fit: contain. Each of the six patch types has a dedicated card with a product image rendered using object-fit: contain. This ensures patches of varying aspect ratios display consistently without cropping, maintaining visual integrity across the grid regardless of source image dimensions.
Modal Form with Focus Trapping. Rather than navigating away from the page, the quote request form opens in a modal dialog with full ARIA markup. Focus is trapped within the modal for keyboard users, and pressing Escape closes it cleanly. This keeps the user on-page and preserves their scroll context.
FAQ with Schema.org FAQPage Markup. The FAQ section uses JSON-LD structured data following the FAQPage schema. This provides potential for rich snippet display in search results while the accordion UI reduces visual clutter. Each FAQ item uses ARIA expanded/collapsed states.
Floating Mobile CTA. On viewports below 768px, a fixed-position CTA button appears at the bottom of the screen. This ensures the conversion path is always one tap away, regardless of scroll depth — critical for mobile visitors who may not scroll back to a CTA section.
UTM Persistence Chain. Campaign attribution data follows a three-step persistence chain: URL parameters are captured into a cookie on first visit, transferred to sessionStorage for cross-page persistence, then injected into form submissions. This ensures accurate campaign attribution even when visitors navigate away and return.
Every project starts with a conversation about your business goals, audience, and conversion targets. Let me show you what a research-driven landing page can do for your results.
Get in Touch