KH Agilearch

Project Context

KH Agilearch (Smart Architect / المعماري الذكي) is a Saudi contracting company based in Riyadh, working in construction, facility management and industrial services for clients across Saudi Arabia. Its website has to make a broad, multi-division service list legible to clients and partners evaluating the company, without turning into a wall of text.

Target Users

• Procurement and facilities managers in Saudi Arabia checking whether one contractor can cover several divisions
• Arabic-first decision-makers, who are the primary audience: the live site loads in Arabic by default
• Partners and subcontractors verifying that the company is a real, contactable operation
• Candidates and suppliers looking for the company's contact details on a phone

Main User Journey

1. Arrive from a search or a shared link, usually in Arabic and usually on a phone
2. Establish that this is a Saudi contractor, not a directory listing
3. Find the division that matches the work: construction, facility management or industrial services
4. Read enough about that division to judge whether it is worth a call
5. Reach the contact details without going back to the top of the site

Constraints

• A wide service list spanning three unrelated divisions, all of which had to stay visible without any one of them burying the others
• Arabic as the primary reading language, so the layout had to be right-to-left by default rather than as a secondary mode
• Content supplied as company documents and project photography, not as web-ready copy
• Mobile is the realistic first screen for the enquiries this site is meant to earn

My Role

• UI/UX Design, Full Frontend Development (Next.js / React), Component Architecture, Responsive Design

Key Work

• Next.js / React architecture
• Services & project showcase
• Clean corporate identity
• Fast, SEO-friendly pages
• Fully responsive layout

UX & Design Decisions

• The three divisions are presented as three parallel entry points instead of one merged service list, so a facilities manager and a construction client do not have to read past each other's work
• Each division leads with what the company physically does, not with an adjective, because a contractor is judged on scope of work rather than on tone
• Project photography is used as evidence attached to a division rather than as a decorative gallery, so a visitor can connect a claim to a delivered job
• Arabic-first layout: the reading direction, the order of the navigation and the position of the contact action follow Arabic reading order rather than a mirrored English grid
• Contact details repeat at the end of each division block, so an enquiry never requires scrolling back to a single contact section

Technical Setup

• Next.js and React, with the page structure built from reusable components so a division can be extended without rebuilding the layout
• Server-rendered pages rather than a client-only app, so the content is present in the HTML for search engines and for slow connections
• Responsive implementation driven by the content, not by fixed breakpoints copied from a template
• Arabic set as the document language and direction, so text shaping and layout direction come from the browser rather than from CSS overrides

Technologies & Tools