Project 3



UX Visual - Dashboard


Company: Autonomic
Teams: UI team
Duration: 4 months
Target devices: desktop and tablet
Role: UX and Visual Design


What is the TMC Dashboard?


The TMC Dashboard is a fleet management demo application that displays real-time vehicle data, including geolocation and status. It was built to demonstrate to customers the possibilities of how they can use TMC services and APIs.


Project description


This was the first UI project created before Autonomic was acquired by Ford. The main objective was to showcase to future customers the types of solutions they could build using TMC APIs.
In this project, users can see:

  • The real-time locations of vehicles

  • The current status of each vehicle

  • Driver behavior patterns



Challenges and solutions


Mini Map The first challenge was scalability and visibility. There are millions of vehicles spread all over the world. The main problem was how to represent vehicle locations intuitively, highlight vehicles with issues, and allow users to quickly navigate to a specific vehicle.
To solve this, I leveraged my previous experience in the game industry and introduced a Mini Map.
The Mini Map provides an overview of vehicle locations and displays the density of vehicles using clustered icons. It also includes a navigation box that allows users to quickly adjust the main map view.



Route and behaviors The second challenge was displaying multiple layers of data on the map and allowing users to drill down quickly into specific events, such as:

  • Harsh accelerations

  • Hard braking

  • Speed violations

  • Off-route incidents

To address this, I designed an interactive table that allows users to select specific trips and compare driving patterns alongside the precise locations where events occurred. This enables faster insights and more informed decision-making.


Vehicle Details

The third challenge was giving users easy access to detailed information about each vehicle, including:

  • Current status

  • Geolocation

  • Analytics and history

Even though the amount of information was large, it was important that users could quickly scan issues and move seamlessly between vehicles to compare data.

To address this, I designed a pop-out panel with three tabs, defaulting to the Vehicle Overview tab when a vehicle icon is clicked on the map. This approach keeps key insights easily accessible while maintaining a streamlined user experience.

I also organized the metric data into logical groups and used visual elements to make it easy for users to quickly scan vehicle statuses, mechanical issues, and events in the latest trip.



Process Steps


1. User flow



2. Wireframes


3. Prototypes