01 · Overview

Client	Advanced Professional Security — privately owned, GSA-contracted, operating since 2008 from Phoenix, AZ and Denver, CO
Role	Sole designer — content audit, IA, wireframes, visual language, every page design, handoff
Project type	Client work — full website redesign
Surface	26 desktop pages, 1440px artboards. Longest page (homepage) runs 11,321px
Platform	WordPress, with LearnDash for guard training and BuddyBoss for the staff community behind the login
Tools	Figma
Status	Delivered — desktop complete, mobile outstanding

02 · The brief

APS is a real operation. Roughly two decades in service, licensed and bonded in two states, a GSA contract holder, an A+ rating with the Better Business Bureau, and its own training pipeline feeding its own hiring.

The website did not say any of that quickly enough.

The content was not the problem — the client had spent years refining how they describe fire watch versus mobile patrol, and none of it was going to change. The brief was narrower than a normal redesign, and harder for it:

Same words. New site. Make a stranger understand, in the first screen, that this is a serious, licensed, two-state operation — and make it just as easy to apply for a job as it is to request a quote.

Two audiences, one content set, twenty-six pages, one designer.

03 · Goals and constraints

Goals

Credibility above the fold. Licensing, coverage, response capability and scale visible before any scrolling.
Make services scannable and distinct. One card per service line, consistent anatomy, no wall of text.
Give every sector its own page-level proof instead of a paragraph inside a shared list.
Split the two funnels. Buying a guard force and applying to be one are opposite intents that had been sharing a navigation.
Design patterns, not one-off pages. Anything designed once had to be reusable across the remaining twenty-five.

Constraints

Content stays. Every word on the live site had to survive. Structure and hierarchy had to do all the work that rewriting normally does.
The palette was fixed by the logo. Ink #040707, gold #F6BC15, blue #169FDA. Every decision across 26 pages had to be made inside those three colours.
One designer, 26 pages. Page-by-page design guarantees drift at that count.
No existing style guide. Nothing to inherit — no tokens, no component library, no documented rules.
Benchmark: GardaWorld. The client pointed at large-scale security firms as the tone to match — calm, institutional, photography-led.

04 · Who actually uses this site

Facility & property managers

Comparing vendors under time pressure. Needs licensing, coverage area, response capability and a way to request a quote — fast, and preferably without reading three paragraphs first.

Needs: proof, scope, a quote button.

Public-sector & regulated buyers

Government facilities, healthcare, transport, food and agriculture, construction. Buys against compliance requirements, so needs sector-specific evidence rather than a generic capability list.

Needs: sector evidence, standards, a named contact.

Guards and trainees

Often on a phone, often mid-shift. Wants to know what the role involves, what training is required, and how to apply — in as few taps as possible.

Needs: open roles, the training path, apply.

05 · Information architecture

Restructuring came before any visual work. Grouping 26 pages this way is what made four templates enough to cover the whole site — and what separated the sales path from the recruitment path.

Homepage → Company — Who We Are, Experience, Why Choose APS, Capabilities, News, Contact → Services — 7 pages → Sectors — 6 pages → Careers & Training — 6 pages → Quote request → Online application → LearnDash training behind login

View flow structure

flowchart TD
    H["Homepage"] --> C["Company — Who We Are, Experience, Why Choose APS, Capabilities, News, Contact"]
    H --> S["Services — 7 pages"]
    H --> X["Sectors — 6 pages"]
    H --> K["Careers & Training — 6 pages"]
    S --> Q["Quote request"]
    X --> Q
    C --> Q
    K --> A["Online application"]
    K --> L["LearnDash training behind login"]

Cluster	Pages	Template	Leads with
Company	Home, Who We Are, Experience, Why Choose APS, Capabilities, News, Contact	A — editorial	Credibility
Services	Integrated Security Service, Unarmed / Armed Guards, Fire Watch Guard, Mobile Vehicle Patrol, Access Control, Government Facilities Security, Security Guards Arizona	B — service	Scope
Sectors	Healthcare & Public Health, Commercial Facilities, Construction, Transportation Systems, Food & Agriculture, Sectors overview	C — sector	Relevance
Careers & Training	Careers, Job Board, Apply Online, Pre-Assignment Training, On-the-Job Training, Training	D — funnel	The next step

Two structural decisions worth naming:

