Chinomso Onu
Work / Case study 08 Sheet CS-00 / Cover

AnchorNet Global

Website redesign and brand system for a B2B IT infrastructure and cybersecurity services company.

In short

Problem

A generic site-builder template that never showed the company's main promise: an engineer on site in under an hour.

My role

Strategy, copy direction, UI, a Figma design system, brand refinement and a custom WordPress build.

Outcome

Approved by the client and launched on 28 October 2026.

Client

AnchorNet Global

Industry

Enterprise IT, network infrastructure and cybersecurity (B2B)

Role

Web and brand designer (strategy, copy direction, UI, design system, build)

Tools

Figma, AI prototyping tools, Claude, Claude Code, WordPress

Year

2026

Visit the live site

New AnchorNet Global homepage hero: headline Sub-hour field engineering, zero-downtime architecture, with a live NOC dispatch panel tracking incident AN-2047 to service restored at 00:51
Fig. 00The new homepage. The dispatch panel plays one incident from alert to restored service, so the sub-hour promise is visible in the first screen.
Sheet CS-01 / Brief and challenge The problem

Brief and challenge

The brief

AnchorNet Global sends engineers to fix enterprise network, security and infrastructure problems on site, under a contractual sub-hour response. Its website was a site-builder template. The client pointed to servicepoint.com as a site they admired, asked for something that went further, and gave me creative freedom on the design and the brand.

The challenge

The template looked like every other IT provider. Nothing on it showed the sub-hour response the business is built on, the figures had no explanation, and the logo sat on a white box against the dark background. The buyers are IT directors and operations leaders at mid-market and corporate companies. They have sat in slow ticket queues before and want proof before they talk to sales.

Sheet CS-02 / Before and after 4 sections compared

Before and after

The same four homepage sections, before and after. Drag the handle, or focus it and use the arrow keys.

Hero

Old AnchorNet Global homepage hero: logo on a white box, headline in blue and white, a consultation button and a stock photo of a technician in a server room
New AnchorNet Global homepage hero: dark ink layout with amber call to action and a live incident dispatch panel beside the headline
Fig. 02.1A stock photo and a headline became a live incident dispatch panel that shows the promise in the first screen.

Proof

Old proof section: three plain figures, under 45 minutes, 99.999% and 100%, with small icons and one-line labels
New SLA band: four contractual figures, under 45 minutes on-site, 99.999% uptime target, 100% tier-three staff and 24/7/365 NOC monitoring, each with a plain explanation
Fig. 02.2Three plain numbers became a contractual SLA band, with a one-line explanation under each figure.

Capabilities

Old capabilities section: four identical dark cards listing network infrastructure, cybersecurity, cloud systems and field engineering
New capabilities explorer: four tabs on the left, the active Network Infrastructure tab shows a photo panel with a description, three bullets and a link
Fig. 02.3Four identical cards became a tabbed explorer, with detail, bullets and a link for each capability.

Differentiation

Old differentiation section: heading Beyond remote ticketing queues followed by two photo cards about on-site response and tier-three engineers
New comparison table: a typical managed IT provider against AnchorNet across first contact, hardware failure, escalation, response and visibility
Fig. 02.4"Beyond remote ticketing queues" kept its heading and now backs it up: a typical managed IT provider and AnchorNet, row by row.

Added

Sections the old site didn't have, each answering a question buyers ask before they call.

New response timeline section: Anatomy of a sub-hour response, five steps from detect to restore with an elapsed counter at T+51m
Fig. 02.5Response timeline. Five steps from alert to restored service, with the elapsed time at each step.
New coverage section: a dot map of metro markets with dispatch routes and a ZIP code checker for the SLA radius
Fig. 02.6Coverage map and ZIP checker. The metro markets inside the SLA radius, and a ZIP code check that answers "do you cover us?" on the spot.
New case study block on the AnchorNet homepage: challenge, what we did and outcome, laid out beside a photo
Fig. 02.7Case study. A short story block: the challenge, what was done and the outcome. The client edits it in WordPress.
New FAQ section: Questions from IT leaders, an accordion of five questions about the SLA, coverage and multi-site support
Fig. 02.8FAQ. Five questions IT leaders ask before a call, answered plainly.

Mobile, 390px

Before

Old AnchorNet homepage on a phone: logo on a white box, centred headline, blue button and a stock photo

After

New AnchorNet homepage on a phone: left-aligned headline, amber button, proof chips and the start of the dispatch panel
Fig. 02.9The first screen at 390px. The old layout centred everything and pushed the photo below the button. The new one leads with the promise, the call to action and the proof chips.

Full homepage

Before

After

Fig. 02.10The full homepages. Hover or focus each one to scroll through it.

