In developmentApp UI, Web Design2025

Brand and app for a home security device

Home security that stays quiet in black and silver, and turns red when it counts.

Role: Brand & UI designer in the Wardex team
Client: Wardex · home security device and app
Scope: Brand identity, Mobile app, Web control centre

Results

14 screensof the app, including the activity log and settings
3 stepsto add a device: pair, join Wi-Fi, then name it
6 panel screensof the web control centre, from the overview to settings
4 icon versionsin the file, from a purple glow to the black square

Wardex is a finger-sized home security device with a phone app. In a small team building the device, its backend and the app, I designed the brand, the app and the web control centre. The result: a logo, an app icon, a brand and UI guide, a finished set of app screens, and six control centre screens.

Introduction

Quiet on a normal day, impossible to miss on a bad one.

Wardex sticks to a door or a window, senses it opening, sounds its own speaker and alerts the owner's phone. Most of the time there is nothing to report. The app had to stay calm while everything is fine, and make an alarm impossible to miss.

Constraints

iPhone screens, in one dark theme
Shared devices: several people each, one of them the owner
Pairing from the phone, over NFC or a QR code
Battery powered devices, on Wi-Fi or a direct connection

The app at a glance: setup in green, an alarm in red, everything else black and silver.

Brand

One letter carries the brand: X in a shield.

The wordmark sets WARDE in Inter Bold and gives the X its own inline face, inside a shield. The app icon drops the letters and keeps the shield, and the splash stretches the X across the whole phone.

One of four versions in the file: the double shield on a purple glow, with no X.

The X behind the shield as two crossed bands of light, tinted purple.

The black square: the silver shield with the X in white light, the look the splash repeats.

Brand

Silver light#FFFFFF
Silver dark#999999
Black#000000
Purple#AD46FF

States

Green#00BC7D
Light green#00D492
Red#FB2C36
Light red#FF6467
Blue#51A2FF
Yellow#FDC700

Type

Wordmark and appInterWARDE in Bold, and every title, label and line of text in the app
The XNordique Pro InlineThe X of the wordmark, and the bands of light on the icon and the splash

Adding a device

Pair, join Wi-Fi, give it a name.

All three screens sit under a three-part progress bar and glow green, the colour the app gives to setting up.

Step one offers two ways to pair, NFC or a QR code, with Scan QR Code in green.

Step two: the device joins Wi-Fi from a list, with the chosen network outlined in green and ticked.

Step three names the device and gives it a place, the two things every card shows later.

Devices

Identical cards make the one in alarm stand out.

On Home every card answers the same questions in the same places. Activity logs each day's events with who caused them, a person or the system, and a device's Users tab shows who shares it and who owns it.

Same questions, same places on every card; the alarmed one turns red under a glow kept for alarms.

Several people share a device and one owns it: the Users tab shows both and adds someone.

Alarm

Turn Off Alarm sits where Trigger Alarm was.

Between calm and alarm only three things change on the device page: the tint, the status and the first action. Share Access and Disable Device stay where they were.

At rest: status ON, battery, door and connection, and Trigger Alarm as the first action.

In alarm: a red glow, the status ALARM, and Turn Off Alarm in the slot Trigger Alarm held.

Control centre

Same system, denser screen: every device in one table.

The phone is for one person with a few devices in one place, the web control centre for whoever looks after many of them across several sites. The system does not change, only the density: every list is a real table with filters, devices by state, logs by type, users by role.

Four counters before any click: how many devices, how many online, how many alarms, whose battery is going.

Five more screens of the panel

Key decisions and their cost

Black and silver, with colour kept for states
The interface is black, white and silver. Colour appears only when it says something about a device: green for a device that is on and for setup, blue for everyday events, yellow for a low battery, red for an alarm.
Trade-off Red also marks destructive actions, like Delete Device. Weight tells the two apart: an alarm tints a card or the whole screen, a destructive action is red text only.
An alarm takes the whole screen, not a badge
An alarmed device changes more than its badge: its card on Home turns red under a red glow, and its own page glows red with the status set to ALARM. There Trigger Alarm becomes Turn Off Alarm in the same slot: the way out of an alarm is where the way in was.
Trade-off The glow says something is wrong, not which device, so the red card still has to point to it. A button that changes meaning in place relies on its label and the red tint.
Three short steps to add a device
Pairing is split into three screens under a progress bar: connect over NFC or a QR code, join Wi-Fi, then name the device and give it a place and a colour tag.
Trade-off Three screens take longer than one form, and naming comes last. It makes Front Door and Garage Gate readable on Home, so it stays, with only the room name optional.

Outcome

Wardex has a brand and a finished set of app screens in one dark system, from the splash to the alarm.

What I learned

Keeping colour for states leaves the one red card on Home with nothing to compete with.
Drawing the alarm as a whole screen, not a badge, forced a clear answer to what changes and what stays in place.

Next in Mobile apps · 2 of 4Sl8

App, Mobile, Social, Crypto