Opens in a new tab

An Arabic First SaaS Website, Built From Figma

Thirty Pages, Twenty of Them From One Template

Naeem is a cloud platform that salons, barbershops and spas across Saudi Arabia use to run bookings, point of sale, staff scheduling, inventory and accounting in one place. The team needed a marketing site that matched the product, fully Arabic, right to left, quick on a phone, and editable by their own staff without calling a developer. We translated a detailed Figma design into WordPress on Bricks, drove twenty service pages from a single template, and built a custom multi step booking system wired to email and automation. The media payload came down by 87 percent and the site scores 91 for Performance on desktop Lighthouse.

Results at a Glance

Measured, Not Guessed

Lighthouse was run against the live site before and after every change. The numbers below are from the finished build with all video, illustrations and both languages in place.

91

Desktop Lighthouse Performance, LCP 1.5 seconds

87%

Lighter video, 17.4 MB down to 2.3 MB

20

Service pages running from a single template

60+

FAQ questions gathered across 16 categories

What Needed Solving

Arabic First, Twenty Pages, One Deadline

Naeem sells a product with twenty distinct feature areas to an Arabic speaking market, and the site had to be live in time for an industry event. Three constraints shaped the whole build.

Arabic first, not Arabic translated

Most WordPress builds treat right to left as an afterthought. Every layout decision here had to start from the right and read naturally to an Arabic speaking salon owner.

Twenty service pages, one small team

Bookings, point of sale, finance, inventory, loyalty and more. Hand building twenty near identical pages would have turned every future edit into a twenty page chore.

A launch date set by an event

The client had booked an industry event and needed the site live and branded before it, while the Figma design was still going through revisions.

Built to read right to left, by construction

What We Delivered

A Content Model the Client Actually Runs

One template, twenty pages

Hero, stats, problems, features, benefits, FAQ and CTA all read from a custom post type and ACF group, so one change updates every service at once.

Sections that hide themselves

Bricks conditions cannot test an ACF repeater, so we wrote a render filter that removes a section entirely when its field is empty. No blank gaps.

Per page control of the details

Each service sets its own hero title, hero video or image, two inline title icons, and its own button text and link, without anyone touching the template.

A custom booking wizard

Details, then a combined staff, day and time picker, then confirmation with an add to calendar handoff. Built as discrete screens rather than one long form.

An availability engine

Configurable working hours, slot length, days ahead window and days off, with real time double booking protection checked again on submit.

Automation that cannot break a booking

Every submission emails the team and posts the lead to an n8n webhook. The webhook call is non blocking, so an outage can never lose a booking.

A FAQ hub that maintains itself

The FAQ page stores no questions. It reads the repeater from all twenty service pages and groups them under category headings, so editing a service updates it.

Pricing rebuilt natively in Bricks

Two plan cards with tier pills and annual pricing, plus a seventeen row comparison table across five categories, all editable visually rather than in a shortcode.

Bilingual and RTL

Arabic Serves at the Root

Arabic is the default language and serves unprefixed at the root, with English available alongside it. Right to left was handled at the layout level rather than by flipping CSS at the end, so the mega menu column order, the card order inside grids, icon and arrow direction, form field alignment and the pricing comparison table all read from the right by construction. During launch we switched the default language over, remapped every internal link, and added permanent redirects from the old prefixed URLs so nothing that had already been shared would break.

Performance and SEO

Every Change Measured Against the Live Site

The four service hero videos were the biggest cost on the page. Rescaling them to display resolution, re-encoding and enabling progressive streaming brought them from 17.4 MB down to 2.3 MB, an 87 percent saving, with one file alone falling from 8.9 MB to 1.1 MB. We removed a 760 millisecond redirect on the homepage by restructuring the language routing so Arabic serves unprefixed. During the domain migration we corrected 952 insecure http references along with the site URL and home settings. Images were converted to WebP and served at display size, lazy loading was corrected where it had been distorting logos and icons, and the heading structure was cleaned up to a single H1 per page. Desktop Lighthouse finished at 91 for Performance with LCP at 1.5 seconds, CLS at zero and no blocking time.

The Outcome

Live for the Event, Run by the Client

Launched on time for the event

Twenty services, one template

Bookings arriving through the site

Arabic and English side by side

Media payload cut by 87 percent

Prices and FAQs edited in house

Conclusion

A Site the Team Keeps Building On

Naeem went live in Arabic, on schedule, in time for the event the launch was planned around. Thirty pages sit on the site, twenty of them service pages driven by a single template that the client edits from the WordPress admin. Prices, features, FAQ questions, hero media, button text and whether a section appears at all are all content decisions now, not development tickets. The booking system is taking real enquiries, and because the design was read straight out of the Figma files rather than copied from screenshots, the build stayed faithful through six rounds of design revisions, including a pricing page redesign and a colour change to the booking widget days before launch.

About the Client

Naeem

Naeem is a salon and spa management platform used by salons, barbershops and spas across Saudi Arabia, built by Creative Assets Information Technology Co. The product brings bookings, point of sale, staff scheduling, inventory and accounting together in one place, covering twenty distinct feature areas. Its customers are salon owners who run their businesses in Arabic, which is why the marketing site had to be Arabic first rather than an English site with Arabic added to it.

Ready to Build Something Great?

Start a Project

More Work

More Things We Made Move

SAAS, Beauty & Wellness

Naeem

Naeem is a cloud platform that salons, barbershops and spas across Saudi Arabia use to run...
Healthcare, Yoga Wellness, Education

Oceanic Yoga

Oceanic Yoga is a residential yoga school on a hillock above Morjim Beach in North Goa,...
Food & Beverage

Yes Gees

Yes Gees has been crafting authentic Indian foods in Australia since 2005, from dosa idli batter...