What changed

  1. The main promise, an engineer on site in under an hour, is shown in the first screen as a live dispatch panel.
  2. Every figure is a contractual SLA with a plain explanation, not a bare number.
  3. Four static cards became a tabbed capabilities explorer with detail for each service.
  4. A comparison table shows how AnchorNet differs from a typical managed IT provider.
  5. New sections answer the questions buyers ask: how the response works, where AnchorNet covers and what happens next.
  6. One visual system across the site: deep ink, one amber signal and monospace labels for data.
  7. A custom WordPress build, so the client's team can edit every section without touching the layout.
Sheet CS-03 / Strategy and positioning 3 details

Strategy and positioning

Three decisions that shaped the site: what I chose, why, and what it replaced.

One promise: an engineer on site in under an hour

Decision

Build the homepage around the sub-hour on-site response, starting in the hero.

Why

It is the one thing a typical managed IT provider can't offer, and it is written into AnchorNet's contracts.

Instead of

A list of services with equal weight, which is what the old template showed.

Constraint

Every figure on the page had to be one the client can stand behind in a contract.

New AnchorNet Global homepage hero: dark ink layout with amber call to action and a live incident dispatch panel beside the headline
Fig. D1The hero leads with the promise and shows it working in the dispatch panel.

Design from the buyer's world: the operations centre

Decision

Borrow the look of a network operations centre (NOC): dark screens, live status, monospace data.

Why

IT directors spend their day in dashboards and status pages. The site uses their visual language before it says a word.

Instead of

Stock photos of server rooms and generic blue technology gradients.

Constraint

It still had to read as a calm, dependable company, so one accent colour and plenty of space.

New coverage section: a dot map of metro markets with dispatch routes and a ZIP code checker for the SLA radius
Fig. D2The coverage map reads like an operations screen: a dot-grid map, dispatch routes and a live ZIP check.

Each section answers the next buyer question

Decision

Order the homepage as the questions an IT director asks before calling sales.

Why

A buyer can stop at any section and still have a reason to book a consultation.

Instead of

The old order: hero, three numbers, four cards, two photo blocks, footer.

Constraint

Every section needed its own editable fields, so the client can keep the answers current.

Homepage order

HeroWhat do you do?
SLA bandCan you prove it?
TimelineHow does it work?
CoverageDo you cover us?
Case studyHas it worked?
FAQWhat if...?
IT directors Operations leaders Mid-market and corporate
Fig. D3The homepage order, from what AnchorNet does to what happens if something goes wrong.
Sheet CS-04 / Design system Figma variables and components

Design system

Deep ink for trust, one amber signal for action and live status, and monospace labels for data, like telemetry. Everything in the Figma file is built from these variables.

Colour

  • Ink #060E1A Page background
  • Ink raised #0A1628 Raised surfaces, text on paper
  • Ink panel #13233B Panels and cards
  • Paper #F5F3EE Light sections
  • Signal amber #E3A63B Calls to action and live status
  • Live green #4ADE80 Online and restored

Type

Sub-hour field engineering.

Inter Tight Headlines and body Display 74 · H2 48 · H3 24 · Body 18 / 16 / 14

NOC-EAST · DISPATCH 00:51:00

JetBrains Mono Eyebrows, labels and data Eyebrow 11 · Data 13 · Stat 56

Spacing

  • 4
  • 8
  • 12
  • 16
  • 24
  • 32
  • 48
  • 96

Radius

  • sm 4
  • md 6
  • lg 12
  • full full

Components

Button component in Figma: primary amber and secondary outline styles, each in default and hover states
ButtonPrimary and secondary, default and hover
Stat Block component in Figma: a large figure with a monospace label and a short explanation, in dark and light themes
Stat BlockDark and light
Section Header component in Figma: eyebrow, heading and intro text in dark and light themes
Section HeaderDark and light
Capability Tab component in Figma: active state with an amber rule and inactive state in muted text
Capability TabActive and inactive
Timeline Step component in Figma: complete and upcoming states, each with a time stamp, a title and a note
Timeline StepComplete and upcoming
Comparison Row component in Figma: a label, the typical provider answer with a cross and the AnchorNet answer with a tick
Comparison RowTypical provider against AnchorNet
Chip component in Figma: a small rounded label in monospace type
ChipProof labels

Handoff: variables bound to every component, component properties for states and themes, and five file pages: Cover, Foundations, Components, Website and Brand Kit.

Sheet CS-05 / Signature component Incident Card

The Incident Card

The Incident Card carries the main promise wherever the brand appears: the homepage hero, the LinkedIn banner and sales material. It has two variants. En route shows the live clock and an amber progress bar. Resolved shows the closing time, a green bar and the audit note.

Incident Card component in Figma, two variants: En route at 00:13:44 with an amber progress bar, and Resolved at 00:51:00 with a green bar
Fig. 05.1The two variants in Figma: En route and Resolved.
The live dispatch panel on the new homepage: incident AN-2047, elapsed 00:51:00, engineer en route bar, a five-step timeline from alert to service restored, and 30-day uptime
Fig. 05.2The same card in the homepage hero, extended with the full incident timeline and 30-day uptime.
Sheet CS-06 / Brand evolution 3 steps