Services and sectors were split apart. The old site treated them as one list. They answer different questions — a service says what we do, a sector says who we do it for. Separating them gave each its own template, its own card style and its own cross-link block.
Careers runs as a parallel site. Careers, the job board, the application and both training pages sit in their own navigation branch. An applicant never has to pass through a sales page to apply, and a buyer never lands in a hiring funnel.

06 · Design direction

Colour

Three colours, straight from the logo, with rules that keep them from becoming five. Ink is the surface. Gold marks exactly one word in a headline or one action in a section — never both. Blue is informational only: breadcrumb bar, eyebrows, the occasional full-width band.

Type on gold is always ink, never white. Photography carries the warmth, so a fourth colour is never needed.

Typography

Uppercase display headings with wide tracking — institutional rather than loud. One word per headline may take gold: PROTECTING PEOPLE, PROPERTY, AND POSSIBILITY. Eyebrows sit inside gold or blue brackets, small and letter-spaced.

Body copy stays sentence case at a comfortable measure. The display face does the shouting so the body never has to.

Section rhythm

No two adjacent sections share a background. Long pages alternate light, ink and full-bleed photography, with a single gold block reserved for the one claim that matters most on that page.

That alternation is what keeps an 11,000px homepage readable without any decorative filler between sections.

07 · The eight blocks the site is built from

Every page is assembled from the same small set of sections. Designing them once — and reusing them exactly — is what keeps 26 pages consistent with one designer on the file.

Block	What it does
Bracketed eyebrow	Opens every section — gold on light, blue on dark. The smallest possible signal that a new idea has started.
Blue breadcrumb bar	A full-width strip directly under every inner-page hero. Orientation on a 26-page site, and a visual full stop after the photograph.
Stat block	24/7 dispatch, 100% licensed officers, two states served, 40+ hours of documented training. Overlaps the hero photograph so proof arrives before any body copy.
Track-record bento	Numbered panels — dark, photographic and gold — carrying the three heaviest claims: 18+ years in service, dual-state licensing, GSA contract holder.
Split image / text band	The workhorse. Alternates sides down the page and switches between light and ink so a long article never reads as one block.
Quick-quote form	Guard type, headcount, date needed, total hours. On every service and sector page, so a quote is never more than one scroll away.
Dual CTA band	Two buttons, always the same order: Online Application for applicants, Request a Quote for buyers. The two funnels, side by side, on every page.
Newsletter strip	Job openings and safety bulletins — one capture serving both audiences, placed above the footer sitewide.

08 · Page-by-page decisions

Homepage — "Protecting people, property, and possibility"

What it does: A photographic hero with the stat block overlapping the image, then the numbered track-record bento, three capability cards, the credentials checklist beside GSA and BBB recognition, a four-tile sector grid, a client quote, the three coordinated service lines, the training story, and finally the quote-or-roster contact block.

Why that order: It is the order a buyer's questions actually arrive in — are you real, how long have you been doing this, what do you do, do you know my sector, who says so, what does it cost me to start. Nothing above the fold asks for a decision except the one primary button.

The bento is the section I would defend hardest. A list of three credentials reads as a list. The same three as a numbered grid — dark panel, photograph, gold panel — reads as a composition, and a visitor takes all three in without reading any of them in sequence.

Verdict: Strongest page on the site. It was also rebuilt twice, for reasons in section 10.

Who We Are — the company page

What it does: Hero with an overlapping stat panel, a blue pull-quote band carrying the brand line, four cards routing to Arizona / Capabilities / Experience / Why Choose APS, alternating image-and-text rows for what the promise means in practice, a field gallery, then the gold technology block.

Why: This is the page a buyer opens when they have decided APS is plausible and want to know whether they are big enough. The four routing cards matter more than the copy — this page's job is to hand the visitor onward, not to hold them.

A revision worth recording: the first version put the photo collage inside the hero and stacked most of the content near the top. It was cut back to a shorter hero with the gallery pulled out into its own section, because a hero carrying six jobs carries none of them.

Experience — "Experience the APS difference"

What it does: Photographic hero, blue breadcrumb, two alternating split bands carrying nearly two decades of history, a gold emphasis block for the partnerships claim, and four numbered cards defining the track record — government operations, transportation and critical infrastructure, professional partnerships, backed by innovation.

Why numbered cards rather than prose: the four areas are the answer to "have you done my kind of work". Numbering them makes them countable, and countable claims feel checkable in a way a paragraph does not.

Service template — used by all seven service pages

