H&C Painters - Case Study

Overview

H&C Painters Home Improvements is a painting business based in Central New Jersey. The goal of this project was to design and develop a clean, professional website that showcases their services, builds trust with both residential and commercial clients, and drives more service inquiries.

Role

UX/UI Designer, Web Designer

UX/UI Design
Web Development
Content Strategy
Deployment & Testing

Project Details

Timeline: 2 weeks (2025)

Tools: Figma, Cursor, ChatGPT, GitHub, Vercel

Deliverables: Website design, responsive layout, improved information architecture, mobile-first design

Live Site: hcpainter.com

❌ Problem

The client originally lacked an online presence, which made it difficult for potential customers to discover their services. Without a professional website, visitors had no clear way to learn about offerings, view past projects, or contact the business, limiting visibility and conversions.

🎯 Goal

To design and launch a website focused on:

🌐

Establishing a strong online presence

Create a professional website that positions H&C Painters as a credible, established business in the Central New Jersey market

🎨

Clearly showcasing painting services

Present all services (interior, exterior, commercial, residential) in an organized, easy-to-understand format

🤝

Building trust through visuals and consistent branding

Use professional imagery and cohesive design to demonstrate quality and reliability

📞

Making it easy for users to reach out or request quotes

Provide multiple contact methods and reduce friction in the inquiry process

🔍 Research

📋 Research Approach

I conducted a competitive analysis of local painting companies in New Jersey and spoke with the business owner to identify objectives:

✓ Generate more customer leads
✓ Present a professional and trustworthy online image
✓ Highlight both residential and commercial painting services

👤 User Persona

👤

David (Homeowner)

Age: 32

Goal: Find a reliable painter who provides quality work at a fair price

⚠️ Pain Points

🚫

Distrusts Outdated Websites

Distrusts outdated or generic websites

🖼️

Needs Visual Proof

Wants to see examples of past work before reaching out

⚡

Quick Access

Prefers quick access to contact information

🎨 Design Process

1️⃣ Wireframing

Low-fidelity wireframes in Figma for Home, Services, Gallery, Contact pages; focus on simplicity, clear navigation, visual hierarchy.

2️⃣ Visual Design

Clean, high-contrast palette (white, dark navy, warm accents), modern minimal typography.

Color Palette

White, dark navy, warm accents for trust and professionalism

Typography

Modern, minimal fonts for readability and clean aesthetic

Buttons

Clear call-to-action buttons for user engagement

3️⃣ Development

Used ChatGPT and Cursor to translate Figma designs into code, connected to GitHub, deployed on Vercel, fully responsive layout.

01

AI-Assisted Development

Leveraged ChatGPT and Cursor to accelerate coding while maintaining design fidelity and clean code structure

02

Version Control with GitHub

Used GitHub for code management, version tracking, and collaboration

03

Deployed on Vercel

Chose Vercel for instant deployment, automatic HTTPS, global CDN, and seamless updates

✨ Key Features

🏆

Hero Section with Bold CTA

Hero section with bold tagline and call-to-action

🏠

Service Sections

Separate service sections for Residential and Commercial work

📝

Integrated Contact Form

Integrated contact form with clickable phone/email links

📸

Project Gallery

Clean imagery showcasing completed projects

🎯

Simple Navigation

Simple navigation and consistent color palette

🌐 Live Website

View the Live Site

The H&C Painters website is live and serving customers across Central New Jersey.

Visit hcpainter.com →

📄 Site Pages

🏠 Home

📸 Gallery

📞 Contact

📈 Results

⚡

Faster Load Times

Faster load times and full mobile responsiveness

🤝

Increased Trust

Increased trust and professional brand presence

📞

Clear Contact Path

Clear path for users to contact the business and request quotes

💭 Reflection

🎯 Designing with Real Business Goals

This project strengthened my ability to design with real business goals while maintaining user-centered design. I learned to blend marketing strategy with usability and visual consistency to help small businesses build credibility online.

🤝 Trust and Communication with Clients

It also reinforced the importance of trust and communication when working directly with clients.

🚀 Full-Stack Design Capabilities

Taking a project from design to deployed website expanded my skills as a designer who can not only create beautiful interfaces but also implement them technically. Using modern tools like Cursor, AI assistance, and Vercel deployment showed me the power of efficient workflows in delivering real business value quickly.