312 Truck & Body Repair Website

312 Truck Body Repair & Painting, a leading truck repair shop in Chicago, had no digital presence, which was limiting customer reach. To enhance 312 Truck's credibility, highlight their expertise, streamline lead capture, and drive business growth through online visibility, I built the client a bespoke SEO-optimized website.
Client
312 Truck
Industry
Manufacturing
Role
Lead Designer
Date
January 15, 2025

Introduction

312 Truck Body Repair & Painting is a trusted name in commercial truck, van, and fleet repair on Chicago’s South Side. Despite their strong reputation, they had no digital presence—a significant gap in an industry where customers increasingly search online for auto repair services, price estimates, and reviews before making a decision.

Their challenge was:

  • Increasing client base by making their services easily searchable and visible online.
  • Highlighting the impressive quality of the client's work with high-quality visuals and client testimonials.
  • Streamlining the inquiry and quote request process for optimal lead generation.

A Digital Showroom & Lead Generation System

Unlike businesses migrating from an outdated website, 312 Truck had no online footprint or credibility in online spaces. Beyond an inactive Google My Business listing and a Facebook page inherited from previous ownership, there was zero presence on platforms like Instagram, TikTok, and LinkedIn. This meant meant a few important things:

  • With limited UGC and social proof, users needed to be quickly reassured of the legitimacy and high standards of this business.
  • Anyone who lands on the 312 Truck website would be expecting a modern, well-structured website consistent with 312's competitors.
  • If a website feels incomplete, outdated, or otherwise poorly design, users will hesitate to call or request a quote.

Since no prior website analytics or user behavior data existed, I turned to competitor analysis, UX heuristics, and conversion best practices to craft an experience optimized for trust, clarity, and customer action.

My Solution

The solution was to create a high-impact, conversion-optimized website that:

  • Quickly establishes credibility through testimonials and past work.
  • Encourages easy contact & inquiries via intuitive contact options and a dynamic lead form.
  • Scales for future marketing efforts (SEO-friendly pages, HubSpot integration).

Key Functional Enhancements

  • A mobile-friendly, yet desktop-optimized UI tailored to a B2B audience.
  • Content optimized for visibility in competitive search queries.
  • Automated lead capture & CRM integration via HubSpot.
Check out the project Figma file
Established an Online Presence with Lead Generation & Automated Marketing for a Commercial Auto Services Provider

Discovery

Understanding the Market & User Needs

To ensure the website met customer expectations, I analyzed industry leaders, partners, and competitors to identify pain points for B2B clients of auto-related websites.

Key Insights
  • Customers expect transparency—unclear pricing or descriptions drives abandonment.
  • The desktop experience is most important. Being a B2B provider, the client's mobile traffic could be as low as 16% (average for B2B) to around 40% (commercial automotive).
  • Reputation matters more than aggressive marketing. Clients book services when they see real images of past work rather than stock photos or overly promotional language.
  • Users need immediate, actionable contact options—the fewer clicks to request service, the better.
  • Professional design influences client trust—clean layouts, high-quality imagery, and structured content contribute to credibility.

UX Strategy & Design Research

Brand Positioning & Hierarchy
  • Incorporated image gallery elements to highlight the quality of client's work.
  • Built a custom customer testimonial slider component for social proof and to drive credibility.
  • Made prominent contact options (phone, email, and form submission)  encourage easy inquiries.
  • Frictionless Lead Generation
  • Worked in close partnership with the client to build a comprehensive intake form to ensure all relevant information is received for quick, accurate service quotes (i.e. much less back-and-forth).
  • Set up HubSpot integration for email list-building and for managing client inquiries so they're automatically tracked and followed up on.
  • A blog section structured for long-term SEO growth and industry positioning.
  • Desktop-First Accessibility & SEO Optimization
  • Professional, responsive design catering primarily to desktop users, reflecting B2B user behavior.
  • SEO-optimized service pages help the business rank for local searches like "truck body repair in Chicago."
  • Wireframes & Prototyping

    Notes
    • Hero section includes a direct CTA ("Request a Quote") for immediate lead generation.
    • Clear service categories help users quickly find relevant options.
    • Step-by-step fields to reduce cognitive load.
    • Photo upload option allows customers to attach images of vehicle damage.
    • Ensured a thumb-friendly design with clickable elements for mobile users.
    • Navigation simplified for one-handed browsing.

    Wireframes

    312 Truck Body Repair
    312 Truck Body Repair
    312 Truck Body Repair
    312 Truck Body Repair
    312 Truck Body Repair
    312 Truck Body Repair
    312 Truck Body Repair
    312 Truck Body Repair
    Lead Designer

    Results & Impact

    Since 312 Truck Body Repair had no prior online presence, the primary success metric was establishing a solid foundation for discoverability and customer engagement. The new website is already serving as a central hub for inbound inquiries and brand visibility.

    Early Indicators of Success

    • 3m 25s average engagement time per session for the first 60 days, which is 72% higher than the industry norm. (Internal traffic was excluded from data.)
    • Organic search impressions are increasing steadily, which indicates search engines are recognizing the site’s relevance.

    Ad Campaigns In Motion

    • Google and Facebook Ads are active and already generating leads.
    • Email marketing campaigns are actively being set up to reactivate existing customers and warm new leads.
    • As data accumulates, campaign performance will be optimized for conversion and lead quality.

    Lessons & Next Steps

    What Worked Well

    • Competitor research enabled a strong UX & conversion strategy.
    • Automated CRM integration reduced the manual workload for the business owner.
    • Balancing credibility with conversion-focused design improved customer engagement.

    Opportunities & Next Steps

    • Direct HubSpot-CCCIS Integration: The client is looking to move forward with "phase two" of this project, which includes deeper integration between HubSpot and CCCIS (a leading collision repair management system). This will allow seamless lead management, automated job tracking, and improved workflow efficiency—reducing administrative bottlenecks and improving customer communication.
    • Expanding Content Strategy: Implementing blog content on fleet maintenance, common repair issues, and industry trends will further improve SEO and organic lead generation.
    • Enhanced Customer Review System: Directly integrating customer testimonials into the homepage will further strengthen social proof and trust-building.
    • A/B test form length to further optimize conversion rates.
    • A/B Testing CTA Optimizations: Further testing CTA wording, form field arrangements, and microinteractions could refine conversion rates even further.

    Final Thoughts

    Taking 312 Truck from zero online presence to a fully functional, lead-generating website was a rewarding challenge. By prioritizing trust, lead generation, and scalability, the website has begun actively driving business growth.

    Timeline

    Project Schedule

    I worked in close partnership with the client through each phase of the project, from initial discovery to final approval.

    Line illustration showing a website being designed

    Discovery

    December 4, 2024

    Attended a number of meetings with the client to define goals, target audience, and market positioning. Analyzed competitors, industry trends, and key insights to inform strategic direction.

    Prototyping

    December 13, 2024

    Developed mood boards, high-fidelity wireframes, and interactive prototypes in Figma to visualize design concepts. Collaborated with the client to refine and finalize their preferred concept.

    Design

    December 28, 2024

    Built the sitemap, configured the tech stack, and implemented SEO-optimized copy for landing pages. Developed custom scripts, integrated plugins, and optimized site functionality for seamless performance.

    Finalization

    January 15, 2025

    Led final client review to ensure all project elements aligned with expectations and objectives. Secured approval, marking the project's official point of completion and the initiation of an ongoing design, marketing, and social media retainer.