Brand evolution

The brief covered the website, but the logo didn't work on it. I kept the existing emblem and refined it rather than replacing it.

  1. Starting point

    AnchorNet already had an anchor and globe emblem. It works on white, but on a dark site it has to sit on a white plate, which looks pasted in.

    The existing AnchorNet Global emblem: full colour on paper, and on the dark site where it has to sit on a white plate
    Fig. B1.1The existing emblem on paper, and on ink with its white plate.

  2. AI exploration

    I used an image model to explore an amber version of the mark that belongs on dark backgrounds. The raw output had the right idea and the wrong execution, so I listed what had to change before it could be used:

    1. It was a flat image with the navy baked in. It needed rebuilding as a vector with a transparent background.
    2. The 3D shading and gloss fought the flat, technical interface, so the globe had to be flattened.
    3. Too many colours. Two only, with GLOBAL in white or amber instead of a tan gradient.
    4. The amber had to match the signal colour, #E3A63B, so the logo and the calls to action agree.
    5. One version wasn't enough: it needed full colour, single-colour white and a small icon.
    6. It changes the colour of an existing mark, so the client has to approve it.
    An AI-generated logo concept for AnchorNet Global: a glossy amber anchor and globe with a gradient wordmark on navy
    Fig. B2.1The raw AI concept, kept as a reference, not used.
    Wordmark font comparison: the AI concept crop beside Michroma, Krona One, Syncopate Bold and Inter Extra Bold options
    Fig. B2.2Matching the wordmark: four typefaces tested against the concept's wide, squared letters. Krona One is the closest in width and weight.

  3. Refined direction

    Pending client sign-off

    Rebuilt as vectors in Figma: a flat anchor, a wireframe globe for the network and the orbit swoosh, in full colour and single-colour white, plus an anchor-and-orbit icon for favicons and avatars. This is a proposal. The live site keeps the original logo until AnchorNet signs it off.

    Refined AnchorNet Global logo direction on ink: a flat anchor with a wireframe globe and orbit swoosh, in full colour amber and single-colour white
    Fig. B3.1Full colour and single-colour white lockups.
    Simplified AnchorNet icon in amber and white: anchor and orbit only, for favicons and social avatars
    Fig. B3.2The simplified icon.
Sheet CS-07 / AI in the workflow What it did, what I did

AI in the workflow

AI tools sped up the early drafts. The judgement stayed with me: what to keep, what to change and what to throw away.

Prototyping

AI prototyping tools turned my structure and copy direction into first layouts quickly, so the client could react to real pages early. I treated them as drafts and reworked the section order, copy and components by hand.

Logo

An image model produced a first amber concept. I critiqued it point by point and rebuilt the direction as vectors in Figma.

Copy

Claude helped me draft and tighten copy against the positioning. Claims and figures were checked with the client.

Build

Claude Code helped me turn the prototype into a custom WordPress theme and plugin, with editable fields for every section.

Mine

Positioning, section order, design decisions, quality checks and every client conversation.

Sheet CS-08 / Marketing assets Social

Marketing assets

The design system extends past the website. The LinkedIn company banner reuses the headline, the proof chips and the Incident Card, so the company page and the site look like one brand.

AnchorNet Global LinkedIn banner: headline and three chips on the left, an Incident Card on the right, on a dark ink background
Fig. 08LinkedIn company banner, 1584 by 396, built from the same components as the site.
Sheet CS-09 / Responsive 390px

Responsive

Every section was checked at 390px. The dispatch panel, the capability tabs and the coverage map stack into one column without losing content.

Fig. 09.1Hero
Fig. 09.2Capabilities
Fig. 09.3Coverage and ZIP checker
Sheet CS-10 / Outcome Measurement plan

Approved and launched

The client approved the redesign and the new site launched on 28 October 2026. It runs on a custom WordPress theme, so AnchorNet's team can edit every section, service, SLA figure and FAQ without touching the layout. The refined logo is with the client for sign-off.

Visit the live site

Measurement plan

The site launched on 28 October 2026, so there are no results yet. This is what we will watch first.

  • MetricConsultation requests SourceForm entries Window90 days from launch
  • MetricEmergency dispatch requests SourceForm entries Window90 days from launch
  • MetricCoverage checks by ZIP code SourceAnalytics event, to be added Window90 days from launch
Sheet CS-11 / Ownership Who did what

My role

Me

Strategy and positioning, copy direction, UI design, the Figma design system and brand kit, the logo refinement, and the custom WordPress theme and plugin.

Client

Business goals, the reference site, service and SLA details, and approval at each stage.

AI tools

First layout prototypes and a logo concept, both reviewed and reworked before anything shipped. Claude and Claude Code helped with copy drafts and the build.