- Client
- American Burglar Alarms
- Role
- Rebrand, UX/UI Redesign & Front-End Build
- Timeline
- October 2026 · on staging
- Year
- 2026
- Category
- Web Redesign
Overview
American Burglar Alarms (ABA) is a family-run security company in Indian Trail, North Carolina. It installs and monitors alarms, cameras, audio and video, and home automation for homes and businesses around Charlotte. Its live site at americanburglaralarms.com is a template brochure: it lists the services and asks visitors to request a quote.
We moved ABA onto the security storefront platform we had already built (Expo Web, React Native Web and Firebase), rebranded it, and redesigned every public page on one theme. The redesign adds pages to build a system, compare monitoring plans and shop packages, in light or dark mode. The redesign is on a private staging site and is not public yet; the screenshots on this page compare it with the live site, both captured on 28 October 2026.
Why
A local security installer sells trust. American Burglar Alarms’ live site listed its services and asked for a quote, but it gave visitors nothing to do on their own: no way to see a system, a package or a monitoring plan before calling.
The brief was to make a small Indian Trail company look as dependable as the systems it fits, let people start building a system on the site, and make every page easy to read on a phone, in daylight or at night.
The challenge
American Burglar Alarms installs and monitors security systems around Indian Trail and Charlotte, NC. Its live site is a template brochure: a faded photo behind a centred headline, red blocks for each service, and a long quote form as the only next step. There is no way to choose a system or a monitoring plan on the site.
What made it hard
- The first screen is a faded photo with two small logos and a centred serif headline; the only action is a small Contact Us button.
- The quote form is the main path for every visitor: a long single-column form with a security-check sum, repeated on several pages.
- There is no way to choose a system, a package or a monitoring plan on the site. Every sale starts with a call or a form.
- On a 390px phone the home page is about 7,350px tall (measured 28 October 2026), with a floating Call Now pill and a social button sitting over the content.
- The phone menu is a white list of small red links.
- The footer stacks a map, a red hours panel and a strip of partner logos at different sizes.
Approach
Make a small local installer look as dependable as the systems it fits, and let visitors do more than ask for a quote. Every colour comes from one set of theme tokens, so light and dark mode and every page stay in step, and contrast is checked by a test rather than by eye.
We did not measure the live site’s speed, contrast or accessibility, so this study makes no claims about them. The new site runs on staging; its checkout was not run end to end there.
Process
- Audit: Captured the live site at phone and desktop widths. The challenges above come from those captures.
- Rebrand the platform: Moved the brand, phone, address, map and socials into one brand config and removed the previous brand’s content, so the code reads as American Burglar Alarms. (Some page copy that is stored in the shared database still needs editing in the admin.)
- Tokens first: One set of CSS variables for surfaces, text, inputs, header and red accents. A codemod replaced 952 hard-coded colours with tokens, with its own test.
- Light and dark: The site follows the visitor’s system theme, with a toggle in the header that is remembered, and a script that sets the theme before the first paint so it never flashes.
- Contrast as a test: A unit test pins every text and background token pair to WCAG AA. A browser audit then checked text on solid backgrounds across 19 public routes in both themes at 375px and 22 routes at 1440px: zero failures, and no horizontal scroll on a phone. Text over photos and video is outside what the audit measures.
- Review and stage: Two review passes on the code, then a staging site on Firebase Hosting with noindex and security headers, checked on staging after each deploy.
What we built
- Live-camera hero: Before: a faded photo with a centred headline and a small Contact Us button. After: a camera-style frame (LIVE · CAM 01, location and clock) behind a bold headline, with Build a System, a free monitoring trial and Shop all products as the next steps.
- Header and navigation: One header with the phone number as a red call button, a theme toggle and dropdowns for Shopping and Support that work with the keyboard. It hides when you scroll down and comes back when you scroll up.
- Full-screen phone menu: Before: a white list of small red links and a floating Call Now pill. After: a call button and logo in the header, and a full-screen numbered menu with a Talk to a live agent button, sign-in and the theme toggle. It locks scrolling, traps focus and returns it on close.
- Why ABA and how it works: The service blocks and long text became four numbered reasons to choose ABA, then a three-step how-it-works section beside a map of the Indian Trail office.
- Build a System: A step-by-step builder: premises, system type and components, with a progress rail, added to the cart at the end.
- Plans, packages and products: Monitoring plans, packages and a product catalogue, rebuilt on the same tokens with a shared page header and quick links between them, plus a cart drawer that works as an accessible dialog.
- Contact and support: Before: a long quote form. After: a split page with the address and phone beside a short message form, and a support hub with phone support, a message link and setup videos.
- Footer: A red call-to-action band, then one dark footer with the company summary, every page link, the address and phone, and the legal pages.
- Lighter pages: The contact photo went from 22 MB to 697 KB, and a 96 MB fallback video was replaced with a 29 MB 720p version, halving the web build from 138 MB to 71 MB.
How it was built
The site runs on the security storefront platform we built earlier (Expo Web, React Native Web and Firebase). The brand, phone, address, map and socials live in one config, and every colour comes from CSS variables, so light and dark mode follow the visitor’s system and a pre-paint script stops the theme from flashing. A codemod moved 952 hard-coded colours onto those tokens.
A unit test pins each text and background pair to WCAG AA, and a headless-Chrome audit checked the public routes in both themes at 375px and 1440px with zero failures. The header, phone menu and cart drawer were rebuilt for keyboard and screen-reader use. The before and after captures were taken on 28 October 2026: the live americanburglaralarms.com and the staging redesign.
Stack
- Expo Web + React Native Web: The storefront and admin
- styled-components + CSS variables: Theme tokens for light and dark
- Firebase: Auth, Firestore, Functions and Hosting
- Stripe: Checkout from the platform (not run on staging)
- node:test: Contrast, codemod and URL-safety tests
- Headless Chrome (puppeteer): Contrast audit and before/after captures
Outcomes
- 0: WCAG AA contrast failures in our audit (text on solid backgrounds; 19 routes in both themes at 375px, 22 at 1440px)
- 0: Horizontal scroll on a 375px phone
- 952: Hard-coded colours moved onto theme tokens
- −97%: Contact photo, 22 MB to 697 KB
- 138 → 71 MB: Web build size after replacing the fallback video
Wins
- Zero WCAG AA contrast failures in our audit of text on solid backgrounds, in light and dark, plus a test that pins the token pairs.
- A full-screen phone menu and a call button in the header instead of a floating pill over the content.
- Pages to build a system and compare monitoring plans (on staging), where the old site only had a quote form.
- The contact photo cut from 22 MB to 697 KB, and the web build from 138 MB to 71 MB.
Hard parts
- One brand config: The platform carried another company’s name, numbers and content. Moving every brand detail into one config, then searching the code for leftovers, is what makes the code read as ABA. Copy stored in the database is edited separately in the admin.
- Two themes, one set of tokens: Hundreds of hard-coded colours had to become tokens before dark mode could work everywhere. A codemod did the swap and a test checks it.
- Red that passes contrast: Brand red on white and white on red both had to pass AA. The red was darkened slightly and a separate red for text was added for each theme.
- Capture the real before: The before shots are the client’s live site on the day, not an older build of our own code.
Services
- Web Redesign
- Rebrand
- Design System & Theme Tokens
- Light / Dark Mode
- Mobile-First UX
- Accessibility