Riyadh Salon Website Design Case Study

A salon website needs to do more than look beautiful. It has to help potential customers understand the services, compare options, check prices or packages, feel confident about the business, and quickly move toward booking an appointment or contacting the salon.

That becomes even more important in a market such as Riyadh, where beauty salons, nail studios, spas, wellness businesses and bridal-service providers often rely heavily on combinations of Instagram, WhatsApp, Google Maps and third-party booking platforms. Those channels can all be useful, but they do not replace the value of having a professional website that the business controls.

That was the idea behind this project. This was not a commissioned client website — I created it as a premium demonstration template specifically for salon and spa businesses in Riyadh, Saudi Arabia. The goal was to build a realistic website foundation that could later be customized for an individual salon’s brand, services, pricing, booking process and business requirements.

Rather than creating a single attractive homepage and stopping there, I treated the project like a real salon website system. The finished template includes structured services, individual service pages, packages, bridal content, contact functionality, mobile-responsive layouts and a WordPress architecture designed for future customization. This case study explains how I approached the project, the decisions behind the website structure, the technical system I used, and some of the development problems I had to solve along the way.

Why I Built a Salon & Spa Website Template for Riyadh

My original goal was to create a strong website foundation I could demonstrate to salon and spa businesses that do not currently have their own professional website. Some businesses already have a strong Instagram presence. Others use WhatsApp for enquiries. Some rely on booking platforms. Others mainly appear through Google Maps. None of that is necessarily a problem — a good website can work alongside all of them. The difference is that a website gives the business much greater control over how customers experience the brand.

The salon can decide how to present:

Services
Prices
Packages
Bridal offerings
Business information
Photography
Appointment options
Contact information and location
Frequently asked questions
Promotional content

A professional website also creates a stable destination that can support SEO, Google visibility, advertising campaigns, social media traffic and direct customer referrals. For this template, I wanted to demonstrate what that kind of owned digital presence could look like for a premium Riyadh salon or spa.

The Main Goals of the Project

Before building the pages, I defined several goals.

Create a premium visual direction

A beauty or wellness website should feel refined, but I did not want the design to become another generic pink salon theme. The visual direction needed to feel premium, calm, sophisticated, modern, appropriate for the Saudi market, and adaptable to different salon brands — a strong foundation rather than a design that would only work for one specific fictional business.

Make mobile a priority

A salon customer may discover the business through Instagram, Google, WhatsApp or a shared link and open the website directly on a phone, so mobile could not be treated as an afterthought. The website needed readable typography, usable buttons, clear service cards, sensible image proportions, simple navigation, easy appointment paths, forms that remain comfortable to use, and balanced spacing on smaller screens. Several parts of the project were refined specifically after mobile testing rather than simply accepting how the desktop layout collapsed.

Make services easy to explore

A salon can offer many different services. If everything is placed on one long page, users may struggle to find what they need. The template therefore needed a structured service system that could support individual services, service categories and related information.

Make the route to booking obvious

A potential customer should not need to search the website for ten minutes before finding out how to contact the salon. The template was designed around visible appointment and WhatsApp actions that can later be connected to whatever system a real client uses.

Prepare for Arabic and English

A Riyadh-focused business may need to serve both Arabic- and English-speaking customers, and that affects much more than translation. The design also needs to accommodate RTL layouts, Arabic typography, translated navigation, different text lengths, buttons, forms, service names, and responsive behaviour. The template was therefore designed with future bilingual implementation in mind.

Keep future client customization practical

The final website should not require rebuilding everything from the beginning for every salon. A real client should be able to replace the demo content with their own services, pricing, photographs, colours, branding, contact details, booking system, packages, story and locations. That made reusable architecture an important part of the project.

Planning the Website Structure

One of the first decisions was determining what pages a complete salon website actually needed. The current template contains:

Home
Services
Individual Service pages
Packages & Pricing
Bridal & Occasion
About
Contact

I deliberately did not create a Branches page. Not every salon has multiple locations, and creating unnecessary architecture simply because a future client might need it would make the template more complicated without solving a current problem. If a future client operates several branches, a branch structure can be added based on their actual requirements. That same principle influenced several other parts of the project: build what is genuinely reusable now, and add business-specific complexity when a real business requires it.

Building a Scalable Salon Services System

One of the most important technical decisions was not to treat services as ordinary text blocks. The template currently contains 24 individual services across six service categories:

Hair & Styling — services related to hair treatment, styling and salon care
Nails & Beauty — nail and general beauty treatments
Facials & Skincare — skin-focused treatments and facial services
Brows & Lashes — services centered around lashes, brows and related beauty treatments
Massage & Body — wellness, massage and body-care services
Bridal & Occasion — treatments and preparation services designed around weddings and special events

