I thought I was designing a map… until I learned I was actually designing a system.

The requirement

While working on a client’s fleet management application, I ran into a problem that changed how I think about product design. The requirement sounded simple: track vehicles accurately and notify the operations team when they arrive at or leave important locations.

My first instinct was to design a beautiful map. I opened Figma and started building one from scratch, and experimented with Figma Make to create an interactive version. It looked good, but it could not answer the questions the business actually cared about.

Has the vehicle arrived? Has it left the customer’s premises? Did it enter a restricted area? How do we notify operations automatically? How do we keep the driver experience simple while giving admins full visibility?

That is when I realised the map was not the product. The behaviour behind the map was.

Discovering geofencing

After days of research, I discovered geofencing: a virtual boundary around a physical location using GPS coordinates. When a vehicle enters, exits or stays within that boundary, the system can trigger notifications, update trip status, record arrival and departure times, alert operations teams and run business workflows.

I was no longer trying to build a map. I was designing how a system should behave.

Thinking like a UX Design Engineer

Instead of only asking how a screen should look, I started asking what event triggers a notification, which user receives it, what happens when GPS accuracy drops, what data should be stored, and how the interface responds while the system processes an event.

The system behind the design

Every interface is backed by a system. Here, a vehicle moves, GPS detects its location, the system checks the geofence, business rules run, the database updates, notifications are sent and the dashboard refreshes. Designing that flow required thinking beyond screens.

The tools behind the feature

The project pushed me to explore Figma for design and prototyping, MapCN for map components, React and TypeScript for the frontend, Supabase for authentication and data, TanStack Query for server state, Zustand for UI state, and Codex and other AI-assisted tools for understanding implementation.

This project changed my approach to design: I now look at the events, rules and data behind an interface as part of the experience itself.