Martistel

Digital Presence for Storage Startup Aiming for the Outer Space

Click to Play
Client

Martistel

Event

MODEX 2024, a bi-annual supply chain conference in Atlanta, USA with 48’000 participants

Brand development

Shuka Brand Bureau

Industrial design

nao.design

Services

Project Management

Design System

Interface Design

User Experience Design

Front-End Development

Back-End Development

Year

2024

Deliverables

Website

iPad App

Value Delivered

We created a high-performance website to introduce Martistel to the world and provide visitors with a seamless transition from the Martistel conference stand into their own digital space. The revitalized design maintains Martistel’s brand identity and communicates its core values, flawlessly adapting to various devices and screen sizes. Advanced optimisation ensures quick loading to complement physical presence and avoid disruptions in customer flow.

To facilitate client engagement, we also designed the interface for the warehouse simulator application, used to personalise and demonstrate client-specific warehouse operations.

The value delivered is not limited to a specific conference. The website is used by Martistel as their main online representation, and the warehouse simulator app will be reused in subsequent conferences, including Gitex’24 Dubai in October 2024.

The Client
Specialties

Robotics, Supply chain, Software development, Robotic warehousing, Production automation, Hardware development

Key Features

Highest density storage, MFC WCS platform, Simultaneous multi-tote handling, Autonomous robots, Warehouse simulator

Martistel is a Dubai-based warehouse automation startup that develops advanced robotics to maximize storage capacity, streamline operations, and drive economic efficiencies within warehouses. Their flagship platform, MFC WCS, is unique in its ability to handle multiple warehouse containers (totes) at once. This approach increases weight-handling capacity from 35 to 175 kilos, resulting in optimized space utilisation and process speed.

But Martistel’s ambitions are not limited to speeding up tote handling in a sterile environment. With a special focus on fault-tolerance, they aim for planet-neutral solutions—imagine a warehouse robot that could work in open space or Martian sands as well as it does now in the Arabic desert. We could not ignore the scope of these ambitions and had to reflect them as part of the visual message in the website design.

The Challenge

In preparation for the MODEX 2024 conference, Martistel recognized the need for a digital platform that could effectively showcase its solutions to a global audience. While Martistel’s robotic products and brand identity were on hand, they didn’t have a website that could convey their vision and their value.

Our challenge was to create a website and an application interface that not only reflected Martistel’s technological advancement but also seamlessly integrated with its physical presence at the conference. This required adapting brand identity to resonate across both digital and physical channels, captivating visitors and driving engagement, and then translating it into actual deliverables to be live-tested by thousands of conference visitors—all within a tight deadline.

The Solution

Our strategic approach was to recreate Martistel’s brand identity and core principles within a website, faithfully replicating the existing branding design within the web format. We designed the application interface with uniformity in mind, aiming to create an experience that would seamlessly transition from their conference stand.

Design Solution

We prioritized a meticulous translation of Martistel’s branding into a digital format. This involved establishing a visual rhythm through diverse color blocks, engaging videos, compelling product imagery, and other elements that collectively told a captivating brand story.

By thoughtfully organizing content and paying attention to viewport requirements, we ensured a consistent and user-friendly experience across all devices. Smooth transitions, a minimalist layout, and strategic use of negative space further enhanced the site’s aesthetics, reinforcing the brand’s modern and innovative spirit.

We also introduced interactive elements such as animation, rich visuals including product prototypes on-site photos and videos, and an intuitive card grid to engage visitors and highlight key product details.

Technological Solution

Using our expertise in front-end development and managing our team’s overtime resources, we rapidly implemented this project within two weeks to meet the tight MODEX conference deadline—March 11th. We identified key user audiences and, through cross-device prototyping, adapted the website for optimal viewing on desktops, tablets, and mobile phones. The full scope of supported viewing modalities is as follows:

320×480
640×960
1280×720
1920×1080
2560×2048

Warehouse Simulator Interface

The Martistel’s iPad application was designed to simulate a warehouse for live visitors. The interface was created for internal use by Martistel employees with a concurrent client presentation on the TV screen. The interface consists of four main stages: Registration, Data, Settings, and Results, indicated by breadcrumbs on the top left of the screen. During live interactions at the conference, Martistel employees quickly fill in a registration form with the client’s essential information, including an option to add a business card picture. The facility data collected from the client includes area, width, length, and height, either in imperial or metric units.

Based on the input parameters, the algorithm generates a warehouse topography, including totes, floors, shufflers, racks, crosses, and stations. The user can adjust specific simulation settings, such as shuttle count, percentage of free racks, deviation, station time, and box requests. After setting the parameters, the simulation produces a topology summary, a graph, and a 3D video render of the warehouse. Support information, such as a tech support number and FAQ icon, is accessible if issues arise. The session concludes with instructions for the employee to thank the client and collect contact info, offering options to access the FAQ or start with a new customer. The TV screens display the Martistel logo during the registration stage and show the results during the Data and Settings stages, ensuring that personal data is not publicly visible. The final screen for clients includes Martistel’s contact information and a QR code.

In working on the interface, we’ve made several crucial design decisions, such as limiting the scope of settings that could be adjusted by the user to preserve the simulation, updating the 3D renders to conform with the branding identity and protecting the user’s privacy by limiting the information shown on the TV screens during the registration stage when sensitive information can be provided.

Process

Our collaborative process with Martistel and other partners involved several key phases:

1.
Briefing and Discovery

We conducted a thorough briefing with Martistel to understand their goals, target audience, and brand identity.

2.
Production Visit

We traveled to Dubai to meet the founders, understand the company’s culture and witness Martistel’s production processes firsthand, gaining valuable insights into the website’s content and design.

3.
Kick-off and Synchronization

We aligned our efforts with the client and the branding bureau to ensure a cohesive brand experience across all points of contact.

4.
Sketching, Wireframing, and Design Concept

We developed initial sketches and wireframes and evolved them into a comprehensive design concept.

5.
Scaling and Refinement

We meticulously scaled the design concept to all pages, incorporating real photos and videos of Martistel’s production process. At this stage, we also made sure that all interactive elements, animations and the design system were ready for rapid prototyping and transition to development.

6.
Front-End and Back-End Development

We simultaneously developed the back end, including feedback forms and form field validation, and implemented the front-end design. We prioritized responsiveness and performance across different devices to be used at the conference and ensured full compatibility with Safari, a browser that is notoriously picky about animations. Doing all of this under time pressure was made possible by 10 years of experience in the React.js framework and a slate of in-house developed solutions.

7.
Optimization and Testing

Given the short timeframe, we had to assign the whole team to testing and double-checking all of the changes applied to the website. With this approach, we were able to reduce the likelihood of bugs to zero and be confident in the results delivered to the client.

Results

The result is a visually striking, user-friendly website that showcases the scope of Martistel’s technological achievements and ambitions and effectively communicates the brand identity. It seamlessly integrates with their physical presence and provides a cohesive experience across all channels.

In addition to the website, the iPad application that simulates the warehouse experience strengthens their digital presence further, facilitates live communication with their clients and will be used in further conferences and events.

Start a project!
Start a project 🏄🏾
We use Cookies just because everyone does. Feel free to accept, it’s not a big deal
Accept