SaaS Startup Corporate Website Development — Madar Case Study

The Client

Madar is the leading transportation management platform in the Kingdom of Saudi Arabia. The company provides digital transformation and automation solutions for shippers and carriers in the rapidly growing regional market, while also helping them boost their business through Madar’s managed digital marketplace.

The startup approached us with a task to create a state-of-the-art corporate website, capable of effectively conveying the broad scope of Madar's functional offering, showcasing its key business benefits in a compelling, innovative, and engaging way.

Project Challenges

• High product complexity

  Madar is a transportation management platform, but behind this seemingly simple term — tracking the lifecycle of a logistics order — lies a comprehensive ecosystem. It combines a suite of applications, analytical tools, IoT smart devices, various eGovernment services integrations, digital documentation, and payment management systems. Adding another layer of complexity is a full-spectrum marketplace that connects transport providers with their clients. The scale of Madar’s functional offering is extensive, not only by Gulf standards but also on a global level.

• Limited source materials

  As true for any startup, Madar was primarily focused on delivering value to its clients and didn’t have an extensive range of marketing or branding materials. We had to develop brand positioning and copywriting, as well as extend and elevate the visual identity to create a solid foundation for the website’s development.

• A novel industry

  Developing any effective marketing solution requires gaining a deep understanding of the market’s mechanics — how the logistics value chain is organized, what pain points and needs businesses face, and how Madar addresses them. We had to understand all of this to design and develop a valuable and effective corporate website for a startup.

• A new region

  Madar is not the first MENA company we have worked with. Still, the unique level of eGovernment services integration into business processes in Saudi Arabia, as well as the local legislation, were new areas we had to study to understand the market context and expectations fully.

• Dual audience

  Madar’s key client group consists of shippers, whether they are shipping companies or logistics departments within larger enterprises. At the same time, carriers also need to find Madar’s offering clear, engaging, and easy to use.

Research

Creating any marketing communication solution requires a profound understanding of the product, clients, market, and competition. As a design agency for startups, we understand that an effective website must deliver a clear and concise message to the right audience in the right way. Ensuring this effectiveness is the goal of the initial strategic phase of the corporate website development  — and it begins with research.

Through a series of workshops with Madar’s project stakeholders, we gained a comprehensive understanding of the industry, product, clients, competition, and the company. By interviewing representatives across all company levels, we gathered valuable insights into the current needs of clients and the sales team, as well as future development goals and plans — the comprehensive outlook required to create a website that effectively meets the company’s present and future goals.

During one of the interviews, a client remarked that our questions were so precise it felt as if we were part of their internal marketing team. This is no coincidence, but rather the outcome of our experience in startup website development. Our approach is to uncover deep insights through well-structured qualitative research. The methodology allows us to understand businesses across a wide range of fields and regions. In addition to workshops, we conduct market research to analyze competitors and identify Madar’s unique selling propositions — the “points of difference” to emphasize in our communication.

The research phase culminates in a Definition Document — a detailed description of the product, market, clients, competitors, company, and project goals, along with a preliminary website structure, creative ideas, and SEO requirements. This document is essential for validating our understanding with the client and guiding the design process.

Copywriting

The copy is the foundation of the project. It guides the process by providing the structure of the startup website design. We place the utmost importance on crafting copy that is precise and inspiring — because it can truly make or break the project.

In terms of copywriting, corporate website development has some specific features. Madar’s customers — C-level operational, information, and executive officers in large-scale enterprises — are pragmatic and conservative. Before they even consider evaluating or testing the product, they need to clearly understand Madar’s functional advantages, the business value it delivers, and the cost of migration. We structured the homepage copywriting and storytelling specifically to address these points, distilling the message and reinforcing it with impactful creative illustration ideas.

