The Olarm app is how customers arm, disarm and check their alarm from their phone. The app squad inherited an app that worked but felt dated, and were tasked with making it more user friendly and modern while keeping it familiar.
I had just joined Olarm as a designer in the marketing department, which was still being built, and I helped the squad redesign the key screens to give them a base to build the rest of the app on.
4
Core screens redesigned as the base for the rest of the app
3
Design rounds to get the home screen right
45+
The age of most of the app’s users
Live
Shipped. It’s the app customers use today
The brief
More user friendly, more modern, but still familiar. Customers knew the old app, so the redesign had to feel like an upgrade, not a different product.
Who uses it
Homeowners and businesses with an Olarm-connected alarm, and the secondary users they share it with. Most are over 45.
My role
UX and UI for key screens: the area cards, Zones, Activity and the Cancel Responder set-up. These became the base the app squad used to redesign the rest of the app.
Where it is now
Shipped. The redesigned screens are what the Olarm app looks like today.
01 · Area cards Shipped
The home screen, in three rounds
The area card is the app’s main screen. It’s where the alarm is armed and disarmed, and where PGMs (outputs wired to things like a garage door or a light) are switched, if they’ve been set up.
00 · Inherited01 · Start02 · Improve03 · Final
Round 1 went modern and lost familiar
Four grey circles with near-identical shield icons look clean, but Arm, Stay and Sleep become hard to tell apart at a glance. White text straight on a photo is fragile too.
The final brings familiar back
The colours customers already knew: green Disarm, red Arm, amber Stay and teal Sleep, now with a distinct icon for each.
State you can read: name, area, state and time on a frosted label, with a chevron to open the area.
The current mode is greyed out, so you can’t choose the mode you’re already in.
Connection health instead of a timezone: mains power, 4G and Wi-Fi show whether the alarm can reach you.
The red Panic tab in the bottom bar was added after the redesign shipped.
02 · Zones Shipped
Colour only where it matters
Zones are the doors, windows and sensors on the alarm. The original painted whole rows yellow or blue and gave every row a Bypass button and a settings gear, so twelve zones read as a wall of noise.
Closed zones stay white. Only active or bypassed zones get colour, so the ones that need attention stand out.
Search and filters, including a new Problem tab.
The zone number moves into the status dot, and a camera icon marks zones with a linked camera.
“Closed · 3 hours ago” follows the same pattern as “Disarmed · 3 hours ago” on the area card.
OriginalRedesign
OriginalRedesign
03 · Activity Shipped
What happened, in plain words
Every row of the original said the same thing, “Area 1 – Main Area”, with the event in capitals underneath, so there was nothing for the eye to catch on.
A headline first: “Main house Armed”, then who did it.
Colour-coded by type: red for alarms, amber for reminders, blue for bypasses, green for disarms.
More than arming: alarms, reminders, door unlatches and power failures live in the same feed, with a camera icon when there’s footage.
A date picker and Load more replace the endless scroll.
04 · Cancel Responder Shipped
Explaining a duress code without a wall of text
Cancel Responder lets you cancel an alarm you set off by mistake, or quietly call for help if someone is forcing you to.
You pick a secret emoji. Choose it, and the alarm is cancelled. Choose the wrong one, and a silent panic signal goes to your armed response.
The original explained all of that in one dense paragraph inside a modal, announced by a yellow banner on the home screen.
Original · bannerOriginal · set-up modal
01 · IntroWhat it is, in two lines, with Do this later for anyone midway through setting up a device.
02 · How it worksThe duress mechanic as three short rules instead of one paragraph.
03 · PickPick the secret emoji. The choice fills navy, then confirm.
04 · DoneA toast confirms it and drops you back on the home screen.
Cancel Responder was designed at the same time as the area cards, so the screens behind the sheets are from round 1.
Launch
A rocky start, then it stuck
Result
The redesign wasn’t loved at first. Most of the app’s users are over 45 and didn’t like the change, but they warmed to it very quickly. It’s the app Olarm customers use today, and the base the app squad built the rest of the app on.
The takeaway
Modern got the redesign started. Familiar is what made it ship: keeping the colours and patterns customers already knew, and fixing everything around them.
