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:

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

Lagos, Nigeria

Loading weather…

Lagos, Nigeria

Loading weather…

Create a free website with Framer, the website builder loved by startups, designers and agencies.