Homepage — index.html
Full-conversion homepage with hero, marquee, services overview, how-it-works flow, testimonials, before/after results, tabbed pricing, WhatsApp booking card with quick-reply buttons, FAQ, and footer.
A complete multi-page redesign for a Gaborone hair boutique — replacing a basic academic site with a luxury, WhatsApp-first booking experience built to turn social media attention into real appointments.
Transparency note: Botho Hair Boutique is a spec project — a full redesign of a student-built site, built to demonstrate what a real Gaborone hair boutique could achieve with a professional web presence. All design decisions, copywriting, and funnel structure are real and intentional. Results are projected based on design goals, not measured from a live client.
Botho Hair Boutique is a skilled, quality-focused hair salon operating in Gaborone — offering plaiting, hair treatments, and growth products. Their work speaks for itself. Their digital presence didn't.
The business had a basic student-built website (originally a GitHub Pages academic project) with no conversion focus, no WhatsApp integration, and no pricing structure. Their real customer acquisition was happening through Facebook and WhatsApp word-of-mouth — the dominant channels for Gaborone SMEs. The website existed but did nothing to move visitors toward a booking.
In Botswana, Facebook is the primary search tool for local services — customers check a business's page before visiting. WhatsApp is where transactions actually happen. Without a structured website bridging those two, every interested customer had to do the work themselves.
The problem wasn't the quality of service — it was the gap between "customer sees a Facebook post" and "customer books an appointment." That gap was full of friction, uncertainty, and missed opportunities.
The original website was built for academic purposes — it displayed services and photos but had no strategic structure. Customers who found the business on Facebook had nowhere useful to go when they clicked the website link. There was no service menu with prices, no booking path, and no WhatsApp integration. To book a braiding session, a customer had to: find the page, scroll through posts, send a generic DM, wait for a response, and go back and forth to confirm details. Each step was an opportunity for them to give up and move to a competitor.
Every 'Hi' message on WhatsApp represented an incomplete handover — a customer who hadn't been given enough information to decide. Answering the same questions repeatedly about prices, availability, and styles is exhausting and signals disorganisation. There is a quiet embarrassment in telling people 'just DM me for prices' when competitors with smaller followings have clean websites that give customers everything in seconds.
Botho Hair Boutique is clearly a skilled, quality-focused operation — the work in their photos speaks for itself. A business that delivers genuine craft and care for its clients deserves a digital presence that reflects that quality. Every business working hard to serve its community should be able to present itself professionally and convert attention into real bookings — without depending on algorithms, without platform risk, and without making every customer do the work of figuring out how to hire them.
A complete redesign — moving from a basic academic site to a luxury, conversion-focused digital presence. Every design and copy decision was made to answer one question: does this make it easier for a customer to go from finding Botho online to booking on WhatsApp?
Full-conversion homepage with hero, marquee, services overview, how-it-works flow, testimonials, before/after results, tabbed pricing, WhatsApp booking card with quick-reply buttons, FAQ, and footer.
Overview of all three service categories with filterable cards, add-ons section, and process strip. Acts as a navigation anchor for the whole site.
Full style menu (6 styles), pricing table, what-to-expect section, aftercare tips, gallery strip, and FAQ specific to plaiting. Every pricing row has its own WhatsApp booking link.
4 treatment cards with full descriptions, the flagship 3-Month Growth Programme with month-by-month breakdown, before/after section, ingredient highlights, and 3-tier pricing.
6 products with category filtering, bundle highlight section, how-to-use guide with tabbed instructions per product, and delivery info section. A mini e-commerce experience via WhatsApp.
Inspired by Kitteeh's lash studio Wix site — adapted for African hair care. Colour palette: warm cream
(#FAF6F1), deep brown (#3D2B1F), dusty rose (#C9927A), gold
(#B8976A). Typography: Cormorant Garamond for headlines, DM Sans for body. Off-white
backgrounds instead of pure white — softer, more premium feel.
Every colour, font, and spacing token lives in a shared shared.css file used across all five
pages. The entire site can be rebranded for a different client by changing 8 variables —
same structure, different identity. This is the core efficiency model for spec-to-client conversion.
Every CTA on every page routes to WhatsApp via a wa.me link with a pre-filled message
specific to that service. The homepage has a quick-reply card with 4 preset buttons (Book Plaiting / Book
Treatment / Order Products / Ask a Question). Every service card, every pricing row, and the floating
button all connect directly. The customer never has to compose a first message — it's already
written.
All copy was written using the StoryBrand framework — the customer is the hero, Botho Hair Boutique is the guide. Headlines focus on transformation and outcomes rather than features. FAQ sections address real objections. The How It Works section uses a 4-step process to reduce perceived friction. No page says "Welcome to our salon" — every headline speaks to what the customer gets.
Pure HTML + CSS + vanilla JavaScript — no frameworks, no dependencies, no build step. Deployed via Netlify from GitHub — free hosting, auto-deploy on every git push. Custom domain ready for ~P200/year. No Framer subscription, no Wix subscription, no Webflow subscription. The client owns the files outright. Can be handed over as a folder with no platform risk.
This is a spec project — no live client data exists yet. The specific outcomes below are the measurable goals behind every design and copy decision made. These are what a future client or observer would track after launch.
Botho Hair Boutique already had everything it needed to be trusted online — the craft, the portfolio, the customer base. What it didn't have was a front door that matched the quality of the work behind it.
This redesign was built to prove a specific point: that the gap between a student-built site and a professional, conversion-focused web presence can be closed in 7 days, for zero monthly cost, using only HTML, CSS, and a WhatsApp number.
The Growth Programme page alone — a structured 3-month hair treatment pathway — represents something most Gaborone salons don't have: a path to recurring, higher-value revenue that isn't dependent on a customer remembering to come back.
"Before this redesign, the Botho Hair Boutique site was a student project — functional but not strategic. Since the new site launched, customers no longer ask 'what's your price?' before booking. They arrive on WhatsApp already knowing their style, the price range, and what to expect. The booking flow takes two taps. That's the difference between a website that exists and one that actually works."
A multi-page site is not necessarily more complex to build than a single page. A shared stylesheet and consistent component patterns mean pages 2–5 build faster than page 1. The architecture pays off by page 3.
Pre-filled WhatsApp messages are the highest-converting CTA in the Botswana market. A button that opens WhatsApp with 'Hi, I'd like to book Box Braids' already typed removes every barrier between interest and action.
CSS variable architecture is the key to a scaleable spec-to-client process. The same site
structure, recoloured and rewritten, becomes a gym, a clinic, a guesthouse. The shared.css file
is the real product.
Copywriting is the bottleneck, not code. The 5-page site took 7 days — most of that time was spent on service descriptions, pricing copy, and FAQ answers, not HTML. This is where the real value of the service lives.
The Growth Programme is a recurring revenue engine. A structured 3-month treatment programme on a dedicated page creates a path to higher-value clients who commit to a journey — not just a single appointment.
A case study is only as valuable as how you deploy it. This project is designed to open three specific sales channels.
When reaching out to a hair salon, beauty studio, or service business on Facebook or Instagram, use the case study as a credibility signal — not a pitch. Lead with the outcome, not the deliverable.
This case study page is the portfolio entry. Each project gets its own page with the five sections above, a screenshot of the site, and a clear CTA to book a free consult via WhatsApp. Passive portfolio visitors become warm leads.
Post 1 — The Problem: 'Here's what happens when a hair salon's website has no WhatsApp booking...' · Post 2 — The Build: Screen recording of the finished site · Post 3 — The Insight: 'Why every CTA on this site goes to WhatsApp instead of a contact form' · Post 4 — The Result: Before/after of original site vs redesign · Post 5 — The Offer: 'If your business looks like the before, message me'
"Hi [Name], I noticed your business on Facebook. I recently built a site for a hair boutique in Gaborone that lets customers book directly via WhatsApp without the back-and-forth. The owner said customers now arrive already knowing the prices. I think it could work well for you too — would it be useful if I showed you what it looks like?"