Welcome to Dtroy. My role in this project was User Experience Developer and Designer, which means I was responsible not only for designing the complete interface but also for implementing it using HTML, CSS, JavaScript, and PHP.

The client needed software capable of automatically generating and sending the various documents required for customs clearance when shipping automotive parts from Mexico to the United States, so the development team was very involved throughout the design process.

Wireframing

Both the client and the development team had previously established a clear idea of what the system should do, and the number of users was really small (less than 5), so in this case, there was an opportunity to work with immediate feedback throughout all phases of the design. We started with the wireframes.

One of the most interesting aspects of this system is the automatic generation of documents, which were initially obtained from Tesla’s website, the main client of this company. Many of these documents were sent via WhatsApp among employees or manually downloaded to their computers, leading to a disorganized back-and-forth of documents.

This changed with the implementation of the system, as now each document is obtained through the Tesla API and the Customs Border Protection API, automatically generating, receiving, and sending each document carried by the drivers with minimal intervention from the staff, who only oversee the process.

To achieve this, a traffic light system was proposed to determine the status of each shipment, and by adding flags, the status of which documents are ready and which are missing is visible at a glance, allowing the truck drivers to carry out their routes smoothly.

Here are some interfaces that served as inspiration for the final design:

One of the early designs of the high-resolution dashboard. I begin to integrate Dtroy’s branding, the client’s brand.

To ensure proper responsive design behavior, I created components for all states, allowing me to have control over text-overflow and sizes.

Later on, during user testing conducted on a coded prototype, it was determined that there was a need to apply date and text filters. These filters were directly included in the code. Here is the wireframe that was presented.

Another important feature that was implemented was the automation of the bureaucratic process with the Customs Border Protection. Previously, each document had to be manually entered into the U.S. government portal, but a seamless experience was integrated within the system, eliminating the need to navigate outside the system.

To achieve this, the complete user flow within the Customs Border Protection was analyzed, and for each phase, the interface design was adapted while respecting all the steps. It was essential to comply with the standards throughout the process.

The document resulting from this process is known as the Manifest. Here, I finally present in detail one of the views of the entire system in its final version.