Madison Hair & Skin
Project Overview:
Madison Hair & Skin is a combined hair salon and skincare clinic offering a range of beauty services under one brand. The project entailed designing and developing a dual-focus website that elegantly presents both the hair services (cuts, coloring, styling) and the skin services (facials, treatments, products) in a cohesive online experience. The aim was to provide Madison with a polished web presence that appeals to its upscale clientele, allows online appointment requests, and reflects the clinic’s expertise in both domains.
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.
“Working with Sarah was a delight. She has created 2 websites for us. Her creative and communication skills have captured the look and feel and brand of our business. The feedback from our customers has been amazing. Nothing was to much trouble and she was available 24/7. I highly recommend her to anyone who wants a high end website. She was fast and fabulous to work with.”
“Sarah worked with us to build a website for our new business. She took relatively vague requirements, and put together a site we are very proud of. Her quality of work is high and she was extremely responsive to any and all questions. She kept us up to date on her progress, and did a good job of asking any clarifying questions. I recommend you reach out to her for your website building needs.”
“I was honored to have apparently Sarah's first Upwork contract. She did a bang-up job for me, helped me get through the process (I'm TERRIBLE at design), and she even put up with my goofy humor. Great work and personality. Would strongly recommend.”
“I would really love to thank you for the website you have designed for our business Razz Hair Studio. You did everything I asked in regards to the website in very quick time, responded to my phone calls at anytime of the day or night and made any little alterations I needed. Also not to mention finding the best deal to host my website. In fact I was that happy with my experience with the first website, thought it was time to build another online purchase website for my ULTIMA Hair Brush business and you did a brilliant design of that one as well.”
“Sarah did an amazing job on the design of my business website for Madison Avenue Hair & Skin. Every step of the way making sure each page, photo and information was just as I wanted. Sarah is very patient and very easy to work with and is always available responding to any questions in a fast and efficient manner. I highly recommend Sarah if you are looking for a dedicated person to improve or build your new website.”