Ambatt Real Estate
A cinematic bilingual website for a Saudi real estate developer
Ambatt Real Estate is a property platform that presents AMBATT's developments through a refined, modern digital experience. We combined visual storytelling, elegant typography and clear navigation so visitors can explore projects, units, specifications and plans. The site runs in Arabic and English and is managed from its own dashboard.
- Client
- AMBATT
- Industry
- Real estate and property development
- Project type
- Corporate website, UX and UI design
- Our role
- UX and UI design and website development
- Duration
- One month
The goal
Create a modern, high-end digital experience for AMBATT that strengthens its online presence and presents its real estate developments clearly. Visitors should find it easy to explore projects and get in touch with the brand.
The challenge
AMBATT needed to move beyond a conventional real estate website and build a digital presence that reflects its high-end positioning. Project information was complex, so discovery had to become simpler and the content better structured. The experience also had to be more engaging while keeping a refined, trustworthy brand image.
The solution
We redesigned AMBATT's digital experience around clarity, visual storytelling and intuitive navigation. The journey runs from discovering a development to exploring its units, specifications, plans and location, and it stays consistent across devices. A full dashboard lets the team edit copy, units, projects and the blog and follow up on leads without needing a developer.
How the work went
- 01
UX strategy
We defined the experience and the user journey, from discovering a development to exploring its units, plans and location.
- 02
Information architecture
We structured the content and the navigation so project information is easy to find.
- 03
UI design
We created a refined visual language built on deep green, warm gold, architectural imagery and strong typography.
- 04
Responsive design
We adapted the experience across screen sizes while keeping the content hierarchy, the visual impact and easy access to key property information.
- 05
Prototyping
We built interactive flows to validate the experience.
Key screens
Design decisions
Refined visual language
A refined visual direction reflects AMBATT's positioning and gives the brand a stronger digital presence.
Simpler project discovery
The experience is structured so that exploring real estate projects and reaching key information is faster and more intuitive.
Visual storytelling
Immersive layouts, strong imagery and purposeful interactions present each development in a more engaging way.
One experience on every screen
Visual direction
- Aesthetic
- Architectural, editorial, warm and modern, with a high-end feel.
- Typefaces
- SF-Mada
- Imagery
- Cinematic architectural photography, lifestyle imagery and Saudi-inspired visual storytelling.
- Motion
- Smooth transitions, subtle reveals and immersive scrolling interactions that strengthen the cinematic feel of the website.
Under the hood
Technology
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- GSAP
- Lenis
- Supabase
- PostgreSQL
- Vercel
Integrations
- Supabase
- Vercel Blob
- Google Maps
The technical challenge
The site opens with a cinematic scene that moves with scrolling like a video, but is in fact a sequence of 305 images. It had to stay smooth on mobile without using up the visitor's data or slowing the first page load. The site loads only the images near the visitor's position in the scene and serves them from a CDN, and it respects the device's reduce motion setting automatically.
Performance and quality
A Content Security Policy and protection against embedding the site in other sites are in place, and every new account stays disabled until an admin activates it. The contact form limits repeated requests from the same visitor and stores a hashed fingerprint instead of the IP address, while analytics work without cookies or cross-site tracking. The site is bilingual with full right-to-left support and includes a sitemap, structured data and share metadata for every page.
What changed
Stronger visual identity
Deep green, warm gold, architectural imagery and strong typography now reflect AMBATT's positioning across the site.
Clearer navigation
Visitors follow a clear journey from a development to its units, specifications, plans and location.
Better storytelling
The experience moved from a traditional real estate presentation to a visual-first journey that combines storytelling with practical property information.
Consistent experience
Content hierarchy, visual impact and access to key property information are preserved on every screen size.
Immersive project storytelling
A cinematic, image-led experience communicates AMBATT's developments through architecture, landscapes and lifestyle.
Detailed project and unit exploration
Users can explore project phases, available units, specifications, galleries and architectural plans in a structured way.
Easy property discovery
Clear navigation between developments and units, focused calls to action and organised information make it easier to find the right property.
What we delivered
- UX/UI design
- Website design
- Responsive design
- Design system
- Interactive prototype
Have a project like this one?
Tell us what you need and get a detailed quote within 24 hours: scope, cost and timeline.
Request a quote
