Inside the Making of Madar’s Cutting-Edge Corporate Website — A Conversation with the Agency and the Client

Questions for Vide Infra

During your work on the website, at which point did you decide that you will go with next-gen 3D? Was it your client’s request or was it your concept, developed according to the project’s goals?

In the beginning, we assumed that we were going to use WebGL for website illustrations. Transportation is associated with maps and movement and, at the very least, we could create something along those lines. We came up with more interesting and original ideas after we had developed the content, defined the USP (Unique Selling Proposition) of the product, and decided to illustrate them. The client supported us. We needed to cycle through a few iterations to realize the final look of the website. Searching for imagery that illustrates such abstractions as “real-time analytics” and “online payments,” and then weaving them together into cohesive graphic design is not an easy task.

Tell us, how do you create such 3D-animated websites? We know that designers draw static websites in Figma and then typeset them. How do you convert design into code for a 3D-website?

We are using Figma and AI to design concept art for 3D illustrations. When we are satisfied with the imagery and the envisioned structure, we create a 3D model in Cinema 4D, where we elaborate the graphic design, ideas for visual effects, and behavior. It still looks like concept art, but already well thought-through. The final development stage begins when we upload that 3D model into Three.js in gITF format, where we recreate the design, the effects, and the behavior. This integration also includes design and refinement of features; we still come up with new ideas, and some of the intended effects prove to be hard to realize because of the strain put on the GPU. Effects and interactions are custom-written in JavaScript.

How much time does it take to design and typeset a 3D website as opposed to a static one? How much time does adaptation take? You mentioned that you optimize websites using low-performance devices, so that they work without complex visual effects. How much time does such optimizing take, and how labor-intensive is it?

Of course, compared with an ordinary website, 3D modeling and subsequent development take more time. It is hard to say how much more, because it depends on the complexity of the design and effects. With projects as demanding as Madar, or with an interactive district map that we developed for Era, it could take an additional month.

WebGL is supported by all modern browsers, including mobile devices; therefore, adaptation takes about as much time as it would take for a standard front-end website. Thanks to the fact that we write custom code without using any code designers, we can optimize it thoroughly and make sure that it works perfectly on mobile devices.

Adapting Madar for low-performance devices entailed, among other things, a reduced quality of visual effects — reflections and light softness that require power. Logistically, it didn’t take much time; it was more about planning it through and making sure that, despite the reduced quality, the website still looked good.

You told us that you delved deeper into the project while gathering data. The client even highlighted that you communicated as if you were a part of their marketing team. How much time did it take you to gather all the data, compared to other stages of website development, and how difficult was it, considering the language barrier?

Language barrier was non-existent because Madar’s team speaks impeccable English. We have been working with international clients for a long time, and we speak perfect English. However, understanding the specifics of the industry, which was new to us, provided an additional learning opportunity. We had to understand the specifics of market regulation and organization in Saudi Arabia, as well as the specifics of logistics management processes and specialized terms. We organized a series of interviews with the client’s stakeholders, met with a few of them several times, so that we could deepen and verify our understanding. Overall, we spent more than a month analyzing the product, the company, the industry, the market, and the competitors to come up with ideas for product positioning and creative work.

Do you have a special method of data collection that allows you to not miss anything important? One may not understand enough the intricacies of business and then misrepresent the product. What helps you accomplish your goals as best as possible?

We start our projects by developing the website’s strategy. It encompasses collecting and analyzing data, and then synthesizing it into new knowledge — comprehension of the project’s specificity and goals, designing a communication solution, developing the prototype, and concept art. The key factor is data collection and analysis, which creates a foundation for the project’s development. A website is a means of communication, it tells current and potential clients about the company and the product. The better we understand the product, the industry, the company, the clients, and the competitors, the better we are equipped to create an effective website. To gain a comprehensive understanding of all these aspects, we conduct a series of interviews with the client’s team from various departments. We try to make conversation with upper management, as well as with those in sales and customer service, because the employees on the higher levels of the company’s hierarchy will possess a better understanding of the company’s future, and on the middle level, the current customer needs. As a result, we can define the company’s strategic and tactical goals, its difference from competitors, the needs of their clients, the context of use for the product, as well as the company’s values and identity. In other words, we do everything necessary to develop an original solution that can relay the message to the audience the best way possible.

