Beauty · Hair & skin clinic
Madison Hair & Skin, two services, one brand.
A dual-focus website presenting a hair salon and skincare clinic as one elegant, unified experience, with online appointment requests.
Overview
A polished home for hair and skin
Madison Hair & Skin is a combined hair salon and skincare clinic offering a range of beauty services under one brand. The project was to design and develop a website that elegantly presents both hair services (cuts, colouring, styling) and skin services (facials, treatments, products) in one cohesive experience.
The aim was a polished web presence that appeals to Madison’s upscale clientele, allows online appointment requests, and reflects the clinic’s expertise in both areas.
The challenge
Two service lines, without confusing the user
The key challenge was integrating hair and skin into one website without confusing visitors or diluting the brand. Someone looking for colouring and someone looking for a skincare consultation both needed to find their way easily, while still seeing that Madison offers a complete beauty solution.
A clear division between Hair and Skin, without losing a unified style.
A look that exudes luxury and professionalism.
Before-and-after galleries, especially for skin treatments.
A booking and inquiry system for appointments.
Educational content to show authority in beauty care.
Local SEO, so the clinic appears for both hair and skin searches.
Process
From discovery to launch
Discovery & user insight
Met the team to understand their holistic, personal approach, and identified two user groups: loyal clients and new visitors. Competitors often split services into disjointed microsites.
Information architecture
A dual entry point: the home page introduces Madison, then offers “Explore Hair Services” and “Explore Skin Services”, with shared About, Team and Contact pages and cross-links between services.
Wireframing
A hero and value proposition, a side-by-side Hair or Skin choice, clean service lists with starting prices, before-and-after galleries and a booking form that routes to the right coordinator.
Visual design
A light, airy palette of white and soft grey with pastel accents: a faint blush for Hair and a pale teal for Skin. Feedback made the Hair and Skin choice into large image tiles.
Development
A responsive custom WordPress theme, a custom booking request form that emails the front desk, and live chat for quick questions.
Testing & refinement
Two staff members tested the site as customers, booking hair and skin appointments, plus caching and lazy-loading for the image-heavy galleries.
Results
A unified site that cross-sells services
Of visitors engaged with both the Hair and Skin sections.
Rise in appointment inquiries in the first quarter, especially for skincare.
“Very patient and very easy to work with.”
Tracey Masson, Madison Hair & SkinClients now arrive better informed, referencing treatment descriptions and gallery images, which makes consultations more efficient.
Tools
- Adobe XD
- Figma
- WordPress
- JavaScript / jQuery
- Gravity Forms
- Google Optimize A/B testing