Instead of manually duplicating every service across different pages, I created a structured WordPress system using a custom post type (Service) and a taxonomy (Service Category). This gives the services their own content structure, meaning a future salon can add, edit or remove services more consistently rather than manually redesigning service sections every time something changes.

What an Individual Service Page Can Contain

A service page is more useful when it answers the questions a customer may have before booking. The individual service template can include a service introduction, price, duration, what to expect, who the treatment may be suitable for, preparation, aftercare, useful notes, and related services. Not every real salon will need every field, but having the structure available means the site can support more detailed service content when appropriate.

This can also be useful for SEO. Instead of having only a short service name buried inside a large services page, an important treatment can have its own dedicated URL and useful content.

Designing the Services Archive

The Services page needed to work as more than a collection of attractive cards — customers should be able to browse the available treatments and understand the service structure quickly. The archive therefore includes service categories, featured services, service imagery, pricing information, duration information and clear service navigation.

The service system also allows featured services to be presented prominently rather than relying only on their order of publication. That creates more flexibility for a real salon, which could emphasize a new treatment, a seasonal service, a popular package, or a high-priority bridal treatment.

Designing Service Cards for Real Browsing

A common design mistake is creating cards that look excellent in a desktop mockup but become awkward on smaller screens. During this project, mobile card proportions were refined so service imagery remained visually strong without making every card unnecessarily tall. This matters because the purpose of the Services page is browsing — users should be able to scan several services without excessive scrolling or losing context. Good web design is not only about making individual components attractive; it is about how those components behave as part of a complete user journey.

Creating a Dedicated Packages & Pricing Experience

Many salons do not sell only individual treatments — they also offer combinations. The template therefore includes a dedicated Packages & Pricing structure with five groups:

Beauty Rituals
Hair & Styling
Nails & Beauty
Spa & Wellness
Bridal & Occasion

The purpose of this page is not to guarantee that every future salon must use packages — it provides a reusable way to present them when they do. Packages can help customers compare options and understand the value of combining services, and they can help a salon present an experience rather than forcing customers to assemble individual treatments themselves. From a design perspective, packages deserve clearer presentation than simply adding more text to the bottom of a Services page.

Building a Dedicated Bridal & Occasion Page

Bridal customers often have different needs from someone booking a normal treatment. A customer booking a simple manicure might want to know price, duration and availability. Someone planning beauty services around a wedding may want considerably more — timing, preparation, multiple services, packages, trial appointments, different people in the bridal party, trust, professionalism, and the overall experience.

For that reason, I created a dedicated Bridal & Occasion experience rather than treating bridal as just another small service card. The page is designed to provide more room for storytelling, packages, visuals and calls to action. The broader principle is useful outside the salon industry too: the depth of a page should reflect the complexity of the customer’s decision. Not every service needs a large landing page, but important, high-consideration services may deserve one.

Designing the Website for Mobile Users

Mobile refinement became one of the most important parts of the project. Simply stacking desktop columns vertically does not automatically create a good mobile website — several things need to be reconsidered.

Navigation

The menu needs to remain clear and easy to use on a smaller screen. Users should still be able to reach services, packages, bridal content, contact information and appointment actions.

Buttons and CTAs

Appointment and WhatsApp buttons need enough size and spacing to be comfortable to tap. They also need to remain visually clear without taking over the entire mobile screen.

Service Cards

Image proportions, titles, prices and durations need to remain easy to scan.

Forms

Native form controls can behave differently from normal text content inside responsive layouts. The Contact page required additional refinement to ensure fields remained aligned and properly contained on smaller screens.

Horizontal spacing

Some layouts that looked centered mathematically still felt visually unbalanced on mobile because content was not occupying the available width correctly. Those problems needed to be measured and corrected rather than hidden with random margins. This is an important part of responsive development: mobile design should be intentionally composed, not merely compressed.

Appointment and WhatsApp Calls to Action

A salon website ultimately needs to help customers take action. For this template, the two main action paths are based around booking an appointment and WhatsApp communication. These are designed as flexible integration points — for a real client, the actions could connect to WhatsApp, telephone, a contact form, Fresha, another external booking platform, a salon-management system, or a custom booking workflow.

I deliberately did not force one specific booking system into the template. Different businesses already use different operational systems, and the website should be able to connect to the client’s existing process rather than requiring the client to reorganize the business around the template.

Preparing the Design for Arabic and English

Building a bilingual website should not begin after the English version is completely finished. Language affects layout — Arabic introduces right-to-left direction, and that can influence text alignment, icons, navigation, arrows, card layouts, forms, spacing, buttons, breadcrumb direction and responsive behaviour. Translated content can also have very different lengths: a short English service title may require significantly more horizontal or vertical space in Arabic, or the opposite.

