Toms Headlight Restorations
Project Overview:
Tom’s Headlight Restorations is a small local business offering a niche automotive service: restoring cloudy or yellowed car headlights to like-new condition. The project scope was to design and develop a simple yet effective website that would give Tom’s business an online identity and attract more local customers. Prior to this, the business was primarily finding customers through word-of-mouth and local ads; an online presence was needed to showcase before-and-after results, provide service information, and allow easy contact or booking for customers. The emphasis was on a straightforward site that would be easy for the owner to maintain and for users to navigate, reflecting the practical, honest nature of the service.
Design Challenge & Goals:
The challenge here was to build trust and convince visitors of the value of headlight restoration – some car owners may not even realize this service exists or how dramatically it can improve visibility and aesthetics. The website needed to use visuals (dramatic before/after photos) to immediately demonstrate the service impact. Key goals were: highlight the safety and cost benefits of restoration (vs. replacing headlights), provide an accessible explanation of the process, and drive users to contact Tom for an appointment. We also had to ensure the site would appeal to a broad local audience, including people who might not be very tech-savvy. This meant the design had to be extremely clear, with large text, obvious buttons, and a mobile-friendly layout (since many might find the site via phone after seeing a flyer or Google search).
Process:
Discovery:
Talked with Tom (the owner) to gather details about the service – how it works, how long it takes, pricing, and any unique selling points (e.g., he offers mobile service where he comes to the customer’s location). We also discussed common customer questions and concerns (e.g., “How long does the restoration last?”, “Is it cheaper than buying new headlights?”). This helped shape the site’s content, ensuring we address these points directly.
Content Planning:
Decided on a one-page style website (or very few pages) to keep things ultra-simple. The structure outlined was: Hero section with a catchy tagline like “Clear Headlights, Safer Nights” and a striking before/after image slider of an actual headlight Tom restored (to visually hook the user). Then a Service Overview section explaining what headlight restoration is and why it’s beneficial (clearer night driving, improved car appearance, cost-effective). Next, a Gallery/Before-&-After section with a few sets of comparison photos of past work. Then, a Testimonials snippet (if he had reviews, possibly pulling from Facebook or just a couple of quotes from happy customers) to build trust. Finally, a Contact/Booking section with a very visible phone number, email, and a simple contact form, plus maybe a note about service area and hours. We ensured that in the wireframe, the contact info (especially phone number) would also appear in the header or somewhere persistent for quick action.
Wireframing:
Created a low-fidelity one-page wireframe marking these sections. Focused on a layout that flows logically: problem (cloudy headlights) -> solution (Tom can fix them) -> proof (photos/testimonials) -> call-to-action (contact). Placed a before/after comparison element at the top which could be an interactive slider (letting users drag a slider over the image to see the transformation). Outlined a FAQ accordion under the service info to address queries like longevity of the fix, etc., if space allowed. The contact form wireframe was kept minimal (name, contact, car make/model maybe, and message) to reduce any friction.
Visual Design:
Given the automotive service context, used a color scheme drawn from car motifs: dark gray/black (like asphalt or tires) with vibrant orange accents (evoking car lights or caution for safety). This also ensures good contrast (orange text or buttons on dark background grab attention). Chose a sturdy, clear font for headings (to give a no-nonsense, trustworthy feel) and a simple sans-serif for body text for clarity. Designed the hero section with an actual photo provided by Tom, creating a dramatic split-image (left side the foggy headlight “before”, right side the crystal clear “after”). Overlaid the tagline and a “Book Now” button that jumps to the contact form. For the content sections, used icons where possible (like a little flashlight icon next to “Improved night visibility” benefit, a dollar sign icon next to “Save money” benefit, etc.) to make scanning easy. The testimonial section was styled in a friendly way, maybe using a picture of a happy customer. Because the site’s success hinges on the before/after visuals, those images were given priority in size and placement.
Development:
Built the site to be lightweight and fast, since many users might be on mobile data when searching. Used a responsive approach with a mobile-first CSS strategy. Implemented the before/after image slider using a small JavaScript library for image comparisons (ensuring it also works with touch input on mobile). Added click-to-call functionality on the phone number (so mobile users can just tap the phone number to call Tom directly). We also integrated a Google Map snippet showing the service area (centered on the town/city) in the contact section to reassure users that Tom is local and to possibly improve local SEO. Since Tom might not update content much, we kept it mostly static with an option for him to use a simple CMS or just call us for updates. Also embedded a link to his business Facebook page for additional social proof (since often small businesses have Facebook reviews).
Testing:
Given the straightforward nature, testing was done primarily for usability on different devices. We loaded the site on several phones to check that buttons were thumb-friendly and images were displaying correctly. Tested the contact form to ensure submissions went through to Tom’s email. Asked a couple of non-tech folks (one older family member, one neighbor who’s a car enthusiast) to go through the site; both found it clear and compelling – the older user appreciated the large text and contrast, and the car enthusiast said the before/after convinced him that the service works. We made small adjustments like increasing some font sizes for legibility and adding an extra call-to-action button mid-page (“Get a Free Quote”) that scrolls to the contact section, in case users don’t make it to the bottom.
Tools & Technologies:
Figma (for the design prototype), WordPress for Platform build and Google Maps API snippet. Also utilized Google My Business info to embed some review stars schema for local SEO.
Results:
The website for Tom’s Headlight Restorations proved to be a valuable asset for the business. Within a few months of launch, Tom noticed a significant increase in inquiries – many customers mentioned they found him via Google and were impressed by the before-and-after examples on the site. The bounce rate was low, indicating visitors typically scrolled through the content, and the click-to-call feature was frequently used (especially during evenings, suggesting people would discover the site and directly call to ask about service). Tom reported that the professionalism of having a website set him apart from some competitors who only relied on classifieds or social media; customers often told him that the website’s clarity and the visual proof gave them confidence to choose his service. In quantitative terms, lead volume roughly doubled post-website launch, and Tom even started getting bookings from neighboring towns (thanks to the site improving his visibility on local search). The project succeeded in delivering a clean, effective online presence for the small business, showing that even a simple site can greatly enhance credibility and reach in a local market.