Z

Zubair Ahmad

Revamping The Wild SF — Website + AI Chatbot

A case study of full website rebuild and AI chatbot integration for a fine dining restaurant in San Francisco, resulting in 42% increase in reservation click-throughs and 60% faster load times.

Overview

The Wild SF is a fine dining restaurant in San Francisco that needed a complete website overhaul and real-time customer support solution. We rebuilt the entire website from scratch with mobile-first responsive design and integrated a custom AI chatbot to handle customer inquiries 24/7, dramatically improving user experience and business conversions.

The Challenge

The original website had several critical usability and performance issues: poor mobile UX with clunky navigation and overlapping menu states, restaurant menu only available as downloadable PDF (hard to read on mobile, bad for SEO, not accessible), no real-time support for customer questions, heavy unoptimized background images causing long load times, lack of proper heading hierarchy and content structure leading to poor readability and accessibility, and low engagement with no real-time call-to-action mechanisms resulting in drop-offs.

My Role

  • Designed full website architecture from scratch
  • Developed mobile-first responsive website using HTML and Tailwind CSS
  • Built embedded HTML menu page with dietary tags (GF, V) and sectioned layout
  • Created smooth sticky navigation for desktop and mobile
  • Implemented semantic headings and proper content hierarchy
  • Optimized performance with lazy-loaded images and WebP conversion
  • Integrated custom-branded AI chatbot on every page
  • Trained AI assistant for restaurant-specific queries and reservations

The Solution

The solution consisted of two major components implemented over 2 weeks:

  • Phase 1 — Full Website Rebuild: Completely redesigned the website architecture using mobile-first responsive HTML and Tailwind CSS. Built an embedded HTML-based menu page replacing the PDF, created clear sticky navigation, implemented proper semantic headings and content hierarchy, optimized performance with lazy-loaded WebP images, and added SEO and accessibility features including alt text, ARIA labels, and proper meta tags. Added reservation CTAs linking directly to Tock profile.
  • Phase 2 — AI Chatbot Integration: Embedded a custom-branded AI chatbot on every page, trained to handle restaurant hours and directions, detailed menu item lookups (e.g., vegan options), questions about private events and capacity, and step-by-step reservation assistance. The chatbot was styled to match The Wild's elegant, nature-themed aesthetic and optimized for both desktop and mobile usage.

Tech Stack

Frontend: HTML + Tailwind CSS

Design: Mobile-first Responsive Design

AI: Custom AI Chatbot (OpenAI)

Performance: Lazy Loading + WebP Images

SEO: Semantic HTML + Meta Tags

Accessibility: ARIA Labels + WCAG Compliance

Integration: Tock Reservation System

Results

  • +42% increase in reservation click-throughs in first 2 weeks
  • 60% faster load times after optimizing assets and removing PDF menu
  • +28% page engagement (time on site and lower bounce rate)
  • 24/7 support enabled via AI chatbot — significantly reduced phone calls and email queries
  • Improved SEO & accessibility — indexed menu content appears in search results, meets WCAG guidelines

Lessons Learned

  • Replacing static PDFs with live HTML content massively improves usability and discoverability.
  • Mobile-first design isn't optional anymore — it's essential for hospitality.
  • A well-trained AI chatbot can take real pressure off staff and provide seamless guest experience.
  • Design isn't just aesthetics — it directly impacts revenue, clarity, and guest trust.

Want to Build Something Like This?

Whether it's an AI SaaS, workflow automation, or full-stack web app, I can help take your idea from prototype to production.

Let's Build Together