For a Riyadh-focused website, these considerations need to be part of the architecture from the beginning. The goal is not to make the Arabic version feel like a translated copy of an English website — both languages should feel intentional.

The WordPress Technology Stack

The template uses a relatively lightweight WordPress stack: WordPress, an Astra child theme, Elementor Free, ACF Free, WPForms Lite and LiteSpeed Cache. Each component serves a specific purpose.

WordPress provides the content-management foundation and allows the site to use structured content such as the Services system.

Elementor Free is used for visual page-building and content editing. One goal of the project is to make normal page content manageable without requiring a developer every time a client wants to change a heading or paragraph — I deliberately built around Elementor Free rather than assuming every future client should need an Elementor Pro licence. That does not mean every technical component belongs inside Elementor; some functionality is better handled through WordPress, structured data or custom code. The goal is balance.

Astra child theme. Custom development should not be added directly to the parent Astra theme. Using a child theme provides a safer place for project-specific functionality and styling while keeping the parent theme independently updateable.

ACF Free. Advanced Custom Fields helps structure information that should remain consistent. Rather than embedding every piece of data manually into page layouts, structured fields can make future content management more reliable.

WPForms Lite. The Contact page uses WPForms for enquiry functionality. For a real salon, the form could be adapted around the information the business actually needs from potential customers.

LiteSpeed Cache. Caching and performance tooling are included as part of the site’s technical setup. Performance still needs to be evaluated based on the actual final content, hosting, images, plugins and integrations used by a real client.

Keeping the Website Editable Without Sacrificing Structure

One of the more interesting challenges in WordPress development is balancing flexibility and control. A website that requires a developer to change every sentence can become frustrating for a client, but a website where every technical element is exposed as completely free-form content can become inconsistent or easy to break.

The approach used here is visual content where visual editing makes sense, structured data where consistency matters, and custom code where functionality requires it. A heading or paragraph belongs naturally in a visual editor. A reusable service property may be better as structured data. A taxonomy relationship belongs in WordPress rather than being recreated manually on every page. The objective is not “put absolutely everything inside Elementor” — it is to make normal content editing easy while keeping the system maintainable.

Development Problems I Had to Solve

A case study is more useful when it discusses what did not work immediately. Several issues appeared during development and refinement.

Elementor layout properties affecting custom containers

One desktop layout issue was caused by an Elementor CSS custom property being inherited into a custom container. The result looked like a normal column-width problem, but changing random widths would not have solved the real cause. The issue had to be traced through the CSS cascade and the inherited Elementor property before applying a targeted correction — a useful reminder that visual bugs are not always caused by the most obvious CSS rule.

Responsive form alignment

The Contact page contained native form elements inside grid layouts. Form controls such as select fields and other inputs can behave differently from ordinary content when placed inside CSS Grid, which caused centering and width issues on some layouts. The correction focused on the grid-item behaviour rather than adding arbitrary margins until the page happened to look centered.

Mobile width and spacing

Some mobile sections initially left unnecessary empty space. This required redesigning the way content occupied the available width rather than simply reducing font sizes. Mobile whitespace should feel intentional — large unused horizontal areas usually indicate a layout problem rather than a typography problem.

Maintaining design consistency across pages

Once a website grows beyond a homepage, consistency becomes increasingly important. New pages needed to match the established system for section spacing, headings, body copy, CTA shapes, borders, cards and responsive behaviour. Without shared design rules, a multi-page website can quickly begin to feel like several unrelated templates.

What I Deliberately Did Not Build

Good architecture also involves deciding what not to include.

No branches system

A branches structure was intentionally postponed. It should be introduced when a real client actually has multiple locations and we know what information each branch needs.

No forced booking platform

The template does not assume every business uses the same booking provider. The CTA architecture can be connected to the client’s preferred system.

No invented client content

Because this is a demonstration project, I did not create fictional claims such as “500 monthly bookings,” “40% increase in conversions,” or “trusted by thousands of customers.” Those numbers would make the template look more impressive, but they would not be real.

No unnecessary enterprise features

The template does not include complicated software simply to make the technical stack sound advanced. If a future client needs memberships, an advanced CRM, loyalty systems or similar functionality, those can be added deliberately once the requirement is real — the same principle applied throughout the project: build what the business genuinely needs, and leave room to add the rest later.

This template exists as a starting point, not a finished product for any single business. The structure, the services system, the bilingual-readiness and the mobile refinements are what make it a realistic foundation — the specific brand, content and integrations are what a real salon or spa would bring to it.

How I Built a Premium Salon & Spa Website Template for Riyadh Businesses

Why I Built a Salon & Spa Website Template for Riyadh