Redesign of Fibonacci HQ

How We Redesigned the Fibonacci HQ Landing Page (And What We Learned About What Makes a Page Convert)

Published

Feb 3, 2024

Topic

Web Design

mock up fibonacci hq
mock up fibonacci hq

Since 2018, we've represented our brand through countless iterations. With our shift to the nautical niche, we've developed our landing page to represent us in this chapter.


Our no.1 problem:

For years, Fibonacci HQ operated quietly in the background, working with private companies whose names you’d recognise instantly. The nature of that work meant we rarely spoke publicly about our results, our process, or the thinking behind our approach to digital brand performance. Clients saw the impact: growth, booked-out calendars, transformed customer experience. But new visitors to our site had little context. They knew we did good work, but not always what, how, or why it worked.

This was the core problem behind the redesign of our own landing page:

  • People who worked with us understood our value instantly.

  • People who hadn’t worked with us yet had to guess.

That gap had to close.

Redesigning our own website gave us a unique opportunity to treat ourselves like a real client: objectively, honestly, and with the same successful process we apply to every brand we work with.


Step 1: Identify What Users Already Knew, and What They Didn’t

We started by examining how prospective clients arrived and what assumptions they carried with them. Collating notes from discovery meetings and discussions with business partners, we identified the key parts of our business that we should make clear to first arriving clients.

A landing page can’t do everything, but it can do the right things well.

Our job was to simplify the story:

Who we are → What we do → Who it’s for → Why it works → Proof.

Once this became the backbone, decisions around layout, copy, and visual structure flowed cleanly.


Step 2: Message Clarity Before Visual Design

A common mistake in web design is jumping straight into layout before the messaging hierarchy is solid. We do the opposite.

We wrote:

  • The core headline

  • A one-sentence subhead that positioned our value

  • The structured sections that supported the customer’s mental journey

Then we removed everything that wasn’t necessary.


Step 3: Showing Transformation (Not Just Talking About It)

One of the biggest unlocks in the new design was visual transformation.

Most companies talk about improvement.
We wanted to show it.

We introduced a before/after slider displaying website performance transformation from real client work (with permission, see our "Roadmap for 2026" for more info).

Visitors immediately understand:

  • The old situation

  • The new result

  • The difference our work makes

It's faster, more emotional, and more believable than paragraphs of sales copy (that no one's reading, lets be real) could ever be.


Step 4: Using Proof While Protecting Client Privacy

Most of the projects we take on at Fibonacci HQ can’t be named publicly. We’ve worked with major companies you’ve seen on billboards, TV, product shelves, streaming platforms, and national campaigns.

That meant our proof had to walk a fine line: convincing without breaking client confidentiality.

We focused on what we could show:

  • measurable results

  • lessons learned from leading brands

  • testimonials

  • the methods that consistently delivered

This lets us share real experience and outcomes while protecting the privacy we promise our clients.


Step 5: Humanising the Brand

Another thing we realised:

Most agencies talk like agencies.
We don't actually work that way.

Fibonacci HQ started as three founders in Edinburgh, grew to more than 15 team members over the years, and has now evolved into a specialist studio focused on excellence, innovation, and measurable outcomes: especially as we expand into the yachting and maritime sector.

We wanted the landing page to communicate that:

  • We are real people.

  • We care deeply about the work.

  • We build relationships, not transactions.

  • We take on fewer clients because we give each, our full attention.

This “human dimension” made the site feel less corporate, more personal, and more trustworthy.


Step 6: Designing for How People Actually Read

From heatmaps and user testing, we know:

  • People scan.

  • They don’t read blocks of copy.

  • They need proof early.

  • They need clarity fast.

So the page uses:

  • Short sections

  • Hierarchies of typography

  • One idea per block

  • A flow you can follow without scrolling backwards

  • Clear choices

Good landing pages don’t force people to think.

They let people relax into understanding.


The Biggest Lesson

We tell clients this all the time, but redesigning our own landing page proved it again:

The story you think people know about you is rarely the story they’re actually getting.

When you:

  • Step outside your assumptions,

  • Observe from the outside,

  • Build with structure and intention,

  • Communicate transformation rather than process…

…your landing page becomes a strategic asset, not just a digital business card.

old fibonacci hero yachting

Hero design with video

Previous iterations of the Fibonacci HQ website

From the Fibonacci HQ team with ♡

©2025 Fibonacci HQ

Contact Us

Book a quick call to see what's holding your business back.

Let's do a thing or two together

Be the first to know when new client spaces open.

Copyright © 2025 Fibonacci HQ.

All Rights Reserved.

Contact Us

Book a quick call to see what's holding your business back.

Let's do a thing or two together

Be the first to know when new client spaces open.

Copyright © 2025 Fibonacci HQ.

All Rights Reserved.

Contact Us

Book a quick call to see what's holding your business back.

Let's do a thing or two together

Be the first to know when new client spaces open.

Copyright © 2025 Fibonacci HQ.

All Rights Reserved.