LAH Beauty: Hair salon
· Responsive Website end-to-end design
· Stakeholders: Business owner, me(solo designer)
· Duration: 2 months (part-time)
· Tools: Figma, Editor X, Google Docs, Zoom
PROJECT INFO
LAH Beauty did not have a website, hindering their growth and making it difficult for customers to learn about their services. Given that only one hair stylist existed, a streamlined appointment system was necessary to ensure efficient time use.
I was hired to design and develop a responsive website for LAH Beauty.
KEY RESULTS
72%
of clients returned by website
40+
Boosted online booking/month
GOAL
APPROACH
The primary goal was to increase sales for Lah Beauty by making it easy for customers to book appointments online and learn about their services. The website should also provide a pleasant user experience with an attractive design, easy navigation, and fast loading speed.
The first step was to gather information about the client's business and customers. I met the salon owner to understand their business objectives and requirements for the website. The salon owner required the website to increase online bookings, showcase the salon's services, and display customer testimonials.
Additionally, she mentioned that she has clients of various ages. Ranging from young children to seniors. This meant the design had to be inclusive and accessible to diverse users.
After the initial meeting, I conducted a competitive analysis to see what other salons were doing and created provisional personas.
COMPETITIVE ANALYSIS/PERSONAS
RESERCH
I discovered that many competitors have a booking system, but some struggle with accessibility, making it difficult to read text.
Additionally, I conducted a user survey to gain insights from potential users. We wanted insight from current salon clients. The survey was an effective method to collect quantitive data within a short time. So we chose to survey instead of an interview.
SURVEY
Based on a survey of 12 participants, I have made some design decisions and changes to the website that address the user's needs and preferences.
Hours and Location
I prominently displayed the salon's hours of operation and location information on the website's homepage to make it easy for users to find this information.
Booking System
Since 5 out of 12 participants wanted an online booking system, I included this functionality on the website, making it easy for users to schedule an appointment from the comfort of their homes.
Service Lists and Prices
Per the survey findings, users expected to see a list of services and prices. I included a clear, easy-to-navigate services page with detailed descriptions and pricing information.
Consistent Vibe
I incorporated high-quality images of the salon's physical space, services, and a hair stylist that aligned with the salon's brand and created a consistent vibe between the website and the salon's physical space.
How might we help clients book a hair appointment effectively?
After interviewing the business owner and subsequent research, I developed a strategy to help LAH Beauty achieve its goals. The strategy included creating a responsive website allowing customers to book appointments online and learn about Lah Beauty's services.
DISCOVERY
The owner mentioned a preference for reducing the usage of gold color on their website. However, there were constraints in developing new UI components due to the pre-existing logo and color themes. To tackle this, I proposed an idea to enhance the current logo and minimalize using gold color on the website.
CONSTRAINTS
DESIGN
LOGO
Once I clearly understood the client's goals and user requirements, I began the design process. I started to modify the logo first. I redesigned a modern logo while maintaining the brand's color scheme.
Before
After
Primary logo Black versionIDEATION
FEATURE ROADMAP
After meeting with the business owner, I developed a booking system and service list in phase one. I prioritized these in the first phase because they were the primary goals that the business owner mentioned.
This will ensure that the business owner can manage her appointments and offer a streamlined service to her clients.
SITE MAP
I focused on developing the site map to enhance the salon’s booking and sales by placing prominent Call-to-Action (CTA) buttons labeled "Book Now" on every website page. These buttons will make it easier for users to take immediate action.
DESIGN
WIREFRAMES
I created low-fidelity wireframes to visualize the design layouts and focused on presenting salon information for easy access to location and opening hours.
COLOR & TYPOGRAPHY
After creating the wireframes, I moved on to the visual design phase. The client had a brand guideline, so I used their brand colors and typography to create a cohesive look and feel for the website.
The Merriweather font and neutral colors give a modern vibe to the brand image.
BUILD
To validate my design, I created a website prototype using Figma. I tested the prototype against three regular customers to gather design and user experience feedback.
I aimed to make sure that the website features an easy-to-use booking system and maintains a consistent visual identity with the actual salon.
TEST
ITERATE
USER TEST FEEDBACK
The user suggested changing the color of the CTA button from gold to black for accessibility. Gold doesn't stand out on the white background.
One suggestion was to add an Instagram account and phone number to make it easier to use. This is especially important for desktop users who can't make calls directly through the link.
LAUNCH
After incorporating the feedback, I built the website using EditorX, a content management system and made it responsive to ensure it could be viewed on various devices. I also optimized the website for search engines to improve its visibility online.
Lah Beauty has experienced a notable surge in online bookings since the launch of their website. The owner has mentioned that it has been instrumental in boosting sales by 42%. Customers have provided positive feedback on the website's design and user experience, making it a valuable asset for promoting the salon's services and presenting its offerings.
RESULTS
Building a responsive website for LAH Beauty was a successful experience. Adding features like a newsletter and product page would be the next step to increase sales further and improve the website's functionality. A newsletter would keep customers up-to-date with trends and promotions, while a product page would showcase the salon's range of hair care products and increase revenue. These features would be a valuable investment for the salon's growth and competitiveness.
NEXT STEP