While the homepage captures attention, sparks interest, and sets high expectations, the inner pages provide a detailed explanation of the product. The two main website sections — the Platform and the Marketplace — present comprehensive information about Madar’s functional features and benefits. The content is carefully structured to help customers easily find the logistics solutions most relevant to them. Clarity is especially important in website design for startups, since their solutions are often innovative and unfamiliar to customers.

For the About Us page, we created a complete high-end company presentation describing Madar’s vision, mission, history, strategy, and team, concluding with the benefits of employment and work culture. This approach strengthens the company’s image as a reliable and responsible partner and employer.

The Case Study section builds credibility by providing a detailed look at Madar’s integration experience. By outlining a client company’s challenges and explaining how Madar successfully resolved them, it helps prospective clients relate to the scenario and see how Madar could fit into their own operations.

Design

To achieve an impactful design, we significantly expanded Madar’s visual identity by building on its core elements — dynamic lines against a navy background. This enrichment was essential for establishing a solid foundation for a modern, expressive design and enabling creative freedom. As a result, we preserved the essence of the startup’s original visual language while elevating it into a more advanced and distinctive implementation.

First impressions matter — they shape the mindset with which clients engage with the product. Our goal for users’ initial interaction with Madar’s website was to convey the product’s core benefits and inspire interest through sharp storytelling and cutting-edge design. The homepage presents a comprehensive overview of Madar’s key advantages, distilled into a series of clear, essential ideas. These are brought to life through a creative narrative that guides the user seamlessly through a 3D space, chapter by chapter.

Each chapter on the homepage functions as an interactive poster — minimalist in layout yet highly impressive and immersive, thanks to WebGL technology. WebGL enables 3D rendering directly in the browser, without requiring any additional plugins, making it possible to create high-end visual effects and dynamic compositions. These rich illustrations are connected by glowing lines that serve as an allegory for the road. Each chapter explores a key capability of the product — from cargo, driver, and truck data sourced from eGovernment systems, to real-time location tracking, telemetry, electronic payments, and seamless integration with existing client infrastructure. These interactive visuals ignite the user’s interest from the outset.

In addition to interactive implementation, we used the same glowing line-based paradigm to create custom video illustrations for the website pages. These enhance the rich visual look and feel of the site without placing additional load on the user’s device.

The design of the startup’s product description pages delivers in-depth information on business cases and features, while continuing to inspire through advanced visuals. Sharp interactive illustrations, smart infographics, and an overall uplifting visual language combine to maintain interest and convey sophistication — this is the impact of a thoughtful startup website design.

The About page tells a rich, interactive story of everything that powers Madar — from the company’s vision and strategy to its mission, values, and team. Each section receives careful attention, contributing to a polished and modern brand image. We gave special emphasis to the timeline and employment benefits, adding depth and liveliness that make the page both engaging and memorable.

Development

The heart of the website’s creative implementation is an immersive real-time 3D presentation of Madar’s key attributes on the homepage. It’s a perfect example of how WebGL technology can be used to create a high-end corporate website experience — innovative, impressive, visually advanced, and truly engaging.

Developing an effective startup website solution requires extensive effort and close collaboration between our creative and development teams. Starting from a visual concept that outlined a series of scenes potentially linked in a 3D environment, our development team first built a proof of concept by connecting several of them. This, in turn, gave the creative team the direction needed to design a full 3D journey, integrating all the scenes into a single, cohesive narrative.

The technical implementation is based on the Three.js library, with custom shaders developed for key visual elements — particularly the animated glowing lines. The camera path was carefully calculated to ensure optimal viewing angles across all screen resolutions, taking into account the layered web content positioned above the WebGL canvas. Synchronizing the WebGL and web component animations to deliver a seamless and unified user experience was another standout achievement of the project — the mark of a truly tailored approach to startup website development. Finally, smart performance optimization allows the presentation to run smoothly across devices by automatically scaling down GPU-intensive effects based on the client’s hardware capabilities.

The website is fully localized for Arabic, featuring a mirrored design and content adapted for right-to-left text to ensure a seamless, native user experience.