Awards
-
-
2
2
-
-
-
-
Webby Awards
Nominee
-
Awwwards
Site of the Day
Developer Award
-
CSS Design Awards
Website of The Day
-
The FWA
FWA of The Day
-
Rating Runeta
Gold
Madar is the leading logistics platform in Saudi Arabia. It digitizes and automates the work of shippers and carriers and brings them together in a managed marketplace. The brief was to develop a corporate website that would present Madar as a global technology pioneer and make a product this broad clear to enterprise executives. Before they test anything, these buyers want to see the functional advantages, the business value, and what migration will cost. We took the project from first research to final launch: copywriting, an extended visual identity, design, development, and the Arabic version.
Positioning came first. Instead of competing with global players in the Transportation Management Systems, we defined a category of Madar's own, the Unified Transportation Platform, and built the site around it.
A broad journey that starts with a single line
Madar's identity is built on dynamic lines against a navy background, and we grew that motif into the site's full visual language. On the homepage, the lines become the experience itself: a single WebGL journey through 3D space. They light up as a road that ties every scene together and carries the visitor from one capability to the next. The glow comes from custom Three.js shaders, small programs that run on the graphics card and work out how every pixel should look in each frame, which is what lets a line shine and move in real time. The road is the right image for this product, since Madar follows every logistics order along its route, from start to finish.
Interactive 3D homepage
Each scene along the road works as an interactive poster, turning an abstraction like real-time analytics or online payments into a single image. The scenes follow the product itself: cargo, driver, and truck data from eGovernment systems, then real-time tracking, telemetry, electronic payments, and integration. Executives who have already fine-tuned their processes rarely want to replace their software, so integration with existing infrastructure gets a scene of its own.
The same light in motion
Beyond the homepage, the language of glowing lines carries into custom video illustrations on the inner pages. They keep the site visually continuous and add no weight for the visitor's device.
Platform and Marketplace: the product, explained
Madar serves two sides of the market: shippers, from logistics companies to the logistics departments of large enterprises, and the carriers who move their cargo. The Platform and Marketplace sections walk through the product feature by feature arranged so each visitor lands on the solutions that fit their own operations. Interactive illustrations and infographics make multi-step processes readable at a glance. In B2B SaaS website design, a product with this many modules has to be understood before it can be evaluated.
The company behind the platform
The About page covers Madar's vision, mission, strategy, and team, along with a timeline and a section on employment benefits and work culture. The Case Studies section follows a client from challenges to solutions, so a prospective customer can picture the platform at work in their own operations.
Fluent in every format
The site is fully localized for Arabic, with a mirrored layout and content adapted for right-to-left reading, so the Arabic version feels native rather than translated. On less powerful devices, the site scales down GPU-heavy effects such as reflections and soft light, which keeps the 3D journey smooth.
The result
Madar was nominated for the Webby Awards and won Awwwards Site of the Day and the Developer Award on Awwwards, Website of the Day on CSS Design Awards, and FWA of the Day. It is recognition from the international design community for a logistics platform built for enterprise clients. For us, SaaS website design at this scale means making the product understood first and memorable second, and here both happen on the same page. Madar still uses the site's copy in its presentations and has carried the visual language into its promotional materials.
Every decision, from the road drawn from the brand's lines and the WebGL scenes along it to the Platform and Marketplace pages and the Arabic version, serves both sides of the brief: a technology pioneer, and a broad product made clear to the people who choose it.