.band — reviews and locations, layout options
Eight treatments for the strip that sits directly under the hero. Every one carries the same
verified facts; what changes is what the band is for.
Four defects found before drawing anything — these are true of the band as it stands
- Nanaimo is missing. The sentence names Victoria, Vancouver, Duncan, Campbell River and
Kelowna — five. The site has six published location pages under
Contact Our Lawyers, and Nanaimo is one of them. This is a real office left off the
homepage, not a wording preference.
- The six offices are prose, and none of them is a link. Every one has its own page. The
band names them and sends you nowhere.
- The Google link is a dead 2019 search URL. The live site's “Read reviews on
Google” points at a copy-pasted results page carrying session parameters from 2019
(
ei=D3LGXP6wOpX99QPiuaawBg). The durable part buried in it is the place id, so
every option here links to google.com/maps?cid=3427224649634314500 instead
— derived from that id, and stable.
- The Google mark is an invented letterform. The replica sets a bold “G” in
Open Sans at 44px. The live site uses the actual
fa-google icon. Every option
here uses the icon.
The rating is a hardcoded string, and nothing keeps it true
4.9 and 173 Google Reviews are typed into a WordPress block. No API, no cache, no
refresh — the number was correct on the day someone typed it and has been drifting ever since.
Every option below repeats it because it is what the site says, but a review count that cannot
update is a number that will eventually be wrong in public. Either pull it from the Places API,
or drop the count and keep the rating and the link.
One colour to collapse. home-v2 paints the dark half with --band-dark #453F39;
the live site uses #423c37, which is the brand's own --brown. The two
measure 1.05:1 against each other — indistinguishable. --band-dark is a
near-duplicate that exists for no reason and is one of the five dark values already flagged in
home-v2. Every option here uses --brown.
What the band could be. It is the first thing after the fold and it currently spends 128px on
one rating and one sentence. B1 just fixes the defects; B2, B3, B4, B6, B7 and B8 turn the offices
into navigation; B3 and B7 give the phone number a home outside the header; B5 says the rating
properly. The heights run 88px to 168px against today's 128px.
B1Baseline, corrected — same shape, four defects fixed128pxThe band exactly as home-v2 carries it, with only the things that were plainly wrong put right: Nanaimo is in the sentence, the Google mark is the real icon rather than an invented letterform, the reviews link points somewhere durable, and the band's colour is the brand brown.
No layout decision here at all — if none of the options below wins, these four fixes should still ship.
Get our lawyers on your team
Headquartered in Victoria, BC with offices in Vancouver, Nanaimo, Duncan, Campbell River and Kelowna, we serve clients from around the world with legal issues in BC Read more
B2Office directory — the six become links128pxThe blurb is replaced by the thing it was describing. All six offices have real pages and the band named five of them in prose without linking any; here each is a link. Same height, and the band stops being decoration.
It drops the sentence “we serve clients from around the world with legal issues in BC”, which is a claim the list alone does not make. That sentence would have to move somewhere — the contact page, or the footer.
Six offices across British Columbia
B3Three parts — reviews, offices, and the phone128pxThe number the whole site is trying to get people to call currently lives only in the header. Here it gets a third of the band, with the free-consultation line the firm already publishes elsewhere. Reviews shrink to a rating and a count.
“Free consultations” is the firm's own line but it applies only to personal injury and estate litigation. It is written that way here; it must not be shortened to a bare “free consultations”.
CALL NOW
250-888-0002
Free consultations on injury and estate matters
B4One dark band — the orange block goes118pxDrops the two-colour split. The orange currently carries the rating simply because it is the loud half; here the whole band is brown and the orange is spent on the stars and the door instead. Ten pixels shorter and considerably calmer under a photographic hero.
The split is on the live site and is one of the few places the brand orange appears at full width. Removing it is a brand decision, not only a layout one.
Six offices across British Columbia
B5Taller — the rating said properly, offices in two rows of three168px4.9 at 52px stops being a footnote. The six offices tile three-across in two rows with a hexagon marker each, so the list reads as a map rather than a sentence. The most confident version of the band.
40px taller than the current band, immediately under a hero that already fills the first screen. That is the whole cost; there is nothing else wrong with it.
Get our lawyers on your team — six offices in BC
B6Hexagon rating badge — the mark carries the number148pxThe rating sits inside the brand hexagon instead of a rectangle of orange, which is the one place in this band where the mark can do structural work. Everything else is a single dark field, so the hexagon is the only bright thing in it.
Uses the character ★ for the stars rather than FontAwesome, because five FA icons at this size crowd inside a hexagon's narrowing sides. If the icon set is ever redrawn as SVG this should follow.
4.9★★★★★
Six offices across British Columbia
B7Compact — everything on one 88px line88px40px shorter than the current band. Rating, six office links and the phone all sit on a single line, so the band becomes a rule between the hero and the practice areas rather than a block of its own.
At 1280px this fits with room to spare, but it is the option with the least slack: a seventh office or a longer phone format would break it onto two lines.
B8Two strips — reviews over offices, each full width144pxStops the two messages competing for the same horizontal line. Reviews get a full-width orange strip, offices a full-width brown one. Each is legible in one pass instead of two columns read in parallel.
16px taller than the current band and it doubles the number of horizontal rules across the page at that point — hero edge, strip seam, strip bottom, then the practice areas.
Round 2 — different forms, not different strips
The eight above are all the same shape: a horizontal band, orange one side, brown the other, rating
left and offices right. These seven change the form. One lifts off the page, one inverts the values,
one uses the brand hexagon at full size, one replaces the sentence with numbers, one adds a
photograph, one draws the offices as a network, and one commits entirely to the orange. The
verified facts and the four defect fixes from round 1 carry into every one.
Two of these ask for something that does not exist yet
- C5 needs a photograph and there isn't one. No office, harbour or courthouse image exists
in the media library at a usable size — the two candidates that appear in the database have
no files on disk. It is drawn as a dashed placeholder, the same way the hero slides are.
- C1 constrains the hero. A card pulled up over the hero covers whatever is in the bottom
of the slide. The three hero photographs have not been taken, so this option is a note to the
photographer as much as a layout.
C4 mixes checked facts with the site's own claims, and that is worth seeing before you like it.
Six offices and twelve lawyers are counted from the database. 4.9 and 173 are typed into a WordPress
block, and “over 160 years” is the practice-areas sub-heading. Setting all five in one
row of identical numerals makes them look equally verified. They are not.
C1Floating card — the band lifts off the page and overlaps the hero~150pxStops being a full-bleed strip. The band becomes a card pulled 46px up over the bottom of the hero, with a shadow, sitting inside the 1280px grid instead of bleeding edge to edge. The first thing under the hero now looks placed rather than stacked.
It puts a hard-edged card over the hero image, so whatever is in the bottom-left of the slide gets covered. The three hero slides do not exist yet — this option constrains how they must be shot.
↓ bottom of the hero, shown so the overlap reads
Six offices across British Columbia
C2Light ground — the whole value structure inverted128pxEvery option so far has been a dark or orange block. This one is white with brown type and hairline rules, and the orange is spent only on the stars and the door. Under a photographic hero it reads as a breath rather than a second heavy band.
It removes the band as a colour event entirely. On the live site this strip is one of two places the brand orange appears full-width; here it nearly disappears, which may be exactly right or exactly wrong depending on how loud the hero above it ends up being.
Six offices across British Columbia
C3Honeycomb of offices — six cells, alternating~174pxThe six offices become six hexagon cells nested like comb, which is the one idea the whole identity is built on and which nothing on the homepage currently uses at this scale. Six divides into a comb cleanly, unlike the five practice areas.
A hexagon is a poor container for a long word: “Campbell River” wraps to two lines inside a 104px cell while the others sit on one. That is visible and it is the price of the shape.
C4Credibility row — five numbers instead of a sentence~140pxTurns the band into the firm's numbers: rating, reviews, offices, lawyers, years. Three of the five are new to the homepage and two of them are counts nobody has to maintain by hand, because the site already knows them.
Two of the five are the site's OWN claims and cannot be verified from here: 4.9 and 173 are typed into a block, and “over 160 years” is the practice-areas sub-heading. Two are verified against the database (six location pages, twelve lawyers). Putting them in one row makes them all look equally checked, which is the risk this option carries. It is also the only option on this page with no Google mark in it — a row of numerals has no room for the icon, so the rating is attributed by the words “on Google” alone.
160+years of combined experience
C5Photograph and panel — the band gets an image200pxThe only option with a picture in it. A landscape of the place the firm is from occupies the left 44%, the rating and the six offices sit on brown to the right. It makes the band a place rather than a set of facts.
The photograph does not exist. There is no office, harbour or courthouse image in the media library at a usable size — the two candidates in the database have no files on disk. This option is a request for a photograph as much as a layout, and it is drawn as a placeholder for exactly that reason.
📷PLACEHOLDER — VICTORIA, WIDEHarbour or courthouse, landscape, the city readable at a glance. 1130×400 minimum.
Get our lawyers on your team — six offices in BC
C6Route line — six stops on one thread~150pxThe offices are drawn as stops on a line rather than a list of chips, with Victoria marked as the head office. It is the only option that says something the others do not: that these six places are a network, not six separate addresses.
The line is a diagram, not a map — the six are evenly spaced left to right and that spacing means nothing geographically. Victoria to Kelowna is a ferry and a day's drive. If it reads as a map it is lying.
4.9173 reviews · on GoogleSix offices across British Columbia
C7Full-bleed orange — one colour, no split128pxThe opposite move to C2. Instead of removing the orange, the band becomes entirely orange — the loudest 128px on the page, and the strongest possible break between a photographic hero and the practice areas below.
White body text on #EF6D3E measures 3.03:1, which fails AA for anything at body size. Everything small here is therefore set at 13.5px SEMI-BOLD or larger, which qualifies as large text at 3:1 — it passes, but only just, and any lighter weight or smaller size in this band breaks it.
Six offices across British Columbia
Round 3 — the head office, five ways
C6 is the only option that says one of the six offices is the head office. Five treatments of that
one detail; everything else on the band is identical in all five.
A correction rides along in all five. The round-2 draft printed “HEAD OFFICE” with
a CSS ::after { content: "HEAD OFFICE" }. Generated content is not reliably exposed to
assistive technology, cannot be selected or copied, and is invisible to translation tools —
which is the wrong mechanism for a fact about where the firm is based. It is real markup in
every option below. Decoration can live in CSS; facts cannot.
The site's own word is “Headquartered”. The live sentence opens
“Headquartered in Victoria, BC…”. These options print HEAD OFFICE because
it fits a 10px tracked label where “HEADQUARTERS” does not, but the two are not quite the
same claim and the wording is yours to settle.
Where they differ, in one line each. h1 makes the marker bigger — a difference of degree.
h2 makes it a different kind of object. h3 moves the label off the name and onto the diagram. h4
takes Victoria out of the row altogether, so the hierarchy is positional and nothing can contradict
it. h5 removes the claim and keeps only the emphasis.
C6·h1Bigger node — Victoria's marker outgrows the others~152pxThe lightest touch. Victoria's hexagon goes from 18px to 29px with a soft orange halo, the name goes heavier, and the label sits under it in orange. Same line, same rhythm; one stop is simply louder than the rest.
4.9173 reviews · on GoogleSix offices across British Columbia
C6·h2Hexagon badge — the head office is a cell, the rest are nodes~168pxVictoria stops being a dot and becomes a filled hexagon holding the same institution glyph the section badges use. The difference is one of kind rather than degree: five markers on the line, one building sitting on it.
It borrows the fa-university glyph that already opens the practice-areas section on this page. That repetition is either a system reading as a system, or the same icon twice — worth checking against the whole page before choosing it.
4.9173 reviews · on GoogleSix offices across British Columbia
C6·h3Pinned tag — the label sits above the line, pointing down~168pxThe label leaves the name and becomes a small orange tag above the line with a pointer into Victoria's node, the way a marker labels a point on a map. It reads as an annotation of the diagram rather than part of the office's name.
4.9173 reviews · on GoogleSix offices across British Columbia
C6·h4Out of the line — Victoria is a block, the other five are the route~156pxThe strongest separation, and the only one that does not rely on ornament. Victoria leaves the row and becomes a labelled block with an orange rule; the remaining five run as the line beside it. The hierarchy is carried by position, which no amount of styling can contradict.
“Serving clients across British Columbia and beyond” is a compression of the live sentence, not the live sentence. If this one wins, either that line gets approved or the block carries the office address instead — which needs the new address, still unknown.
4.9173 reviews · on GoogleSix offices across British Columbia
C6·h5No label — Victoria is just first, and heavier~140pxDrops the caption entirely. Victoria's node is orange, its name is white and bolder, and the other five step back to a softer grey. Whether it is the head office is left to the contact page; the band only says which one comes first.
Honest about what it gives up: nothing here states that Victoria IS the head office. If that fact matters on the homepage — and “Headquartered in Victoria” is the live sentence's first word — this option loses it.
4.9173 reviews · on GoogleSix offices across British Columbia
Round 4 — head office, no route line
C6's form is out, and with it h1–h5, which were all variations of it. Seven bands that mark
the head office some other way. Same verified facts, same four defect fixes, same real-markup label.
How each one draws the distinction, since that is the whole question:
- D1 by size and isolation — Victoria is bigger and stands alone.
- D2 by content — the head office is the one with an address and a phone number.
- D3 by fill — six identical chips, one of them solid.
- D4 by label alone — a two-row key-value list and nothing else.
- D5 by scale — VICTORIA is the biggest word in the band.
- D6 by colour — the site's own orange half is reassigned from the rating to the head office.
D2 is the most useful of the seven and it cannot ship yet. It shows the head office address,
and the exact address after the November move is still unknown — so it carries the same
placeholder the footer already does, TBC note included. Everything else on this page is buildable
today; that one is waiting on a fact.
D4 is the only option that adds no new shape. The page already carries hexagons in the header
hive, the section badges, the practice tiles and the footer comb. D4 is two labelled rows of type —
if the concern about C6 was that the band was becoming another diagram, D4 is the far end of that.
D1Featured and listed — Victoria at 28px, five in a grid~150pxThe head office is distinguished by size and by being alone, not by a marker on a diagram. Victoria is set at 28px with its label above; the other five sit in a three-column grid to the right at ordinary text size. No line, no comb, no ornament.
D2Address card — the band becomes contact information~176pxThe most useful thing a strip under the hero could be: the head office with its address and the phone number, and the other five as a plain list. It answers “where are you and how do I call you” without a click.
It is blocked on a fact nobody has. The address shown is the same placeholder the footer already carries — “across from the courthouse” with a TBC note — because the exact address after the November move is still unknown. This option cannot ship until that is confirmed.
HEAD OFFICEVictoria
New office — across from the courthouse, Victoria, BC(exact address TBC after the November move — confirm with client)
250-888-0002
D3Filled chip — one solid, five outlined132pxAll six stay on one row and in the same shape; Victoria is simply the filled one, carrying its label inside the chip behind a hairline. The difference is a single fill, which is as small as a distinction can be while still being unmissable.
SIX OFFICES ACROSS BRITISH COLUMBIA
D4Two labelled lines — no shapes at all118pxThe calmest thing on this page and the furthest from C6. Two rows of a key-value list: HEAD OFFICE / Victoria, then ALSO IN / the five others. No chips, no nodes, no hexagons — the hierarchy is entirely in the labels and the type sizes.
Ten pixels shorter than today's band, and the only option here that adds no new shape to a page that already carries hexagons in the header, the section badges, the practice tiles and the footer.
D5Display word — Victoria at 46px~154pxThe head office is the loudest word in the band. VICTORIA is set at 46px in the light Raleway the practice headings use, with the five others in small caps beside it. It says where the firm is from before it says anything else.
It uses the 300-weight uppercase Raleway that the old practice-area headings used and that the new mosaic dropped. Reviving it here is either a continuity with the brand or the return of a style the page just moved away from.
D6The split reassigned — orange means head office, not reviews132pxKeeps the live site's two-colour band and changes what the colours mean. The orange block currently holds the Google rating for no reason other than that it is the loud half; here it holds the head office, and the rating moves to the far right of the dark side where it belongs as supporting evidence.
It demotes the rating, which is the one piece of third-party proof on the whole strip. Whether the head office or the 4.9 deserves the loud half is a marketing judgement, not a layout one.