A counter-drone system that finally looks the part

Operators loved how the system worked. It just looked older than the tech inside it. We kept the workflow and redid everything they see.

Role: Product designer via UI Human Factors, sole designer in the final year
Team: Senior design lead (first year), product, engineering
Timeline: ~2 years
Platform: Counter-drone defense, web + field tablets

1 → 8one concept screen grown into an 8-module system
16pxbody text, up from 11 to 12px, tested with ~20 users
~90%design-to-code fidelity, against an 80% target

Why it mattered

Sentrycs finds unauthorized drones and takes control of them, at airports, military bases, prisons and ports. Operators were happy with how it worked. The problem was how it looked: old and generic, for a young company showing off serious tech at conferences. And on field tablets the main text was 11 to 12px, in a system where missing an alert really matters.

The solution

Everything operators already knew stayed where it was. Everything they look at got redone, from the live map to analytics, and it all lives in a style guide the dev team actually used.

After: the redesigned Sentrycs screen — Drag to compare the legacy UI (left) with the redesign (right). Demo data.

Drag to compare the legacy UI (left) with the redesign (right). Demo data.

Same workflow
Same layout, navigation, logic and microcopy. Nobody had to relearn a live defense tool.
Text you can read
16px body text with a 14px minimum on a clean rem scale, checked on both tablet and desktop.
A map language
I redrew drone states, markers and zones to match what's common in the market, then tested them on real terrain.
Glass that ships
The glass effect looked great in Figma and was tricky in code. I worked it out with the developers and ran design QA until we hit ~90%.

What we learned

This one taught me you can give a product a whole new look without making anyone relearn it. Seeing the new design front and center in Sentrycs' own marketing videos still makes me smile.

The problem

Of the two problems, the small text worried me most. This is what operators were reading on field tablets, next to where we ended up.

Before

Drone 3 · DJI Matrice 600

Alt 25.1 m · Speed 15 m/s · Sensor dist. 459 m

11 to 12px core text

After

Drone 3 · DJI Matrice 600

Alt 25.1 m · Speed 15 m/s · Sensor dist. 459 m

16px body, 14px floor

Shown at real size. Operators of all ages read this on a tablet out in the field.

The evidence

The lead designer made the first concept screen. My part was figuring out how that one screen turns into a whole product, and later, as the only designer, getting it shipped.

Keep: the UX operators already trust

Layout & navigation
Operating principles
Microcopy

Upgrade: everything they see

Colors & contrast
A more advanced, modern design
Highlighting what makes the product unique

SimplicityPractical · systemic · operational
EnergyLight · gradient · layered depth
ModernNeon accents · glass · dark

The brief we worked from. Keep how it works and change how it looks. It leans on Tractinsky's research, which found people see beautiful interfaces as easier to use.

One screen, broken into parts

Every module uses the same building blocks. Hover or tap one to see where it sits.

The redesigned Sentrycs real-time screen: satellite map with drone markers and zones, and the sky status and drone detail panels on the right

A style guide made for this product

Generic UI kits don’t come with drone states, no-fly zones or satellite maps, so the style guide had to cover them.

Drone icon states from the Sentrycs style guide: regular, mitigate, focused track, attempt mitigation and intercept, each in four list states and several sizes — **Drone states**Regular, mitigate, focused track, attempt mitigation, intercept. Each in allow-list, block-list, unknown and disconnected, in five sizes.

No-fly and alert zone states: regular, hover, tablet and tablet selected — **Zones, in every state**No-fly and alert zones: regular, hover, tablet and tablet-selected.

Desert satellite background used to test map elements — **Tested on real terrain**Every map element was checked against the kinds of sites customers protect, so markers and zones stay readable on sand, snow, water and rock.

Snow satellite background used to test map elements — **Tested on real terrain**Every map element was checked against the kinds of sites customers protect, so markers and zones stay readable on sand, snow, water and rock.

Tablet sizing note: on the 1920 by 1200 tablet, controls are 48px high, round buttons 56px and icons 24px — **Built for field tablets**On the 1920×1200 tablet: 48px controls, 56px round buttons, 24px icons.

Sentrycs style guide index: foundations, map elements, buttons, navigation, forms, panels, feedback and loaders — **A system the dev team adopted**Foundations, map elements, forms, panels, feedback and loaders, from atoms to complex components.

The result

Usability tests showed the workflow still felt familiar, operators and stakeholders were really positive, and it shipped. Here’s the operator’s main loop on the final screens.

Spot it on the map — The shipped design. Demo data.

Find it in Sky Status — The shipped design. Demo data.

And you can see it in Sentrycs’ own marketing videos:

Why it mattered

The solution

Same workflow

Text you can read