You told us that website texts play a crucial role in convincing the Target Audience that the client’s product is superior to those of their competitors. You particularly highlighted the main page that should communicate concisely about what’s most important. Which advantages of the product did you decide to feature on the main page and why?

We believe that text plays a fundamental role as it provides a vantage point for design that frames the embedded message. Therefore, the content and tone of texts directly influence our designs. The main page should tell about the company and the product’s USP in a way that will hook potential clients. Those clients are business owners and executives who have already customized their processes using various software products. Least of all, they want to replace them or integrate a new one. Therefore, we highlighted the most salient USP of Madar, which enables businesses to achieve maximum efficiency: a comprehensive truck and cargo report in real-time, an online wallet for automated mass payments, a marketplace for searching new clients and suppliers, and seamless integration with existing IT infrastructure, virtually without any time and capital expenditures at all. The professional mind immediately converts these features into cost reduction and revenue growth without the need to change anything in the already customized business processes.

What do you do when you have to develop a website for a product that is subpar to what its competitors can offer? Is there a way to successfully sell a product, even if it’s not the best?

Any product or company has some advantages; otherwise, they wouldn’t exist. Perhaps, where a product lacks functionality, it compensates with its customer support, etc. There is something that its clients favor and value. We must define this feature and build our communication around it. A textbook example of this is the slogan of Avis, that were losing the competition to Hertz. It said, “We are №2. We try harder,” which was a way of turning weakness into strength. To be effective, such an idea should be synthesized from the collected data and reflect the state of affairs.

Creating your own category and being the first and best is much better than competing. For instance, we could distinguish Madar by comparing the company with its competitors in the Transportation Management Systems market segment. It wouldn’t be the best decision, as there are many global and powerful competitors. Instead, we suggested creating our own category – Unified Transportation Platform, which accentuated the product’s unique features. This way, Madar offers new value and becomes a leader in its own category.

The last question is for our readers, most of whom are founders and representatives of web studios. How does one enter the global market to receive more commissions and increase revenue?

We aspire to offer such quality that any market would value as the best, because operating in the global market means offering the world’s best. This, obviously, concerns design and development, but understanding business and marketing is also crucial, so that you can understand your client and aid them with the best solution. For your client to trust you, you need to comprehend business and communicate on their level. The more value you generate for your client, the more they are willing to pay for your service.

Frequently, when a company commissions a website, it, in fact, asks for a solution to significantly more general communication tasks, even those that the client might not yet fully comprehend. They understand that they need a website. But, in actuality, they need a new, authentic way of speaking about themselves and their services that would distinguish them from their competitors and inspire their clients and their team. This is why we must offer a vision beyond website development. We must understand how to help our client formulate not just answers but also questions that need to be resolved before we get to design and development.

Questions for Madar

Tell us, how did you get to know Vide Infra? International projects aren’t rare, but it is always interesting to know how companies begin to cooperate in the global market. Did your friends recommend it?

Madar is an innovative, cutting-edge product, and I was looking for a company that would be able to develop a complementing website. I found Vide Infra’s works at Awwwards – a prestigious web design competition, where you can find the most advanced solutions. Websites developed by Vide Infra strike a balance between impressive creativity and seriousness. It allows them to draw attention, inspire, and simultaneously serve as a wonderful business tool. This is a rare combination that I was looking for. This is why Vide Infra got my attention. We set up a few meetings to get to know the company and to make sure that they can understand our product and their task. We didn’t present them with a ready-made assignment, therefore it was important that our partner could analyze the data, understand the task, and solve it independently at the highest level.

Could you tell our readers more about your product? Vide Infra told us that they created a website that matches up to your advanced and high-tech products. Please, tell us about the distinctive features of your products that set them apart from your competitors. By the way, do you have many competitors?

