Roteirizador

The Roteirizador is a project developed to meet the needs of users of the benefits network managed by Fitcard, offering a practical and convenient solution for public agency drivers who use the conductor voucher. The goal was to provide precise and relevant information to users based on route selection, and through this, display details such as location and cost of tolls, accredited public agency establishments near the route, and travel time.

The challenge was to integrate three different services, the Google Maps API and the Maplink API, a company specializing in geolocation solutions, and finally, the Fitcard API, to search for accredited establishments on a given route and accurately display the desired information on a map.

The ideation process of the interface was based on displaying all the necessary information on a map that occupied the entire user's screen, commonly seen in services with similar solutions.

The route selection by the user involves complex micro-interactions, such as selecting the type of vehicle (car, motorcycle, truck, and bus) and the number of axles, types of establishments (such as gas stations or restaurants), and specific route options, such as avoiding tolls, tunnels, ferries, and bridges, as well as the option to calculate the return trip.

Through some wireframes, prototypes and user testing, the final interface was validated.

Upon entering the website, a map occupying the entire user's screen with the approximate location of the user (geolocation) is displayed. On the left side, the user can perform all actions related to their route, such as choosing the origin and destination, type of vehicle and number of axles, fuel calculation, and other add-ons.

Emotional Design

After performing the search, it's normal for the information to take a few seconds to appear on the screen, as the system searches three distinct APIs: Google Maps (to draw the route on the map), Maplink (to display toll information), and Fitcard (to search for accredited establishments).

To avoid a lengthy waiting process and provide feedback to the user, I used a loading animation based on Donald Norman's Emotional Design, with the aim of creating a reflective design experience. The displayed animation features an interpreter traveling on a road with lanes, conveying the idea of a process in progress.

After the information is loaded, tolls and accredited establishments present in the route are displayed on the map, along with a summary of the route defined by the user in the upper left corner, highlighting the final value after calculations.

In addition, when clicking on a map marker, information about the establishment is displayed:

The project was very well received by users, quickly becoming one of the main travel planning tools for public agencies that are clients of the company. Through its intuitive interface and advanced route calculation features, the Roteirizador allowed users to optimize their routes and save time and money on their trips.