What it does: Hero naming the service with gold on the operative words, scope first, then higher-risk environments, a full-width blue band for the settings it covers, training and supervision, why APS, and the same quote block that closes every page.

Why scope leads: someone on a service page has already decided they need something; the open question is whether this specific service covers their situation. Answering that before any sales claim is what earns the scroll to the training section.

Sector template — used by all five sector pages

What it does: The sector is named in gold inside the headline itself (HEALTHCARE security), a centred intro states the compliance promise, then an ink band pairing risk context with control-room imagery, a second band on continuity and disaster response, and the standard quote block.

Why the compliance answer comes first: a regulated buyer arrives with one question — do you understand my constraints. Leading with capability instead would answer a question they had not asked yet.

Verdict: structurally right, thinner than the service pages. See section 10.

Careers & training — the second funnel

What it does: A light hero, benefit cards, the training path as a stepped timeline, job board rows, and a short application form. Careers sits in the main navigation in gold — the only coloured item in the nav — so it is findable from every page without competing with the primary sales CTA.

Why it is separated so hard: these six pages are the intake for the operation the rest of the site is selling. Mixing them into the sales path means every applicant sees a quote form and every buyer sees a job board. Both audiences get worse.

09 · What worked

The stat block in the hero. Coverage, licensing, states served and training hours land before any body copy. It is the single change that most closed the gap between how serious the operation is and how serious the site looked.
Splitting services from sectors. Two templates instead of one shared list. Each cross-links to the other, so a healthcare buyer can walk into mobile patrol and back out again without returning to the homepage.
"Get a quote, or get on the roster." One contact block, two funnels, stated in the client's own register. It solved a structural problem with a sentence.
Four templates for 26 pages. Later pages became assembly rather than invention, which is the only reason the count was achievable alone.
The three-colour discipline held. Twenty-six pages, no fourth colour, no drift. The rules were never written down — but they were followed.

10 · What did not work

Problem	Why it actually hurt	What it should have been
No written design system	The patterns are consistent, but they live in the file and in my head. Nothing is named, nothing is tokenised, and a developer picking this up has to infer every rule from the artboards. Consistency that cannot be handed over is a personal habit, not a system.	A tokens file and a documented component sheet, built before page four rather than never.
Desktop only	No mobile artboards were drawn. The careers funnel is the part most likely to be opened on a phone by a guard mid-shift — and it is the part with no designed mobile state at all. The one screen I did not design is the one that audience sees first.	At minimum, mobile layouts for the homepage, one service page and the whole careers branch.
The homepage was built twice	The first version was cluttered because I started laying out pages before the section rhythm was fixed. That is a self-inflicted rebuild, and on a 26-page project it is expensive.	Fix the repeating blocks and the rhythm first. Pages second.
Three carousels	Reliability, service environments and training all hide content behind arrows. Carousels reliably lose everything past the first slide — which means proof I deliberately gathered is proof most visitors never see.	Grids. If it is worth showing, show it.
An eight-field quote form	Name, phone, email, guard type, headcount, date, total hours, comments — repeated on every page. Excellent for the sales team, hostile to a manager checking three vendors on a Tuesday.	Three fields to start the conversation, the rest after first contact.
Sector pages are thinner than service pages	Healthcare carries two content bands where a service page carries five. A buyer arriving from a sector page gets less than one who arrives from a service page — and sectors are how regulated buyers search.	A sector-specific proof block: what has actually been secured in that sector, and against which standards.
No measurement plan at handoff	I proposed what to track — quote submissions by page, application starts, scroll depth on service pages — but nothing was instrumented before delivery. So the redesign's effect on enquiries is currently an opinion.	Agree the four numbers, and a baseline, before the first page is designed.

11 · What it taught me

Fix the rhythm before the pages. Repeating blocks first, layout second. The rebuild cost more than writing the rules would have.
Consistency you cannot hand over is not a system. The discipline was real; the documentation was not. Those are different deliverables and only one of them survives handoff.
Structure can replace rewriting. Not a word of copy changed. Every improvement came from ordering, weighting and separating what was already there — which is a more useful skill than it sounds.
Two audiences need two funnels, stated out loud. "Get a quote, or get on the roster" did more structural work than any layout decision on the site.
Mobile is still not a later phase. Second project running where the screen I did not design is the one a real user opens first.

Browse all work ↗Discuss a project ↗

Muawaz World — Muawaz Ur Rehman’s interactive portfolio