ChezMari Salon
ChezMari Hair Salon is a well-loved local business offering professional hair care services. Their existing website, built with GoDaddy Airo, effectively provided basic information about the salon, including services, team bios, contact details, and a booking feature that helped clients schedule appointments online. However, as ChezMari prepares to grow and launch new branches, both the client and our team identified opportunities to elevate the website into a more modern, functional, and engaging digital experience.
Technologies
- WordPress
- TailwindCSS
- PHP
- MySQL
- Bookly Plugin
- WP Forms
- Google Review Widget
- InfinityFree Hosting
Purpose
The purpose of this rebuild was to:
- Modernize the design to reflex the salon's evolving brand.
- Enhance booking functionality to support client preferences and operational needs.
- Improve content flexibility and ease of maintaince.
- Create a platform for ongoing client engagement and SEO growth.
My Role
As the Front-End Lead in a team of five developers, I was responsible for:
- Developing the homepage with a focus on clean UI and responsive design.
- Building the blog listing page and individual blog detail pages.
- Implementing the contact page, including form integration and layout styling.
Technologies Used
- WordPress: CMS for content flexibility and plugin support.
- Tailwind CSS: Utility-first styling for a sleek, responsive layout.
- PHP: Core language for WordPress backend customization.
- Bookly Plugin: Booking system with stylist/service selection.
- WP Forms: For easy contact form creation and customization.
- Google Review Widget: To showcase real-time customer testimonials.
- InfinityFree Hosting: Free, scalable hosting solution for the launch phase.
Development and Thought process
- Client Consultation & Discovery: We discussed the salon's brand vision, customer needs, and pain points of the current site.
- Wireframing & Design: Created low-fidelity wireframes and a style guide focusing on neutral tones, clean layouts, and intuitive UX.
- Implementation: Built on WordPress using a custom theme powered by Tailwind CSS. Integrated key plugins: Bookly for bookings, WP Forms for contact, and Google Review widget. Hosted and optimized the performance of the project.
- Client Training & Handoff: Provided documentation for salon staff to update services, blog, and gallery with ease.
Artboards and Features
Home Screen: The homepage serves as the main entry point of the website, designed for quick and intuitive navigation to key sections—Services, Gallery, Blog, and Contact. It features client testimonials to build credibility and trust, and includes a team introduction section to help clients get familiar with the stylists before booking. An embedded map and contact details ensure clients can easily find and reach out to the salon.
Services page: Featured services with filtering by category. Services page provides clear descriptions for quick decision-making.
Booking Page (Bookly Plugin): Users can select service type and preferred stylist, book multiple services in a single session.
Gallery: Dynamic, organized layout showcases client's transformations.
Blog: Blog Page covers styling tips, hair care service, and trends. It also supports SEO and keeps clients engaged.
Contact Page: Custom WP Form for inquiries and requests.
Challenges
Understanding the structure and limitations of WordPress: Getting familiar with how WordPress works, especially when customizing beyond default themes and plugins, was a learning curve at the start of the project. My solution is investing time in exploring documentations, and experimenting with various plugins.
Comminicating technical decisions to a non-technical client: Explaining technical aspects such as site architecture, plugin choices, and performance considerations was difficult for a client without a technical background. My solution is simplifying complex ideas using clear, everyday language and supported them with visual explanations, including mockups and moodboard.
Conclusion and Reflection
The redesign of the ChezMari website is now inline with the high standards and friendly atmosphere of the salon. It is easy to navigate, cohesive, and self sustaining, which enables the team to regularly update the site and keep pace with their evolving business.
The redesign taught me that the focus is never just on building for the client but building with the client by incorporating their insights and understanding how they function on a day-to-day basis.
Next Steps
- SSL Implementation & Security Monitoring: Implement SSL and monitor security protocols.
- Image Optimization for Speed & SEO: Optimize image delivery for speed and SEO.
- Gallery Filter Enhancement: Add filters to the gallery based on service type.
- Ongoing Blog & SEO Improvements: Continue blog updates and SEO enhancement efforts.