I Thought I Was Designing a Map… Until I Learned I Was Actually Designing a System.
GEOFENCING

While working on a client's Fleet Management application, I ran into a problem that completely changed the way 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?
Design a beautiful map.
So I opened Figma and started building one from scratch. I even experimented with Figma Make to create an interactive version.
It looked good and was useful but not for the geofencing. but gave me an edge View it:
http://setup-river-72121282.figma.site/
But something wasn't right.
The design showed where vehicles were, but it couldn't 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 the operations team automatically?
How do we keep the driver experience simple while giving admins full visibility?
That's when I realized the map wasn't the product.
The behavior behind the map was.
Discovering Geofencing After days of research, I came across Geofencing.
Geofencing is a technology that creates a virtual boundary around a physical location using GPS coordinates.
Whenever a vehicle enters, exits, or stays inside that boundary for a defined period, the system can automatically trigger actions.
Those actions could include:
Sending notifications
Updating trip status
Recording arrival and departure times
Alerting operations teams
Triggering business workflows
Suddenly, everything made sense
I wasn't trying to build a map anymore.
I was designing how an intelligent system should behave. Thinking Like a UX Design Engineer
This was the point where my mindset started changing.
Instead of asking:
"How should this screen look?"
I started asking:
What event triggers this notification?
Which user should receive it?
What happens if GPS accuracy drops?
What data should be stored?
How should the interface respond while the system processes the event?
Those questions weren't just about design.
They were about system design. Understanding the System Behind the Design
One of the biggest lessons from this project was realizing that every interface is backed by a system.
In this case, the flow looked something like this:
Vehicle moves → GPS detects location → System checks geofence → Business rules run → Database updates → Notifications are sent → Dashboard refreshes
Designing that flow required thinking beyond screens. The Technology Behind the Feature
Working on this project also pushed me to explore the technologies behind modern product development.
The stack included:
Figma for product design and prototyping
MapCN for modern map components
React and TypeScript for the frontend
Supabase for authentication and data management
TanStack Query for server state
Zustand for UI state
Codex and other AI-assisted tools to accelerate development and better understand implementation Resources That Helped Me Learn
If you're interested in learning more about geofencing and implementing location-based experiences, these resources were incredibly helpful:
Flutter implementation:
Complete geofencing concepts:
React implementation playlist:
https://youtube.com/playlist?list=PLXpWu84ZnHT8uR6XV4ma-Ec689ewpMeFA
I'd also love to hear how other designers are approaching the shift toward systems thinking and AI-assisted product development. What projects have changed the way you think about design?
https-x.com-yako970-status-2084986848988762310
More