Booking & Contact
Clear, repeated calls to action guide visitors from browsing services to reaching out.
Case Study — Web Development
Yoshi Hair Salon
A conversion-focused salon site built to make booking effortless, without losing the warm, boutique feel of an in-person visit.
Every path on the page leads back to booking.
The Challenge
Booking friction was the real problem
Salon sites live or die on how fast a visitor can find a service, see pricing, and reach out. The brief called for something that felt personal and boutique, not like a generic template, while keeping the path from landing page to booking as short as possible.
Bootstrap and jQuery power the front end for fast, responsive interactions; PHP and MySQL handle services data, pricing, and contact submissions on the back end — editable without touching code.
Booking-First Layout
Services, pricing, and contact stay within reach the whole way down the page.
My Role & UX Decisions
Full-stack build, solo
I owned the project end to end: structuring the PHP/MySQL data model for services and pricing, building the templates, and writing the jQuery/AJAX layer so forms submit without a full page reload.
- Service and pricing menu surfaced high on the page instead of buried in a sub-page
- Contact and booking CTA repeated at natural scroll breakpoints
- Soft, on-brand color palette to keep the boutique feel of an in-person salon
Development Decisions
Keep the stack simple and fast
- PHP/MySQL for services and pricing so content updates don't require a redeploy
- jQuery AJAX for the contact form so submissions feel instant
- Server-rendered pages for fast first paint over a heavier JS framework
Technical Stack
PHP
MySQL
jQuery
Bootstrap
AJAX
Feature Breakdown
What the site does
Services & Pricing
Services menu with pricing pulled from MySQL, editable without redeploying the site.
AJAX Submissions
Contact form posts via jQuery AJAX so visitors get instant feedback, no full reload.
SEO Basics
Page titles and structured markup so local search can surface the salon correctly.
Development Process
How it came together
1
Plan the data model
Mapped out services, pricing, and contact fields in MySQL before touching layout.
2
Build the templates
PHP templates for each page, pulling services and pricing from the database.
3
Wire up interaction
jQuery AJAX for the contact form, plus Bootstrap for responsive layout.
4
Test and refine
Checked the booking path end to end and tightened spacing, copy, and CTAs.
A short, obvious path to booking beats visual flourish every time.
Responsive across desktop, tablet, and mobile via Bootstrap's grid — the booking and contact CTAs stay reachable at every width. That constraint became the biggest lesson of the project: a repeatable pattern for PHP/MySQL sites with editable content, built around one job to do well.