Saudi Arabia is developing rapidly. You must have heard about our country’s projects in real estate, urban planning, and industry that are among the most ambitious in the whole world. These and millions of other projects and businesses depend on logistics – timely and efficient cargo transportation. Madar handles all aspects of logistics on a comprehensive and efficient level. We deal with everything necessary to successfully run a business – finding contractors and planning routes, finance and calculations, transport and cargo real-time status. Our ability to cover all these spheres and tasks for carriers and clients alike, as well as our advanced technology, distinguishes us from competitors. We monitor cargo status, including temperature and location, we analyze business risks, we keep track of equipment and drivers’ papers, we offer financial analyses and much more. There are a lot of competitors who offer some of these features, but not all of them. Moreover, our clients don’t have to switch from their systems to Madar, they can integrate Madar and benefit from it in a short time.

In your case, you wanted a website that was aimed at launching you in the global market. Tell us, into which markets are you planning to venture next? Where would your products gain most traction?

The MENA region, the countries closest to Saudi Arabia, is our next frontier. We are already doing a lot of business there.  However, being the leader in the Saudi-Arabian market would already be a stellar achievement, and we are aiming for it.

The website “lets you feel that Madar is the future of logistics.” As a client, how do you measure this feeling of a technological breakthrough among your TA? Do you feel the difference in initial contacts or how you are perceived on the market since the launch of the website?

With this website, our goal is to demonstrate that we are not just another solution among the range of substitutes, but rather an innovative and groundbreaking product. This is precisely how the website affects potential clients. It wonderfully conveys the feeling of a technologically advanced product, and, at the same time, it rationally communicates the content – user value and simplicity of integration. As far as I can judge, there are no such websites not only in our market but also globally, which gives us an advantage when it comes to drawing the clients’ attention.

What are some concrete, measurable results that Madar’s new website has accomplished at this stage of your business development?

Our website is an exquisite tool for creating and supporting the cutting-edge image of the company, particularly in sales and direct marketing. Potential clients access it in order to get additional information or verify their understanding of our company, and they are left impressed by the website’s quality.

Vide Infra finessed your positioning and expanded the identity of your brand. How did it fit your initial vision, and how did you agree on the key design elements that now represent Madar on the market? Did you facilitate internal discussions on the matter?

Vide Infra’s approach to website development included strategy elaboration, which was a crucial factor that influenced our decision to choose the agency. You cannot create an efficient website if you do not understand how to represent the product and how to draw the clients’ attention. The way Vide Infra incorporated the brand elements into the visual fabric of the website was unexpected but effective. This stage required several iterations and discussions, mainly because the final 3D solution differed significantly from the initial general drafts. However, in the end, it turned out to be outstanding in terms of visuals and animations.

The agency conducted impressive work of data gathering and research before developing the website. Perhaps that research uncovered something new that you continued to utilize in your operations?

Vide Infra developed website content that we still use in our presentations and promotional materials, while the visual language created for the website allowed us to take the designs of our promotional materials to a new level.

3D-animation done in WebGL is, without a doubt, impressive. Did you have any reservations about using such cutting-edge technology for a corporate website, considering potential performance risks? What convinced you to take this step and declare that you will revolutionize the market?

Well, we were not attached to 3D animation when we started working together. Rather, we wanted an outstanding website that would be created using cutting-edge design and technological solutions. When Vide Infra presented us with their experience in WebGL during the initial meetings, they looked intriguing, and so we expressed interest in trying out that technology. It was already impressive when the team managed to implement their spectacular design on semantic and visual levels, and the 3D solution became its crowning jewel. Most of our requests concerned the business side of things, semantics, and aesthetics; we felt confident about technical implementation because Vide Infra has an impressive track record, and we knew it wouldn’t be a problem.

And our very last question. Where do you see the next frontier for your growing online presence in the coming years? Will you continue to dazzle the market, maintaining your image as a trailblazer?

Our marketing strategy incorporates an entire range of activities, including exhibitions, conferences, advertising, and direct communication. The goal of the website is to support it at the most efficient levels. We aspire to communicate the entirety of Madar’s innovative solution via every medium, and we are certainly going to continue sustaining this image.

Learn more

You can find more details about the results of this collaboration:

• Read the comprehensive case study on the Madar corporate website development.
• Explore the essentials of the Madar startup website design.
• Discover other projects by the Vide Infra design agency for startups.