Experience loop
01 Discover
02 Services
03 Book
04 Visit
Client Website Project
Hair Brighton
A vibrant, mobile-first website for a Brighton Marina salon, designed to translate a quirky local brand into a polished, fast, and conversion-focused online presence.
Brand-led websiteMobile-first UXLocal SEOR2 image pipelineTreatwell booking
Explore project
Live website
Visit Hair BrightonExperience
A brand-led salon website built for clarity, character, and bookings.
Hair Brighton was redesigned as a lively, polished single-page website that reflects the salon’s creative Brighton Marina character while remaining clear, accessible, and easy to use. The visual direction combines the salon’s established red-and-white Hair identity with tropical foliage, exotic collage artwork, pink-hair portraiture, and real interior photography to create a distinctive, memorable online presence.
Beyond the visual design, the project focused heavily on practical production quality: responsive layout refinement, clear service and pricing presentation, real customer review integration, Treatwell booking links, local-business SEO, structured metadata, a custom social-sharing image, favicon/touch-icon support, and a performant image pipeline. Large artwork masters were moved out of the codebase into private Cloudflare R2 storage, with optimised runtime variants generated during the Cloudflare Pages build process.
Booking-focused flow
Clear appointment CTAs and Treatwell links keep the path from browsing to booking simple.
Service and price clarity
Salon services and prices are presented in a readable, mobile-friendly structure.
Local trust signals
Reviews, real salon photography, location details, and map direction cues help the site feel grounded and trustworthy.
Mobile-first presentation
Layout, typography, imagery, and conversion rhythm were refined through desktop, iPhone, and iPad review.
Views
Brand identity, services, reviews, and booking flow at a glance.
Hero identity
Services and prices
Mobile presentation
Location and booking
Systems
Website systems that keep the experience fast, findable, and easy to book.
Product loop
Discover Services Prices Book Visit
Website experience
- Single-page salon presentation
- Clear section navigation
- Service and price information
- Gallery and review sections
- Location and contact details
Conversion flow
- Prominent booking CTAs
- Treatwell booking integration
- Phone and directions links
- Footer booking reinforcement
Brand and content
- Red-and-white Hair identity
- Tropical collage artwork
- Salon photography
- Polished copy and service language
Performance and SEO
- R2 source master storage
- Sharp-generated responsive images
- Local-business structured data
- Social preview metadata
Build
How the website was designed, optimised, and shipped.
A concise record of the role, stack, image pipeline, SEO layer, conversion flow, and production-readiness work behind the website.
Architecture map
1 Astro site
2 Cloudflare Pages
3 R2 masters
4 Sharp variants
5 Live website
Role
Creative and product direction, visual identity interpretation, mobile-first UX refinement, conversion-focused booking flow, content and copy polish, image optimisation strategy, R2-backed source asset architecture, SEO/social-preview presentation, deployment preparation, and iterative desktop, iPhone and iPad testing.
Technical outline
Built with Astro, TypeScript, bespoke CSS, Cloudflare Pages, R2-backed source masters, Sharp-generated responsive images, GA4, JSON-LD local-business metadata, Open Graph metadata, and a lightweight static sitemap.
Frontend and presentation
AstroTypeScriptBespoke CSSMobile-first responsive designSelf-hosted local fontsStatic OG artwork
Cloudflare and assets
Cloudflare PagesCloudflare R2Build-time source asset syncSharp image processingResponsive WebP/JPG variantsLightweight static delivery
Conversion and discovery
Treatwell booking linkLocal-business JSON-LDGoogle Analytics 4Open Graph metadataSitemap generationFavicon and touch-icon support
Work together
Need a website with this level of care?
I help small brands, creative businesses, and independent projects turn their identity into fast, polished, mobile-first websites.
Continue exploring
Try the work, explore more, or start a conversation.
Visit Hair Brighton, return to the MPX collection, or get in touch if you need a polished website or digital experience of your own.