Ambatt Energy
A bilingual B2B website for a Saudi power solutions company
Ambatt Energy is a Saudi power solutions company specialising in diesel generators, energy systems, installation, maintenance and technical support. We designed and built a bilingual B2B website that presents its products, services, partnerships, certifications and completed projects. Every page guides the visitor towards requesting a quotation or a power solution.
- Client
- AMBATT
- Industry
- Energy and power solutions, industrial engineering
- Project type
- B2B corporate website
- Our role
- UX and UI design, design system and website development
- Duration
- One month
The goal
Give Ambatt Energy a professional, modern website that explains its power solutions, products, services and project portfolio clearly. The site had to build trust with B2B clients and make it easy to request a quotation.
The challenge
Ambatt Energy offers a wide range of technical products and services, and all of it had to be clear and engaging for B2B buyers. There was no previous design to build on, so the structure and the visual identity started from zero. The result had to look industrial and high-end while staying simple to use.
The solution
We organised products, services, technical information and projects into one clear journey from discovery to enquiry. A consistent industrial design system, responsive layouts and focused calls to action keep that journey clear on every screen. Behind the site, an admin dashboard lets the Ambatt team edit products, services, projects and all site copy in Arabic and English, preview a draft before publishing it and roll back to an earlier version.
How the work went
- 01
UX strategy
We defined the website structure, the user goals and an experience focused on turning visits into enquiries.
- 02
Content structure
We arranged the company, services, products, projects and technical information into a clear hierarchy.
- 03
UI design
We set the visual direction, layouts, typography and components that give the site its industrial, high-end look.
- 04
Responsive design
We adapted the interface and layouts for desktop, tablet and mobile.
- 05
Interactive prototyping
We built interactive prototypes to show navigation, interactions and key user flows before development started.
Key screens
Design decisions
Industrial visual language
A bold, modern look reflects Ambatt Energy's engineering expertise, reliability and technical nature.
Clear information hierarchy
Products, services, technical details and projects sit in clear sections that B2B users can scan and understand quickly.
Built around enquiries
Clear calls to action and short user flows guide visitors from exploring solutions to requesting a quote.
Understand the business first
We started by understanding Ambatt Energy's business, its audience and its technical offering before designing any screen.
Make complex content simple
We turned complex information into a structured experience, with simpler navigation and products and services organised logically.
From discovery to enquiry
The design strengthens the brand's industrial identity and keeps a clear path from first visit to sending an enquiry.
Visual direction
- Aesthetic
- Modern and technology-driven: a clean corporate look combined with bold industrial visuals, strong typography, dark tones and subtle interactive elements.
- Typefaces
- Aldrich, SF Pro
- Imagery
- High-end industrial and engineering photography of generators, power systems, technical equipment and real project sites. The mood is powerful, professional and reliable, with a cinematic feel.
- Motion
- Smooth section transitions, subtle scroll-based storytelling and refined micro-interactions. Motion supports the content hierarchy and navigation without distracting from the technical, corporate nature of the brand.
Under the hood
Technology
- Next.js 16
- React 19
- TypeScript
- React Compiler
- Tailwind CSS 4
- GSAP
- Lenis
- Supabase
- PostgreSQL
- Vercel
Integrations
- Supabase
- Google Maps
The technical challenge
Customers need to see each generator from every angle, but a 3D model for every product was costly and its code alone weighed about 1 MB. We replaced it with a rotation built from turntable photos that the team uploads from the dashboard, blending each frame into the next so that even 8 photos read as real rotation. This cut the JavaScript loaded in the browser from 2.2 MB to 1.2 MB, and re-encoding the homepage video took it from 2 MB to 613 KB so the first frame appears as soon as the first chunk arrives.
Performance and quality
Images are served as AVIF, which makes product photos 48% smaller, and the fonts loaded on first page load dropped from 122 KB to 37 KB. The site went through a full security audit and every issue it found was fixed, with Row Level Security on every table and a Content Security Policy that blocks external code. It runs in Arabic and English with full right-to-left support, and includes a sitemap, structured data, hreflang links and SEO settings editable from the dashboard.
What changed
Strong visual identity
An industrial design language that communicates reliability, engineering expertise and professionalism.
Clear content organisation
Technical products, services and project information are presented in a structured experience that is easy to navigate.
Consistent user experience
One design system covers layouts, components, typography and responsive screens, so the whole website feels unified.
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
