Madison Hair & Skin

Design Challenge & Goals:

 The key challenge was to integrate two distinct service lines – hair and skin – into one website without confusing the user or diluting the brand. We needed to ensure that visitors could easily navigate to their area of interest (for example, a customer looking for hair coloring vs. one looking for a skincare consultation) while still conveying that Madison offers a comprehensive beauty solution. The design needed to exude luxury and professionalism to match Madison’s high-end reputation. Goals included: creating a clear division on the site for Hair vs. Skin services (while maintaining unity in style), showcasing before-and-after images (especially for skin treatments), implementing a booking or inquiry system for appointments, and including educational content (like a blog or tips section) to demonstrate authority in beauty care. SEO for local discovery (so that the salon appears in searches for both hair and skincare in the region) was also a consideration.

Process:

Discovery & User Insight:

Met with Madison’s team to understand their brand values and target demographics. They emphasized an approach of holistic beauty and a personalized touch. We also identified two primary user groups: existing loyal clients (who might use the site to check services or book) and new visitors drawn by either hair or skin service marketing. Investigated competing high-end salons and med-spas online; noted that many had separate microsites or very partitioned sections for different services, which sometimes felt disjointed. We set out to improve on this by designing a unified site that still lets users filter content by interest.

Information Architecture:

Devised a structure that essentially gave the site dual homepages: the main landing page introduces Madison’s overall brand and then provides two prominent entry points – “Explore Hair Services” and “Explore Skin Services.” Under each, sub-pages were planned (Hair: cuts, color, styling, bridal; Skin: facials, peels, cosmetic treatments, product shop). Common pages like About Us, Team, and Contact would serve all visitors. Created a site map and ensured cross-links – for example, the About page highlights that the team includes both hairstylists and estheticians, and on a hair service page, there might be a callout to a complementary skin service (like “Complete your look with a refreshing facial – see our Skin treatments”).

Wireframing:

Sketched wireframes that place a hero image and value proposition on the homepage, followed by a toggle or side-by-side feature to choose Hair or Skin pathways. Designed service list pages to be clean and informative, each with descriptions and starting prices. For visual emphasis, included sections for Before & After galleries (especially for skin treatment results and dramatic hair transformations). The wireframes also outlined a booking request form that lets users select which department (hair or skin) their appointment pertains to, routing to the appropriate coordinator internally.

Visual Design:

Crafted a sophisticated and clean visual style using a light, airy color scheme (white, soft grays, with subtle pastel accents) to evoke a sense of calm and luxury. Typography was elegant yet modern. We integrated high-quality photos provided by Madison – images of their chic interior, smiling staff, and clients showcasing great hair and skin results. To maintain cohesion, we used consistent design elements (like similar layouts and the same typography) across both Hair and Skin pages, while using imagery and slight color accent differences to distinguish them. For example, Hair pages got a faint blush accent, while Skin pages had a pale teal accent, tying into the idea of rejuvenation. I iterated on the design with stakeholder input; one change from feedback was making the Hair vs. Skin choice on the landing more visually explicit (we ended up with side-by-side images that acted as large tiles to enter each section).

Development:

Built the site with a responsive design approach, ensuring it looks great on mobile (where many younger clients would browse) as well as on desktop. Implemented on a WordPress platform with a custom theme tailored to the design. I added an online booking request system (not real-time scheduling, due to the salon’s preference to confirm appointments manually) – this was a custom form that captured the client’s desired service, preferred date/time, etc., and sent an email to the front desk. Also integrated a third-party widget for live chat so visitors could ask quick questions, reflecting the high-touch customer service ethos.

Testing & Refinement:

Before launching, I conducted a thorough review and testing cycle. Two staff members at Madison tested the site as if they were customers – one focusing on booking a hair appointment, the other a skin treatment – to ensure all information was accurate and the requests were properly received. I checked page load times (especially on image-heavy gallery pages) and implemented optimizations like caching and image lazy-loading.

Tools & Technologies:

Adobe XD (initial design concepts and prototyping), Figma (final UI design system and asset export), WordPress CMS (for implementation, chosen for its ease of updating content), JavaScript/jQuery (used for interactive elements like toggling between Hair/Skin content), Gravity Forms plugin (for the booking request form), Google Optimize (ran an A/B test post-launch on the landing page layout to see which version drove more engagement into Hair vs. Skin sections).

Results:

The Madison Hair & Skin website successfully unified the salon’s dual offerings into one digital platform. Post-launch, the business reported improved user engagement – analytics showed that roughly 60% of visitors engaged with both Hair and Skin sections, indicating cross-interest (one of the hopes was to cross-sell services, and early data showed many clients who initially looked at hair services also clicked into the skin pages, and vice versa). The online appointment request feature led to a 15% rise in appointment inquiries in the first quarter, particularly for skincare services which previously had lower visibility. The salon staff also noted that clients came in better informed; for example, new clients would reference the website’s treatment descriptions or bring in example hairstyle images they saw in the gallery, making consultations more efficient. Overall, the site gave Madison a modern, elegant web presence that reflects its brand quality and has become a cornerstone in its client communication strategy.