#341 – New Website Upgrades To Make More Money

We’ve just completed
our biggest redesign project in a while

with the new authority hacker site.

And while doing it, we’ve
uncovered tonnes of new tech

that site owners should be using
to make their site scale way better.

And we’re going to share them
with you in this episode.

On top of that, we’ve already managed
to more than double our conversions

using some weird new elements
that we’re going to talk about today.

And this is a big deal now that Google
sends a lot less traffic to websites.

And we’ve also specifically built
the website to increase engagement based

on we’ve learned from the Google Leaks.

I mean, we’ve even used AI
to help build some of it.

So whether you’re also considering
rebuilding one of your sites or you just

want to upgrade your tech tools
and processes, there is something

for you in this podcast,
and it’s about to get really nerdy.

Let’s get started.

Hey, everyone.

Welcome to the Authority Hacker podcast.

Today, we are actually
celebrating the launch of

our brand new website on authorityhacker.com.

If you haven’t seen it yet,
go check it out.

I’m sure you will probably
find some issues still with it.

We’re still fine-tuning some stuff, etc.

So don’t fall on us if
you find a tiny bug on this, etc.

But so far it’s done pretty well for us.
We’re pretty happy with it.

We have a tiny bit
of boost of organic traffic,

but most importantly,
we’ve pretty much doubled our conversions

in the early data that we have,
and we’re pretty excited to essentially We

share the whole process that was behind
this redesign so that actually you guys

can take some of this and implement this
on potentially your sites if you want

to do this, especially as traffic
is quite scarce these days.

It’s obviously quite important
to improve your conversion rates,

and that’s one of the main things
that motivated this redesign.

Today, I have Mark with me.
How are you doing, Mark?

I’m doing good, thanks.

Yes, it hasn’t pretty much.

It’s more than doubled
our conversion rate I just checked.

We only have a couple of days of data,
but so far, It’s not too much data yet,

but even if it falls by 30%,
40%, I’ll still be happy, basically.

Yeah, there’s definitely some cool stuff
that you guys can steal from this.

We’re just going to walk you
through also all the tech setup

and the rebuild setup and how you
can essentially run a similar project.

It’s been running for a
long time, by the way.

I was checking the early Figma’s.

The first Figma,
they came to us in September 2023.

Do you want to just
explain what Figma is for people

that maybe haven’t used it before?

Figma is the tool that designers
use to basically mock up your site.

Back in the day, people
used to do that in Photoshop.

Now, there are actually
dedicated tools for UI, UX.

Figma is the most popular one.

When you hire a designer, which we have
done in this case, they tend to deliver

the design in Figma, and then it’s up to
you or your dev to transform that Figma

into an actual website that is responsive
and is interactive and so on.

This is really for the visual part
and brainstorming what it’s going

to look like.

The first The first thing that we got back
from the design was September 2023.

I have a feeling we started
thinking about it in some time.

It was August when we started planning it.
Yeah.

Almost a year ago as we recorded this.

It’s a long project.

It took a long It’s a good time.

But I think before we jump into
the nitty-gritty, the details,

and I have a lot of cool tips, details
that people can use, tools as well.

I’ve made a list of resources
people can use to actually

do that, resources I’ve used.

I’ve I built a lot
of that site, by the way.

I just wanted to point out.

I didn’t build everything,
and you’ll see that, but the building,

I would say I’ve probably done 70%
of it, something like this.

So it’s like, yeah, a lot
of it was me, but at the same time,

we teach people to build websites.

I feel like it was a good exercise
to actually refresh myself

on the new January blocks,
which we’re going to talk about.

But first, let’s jump onto
why you would want to do this.

I think the first one that
I put in the list is, I think, the one

that’s going to appeal to the most people
listening to this podcast.

That’s the new way
Google evaluates website.

I put Google Navboost.

Navboost is the name of that,
is how they name that engagement factor,

basically, on the Google Leaks.

Yeah, this was on the Google Leaks.

If you haven’t watched our news
channel, and you should go subscribe

to Authority Hacker News.

We did a big video on this where basically
someone had discovered a treasure trove

of Google ranking factors, and one
of them was this concept of NAV boost.

To sum it up, I guess, it’s fair
to say there’s a lot of factors based on

user engagement, a lot more factors
based on user engagement than Google

were perhaps letting on or implying
from communications to them before.

Is that right?
Yeah.

It’s like they have a lot of metrics.

One of the main ones
is called long clicks.

We assume that this means that it’s like
when people click on your site and stay

for a long time before they go back to
Google search or they go somewhere else.

It’s like they have long clicks,
but also they have a metric called

last long click, for for example,
which they measure when was the last time

someone stayed longer on your page.

One of the speculations from making
was like, If people haven’t engaged

for a long time on your page recently,
then that probably means the content is

outdated or not as good as it used to be.

That’s the source of content
decay, for example, right?

All of that to say that time spent
on your site, engagement on your site,

the death at which people go on
your site, it probably matters more today

than it mattered a couple of years ago.

And so that means that the way
websites are built need to be also

rethought in a way that drives engagement
a little bit further rather than…

Most sites tend to go for monetisation
right away, like a big comparison table

on top of the page, like click as fast
as possible, ads in your face, etc.

And maybe we need to pull that back
down a bit so that we can

improve these metrics and hopefully
get some Google traffic for that.

Obviously, the site has just
gone live, so it’s like I’m not going

to say that we got the effect from this.

It’s probably going to play
around core updates.

We’ll see how it goes.

I hope, fingers crossed,
it goes well for us.

But even if it’s stable, I’m okay.

This concept of Google and other platforms
looking at user engagement as a way

to determine what to rank basically.

And this doesn’t function just in search.

But so all social media sites use this as
the primary way they order content

on YouTube, Facebook, Twitter, etc.

So it seems to be like
that is the best way to do it.

And a lot of the more traditional ranking
factors at Google’s,

your content and links,
while they’re still very important,

would you say that it’s maybe
further down the pecking order or

potentially could go
that way in the future?

It works exactly like social media.

It’s like, followers used
to be very important on social media.

Follower are basically backlinks, maybe.
You know what I mean?

Some of these historical metrics.

It still matters.

It’s like if you have lots
of followers, you get more initial reach

with your content.

But if people don’t engage with it,
the This platform tanks your reach,

even though you have lots of followers,
probably works a similar way now.

To be honest, we see a lot
of big authority sites also ranking well.

But there’s also big authority sites
that have tanked recently.

It’s like Forbes, etc,
have tanked actually, for example.

It’s more, I guess, what I’m saying is
the direction of travel for all sites

and all platforms on the internet
is focusing more on user intent.

So even though I’m not dissing
the whole content links thing, I still

think It still matters a lot, yeah.

The most important thing, right?

But I think the direction
of travel is this.

So it’s a good time now to start thinking
about how these factors are going

to impact your website, basically.

Yeah, and an amateurish design,
it reduces your on-site engagement.

You can put the same exact content
on a default WordPress instal

and then on a big publisher.

And people are probably going to be
interacting a lot more with the content

on a big publisher site that’s
well-designed than they were always

the default WordPress instal.
Essentially that’s this factor.

The redesign essentially
helps you with that, provided

you actually improve things up.

I hope we improve things up a little
bit, but I think in terms

of responsiveness, etc, we did.

So it’s like, yeah, that helps
you marginally improve your engagement.

And The thing is we’ve done
a lot of tiny things to try

to essentially improve engagement.

So one thing that we have a lot
on the site is actually lots

of very long articles.

They’re not always the best these days,
but a lot of the topics we talk about

tend to need lots of content on the page
to actually cover the full topic.

One of the challenges that we had was
like, how do people find information

on these large pages of content without
necessarily reading everything,

but still not being daunted by how long
the page is and essentially click back

and going for another search result.

That was like a big thing that we did.

So we put a lot of work in our interactive
table of content, for example.

So you see the table of content,
it’s on the left side bar.

It wasn’t there on most posts
before the redesign, but now it’s here.

But also as you scroll down,
actually, The items that

you’ve passed, they now disappear.

They go back up, basically.

You only see the H2s,
but when you are within an H2

and there are H3s under, it actually just
expands these H3s so you can actually go.

You can navigate within 5 to 12
H2s, basically, on the sidebar,

so it’s not too overwhelming.

If you click on one of them, all the H3s
below it will expand so you can further

narrow down your research
of the content, for example.

So that’s one of the things
that we’ve done.

Another thing is because the TLC
is scrolling back up, it’s how to

reach back up to higher parts
of the page that you’ve already scrolled.

So we put this scroll
up button on the right.

So the idea is the navigation is you
can essentially dig down in the content.

And then if you feel like you
missed something, you need to go back up

to receive your whole to receive, you
click on the up button and then you just

get to find that again, basically.

So the idea was how do we make this
more interactive and easier for people

to understand what’s going on?

We did a read bar as well.

So it’s pretty basic.
A lot of sites We did this, but we didn’t.

It’s basically filling on top
of your screen when you scroll down

so that you actually see
how much is left in the article.

It doesn’t take into account
the autobox, the call to actions

at the end, all of that and so on.

That just helps people get a bit of
feedback of how much is left or whatever.

Another thing that we’ve done
is we do a lot of list content.

People like lists, the content
that tends to rank really well.

It’s very simple, but just the fact
that the numbers of the lists

are offset off the content area
It means that you can just quickly

see where you are in the list and again,
it makes it more scannable, basically.

And there’s a lot of work that’s been done
on font, font size, the width

of the content area, the elements, etc.

Again, to improve the readability.

So, yeah, that’s what we’re talking.

I wanted to give examples of
practical things that you can do

to improve engagement with your content.

These are the things on top
of a more modern design that we’ve been

working on on the new site, for example.

Quick question here then.

Why didn’t we just add
these elements to the old site?

Why redesigned the entire thing?

Well, that’s the third point in the list.

That’s technical debt.

I’m going to jump to this
right away because you asked.

But first of all,
site tech evolves slowly.

If you check week to week,
not much happens.

But actually a lot has happened in the
last three, four years in terms of the

tools that you used to build your site.

Even though you may be using
the same tools, whether you use like,

Generate Press like we do
or Elementor or anything like that,

they’ve added lots of functions
since you built your site initially.

It’s quite difficult sometimes
to reintegrate these things

into an existing design.

But in our case, specifically,
that’s because the site was fully built.

We had someone else
that helped us build that site.

I was not as involved in
a previous version of the site.

As a result, we were unable to do
many things because many things were hard

coding in a theme and poorly built.

As a result, we ended up having pages
that were not touched for

the for four, five years.

Can you give us an example of some of
the things we weren’t able to do then?

Category pages, for example,
they were all hard-coded.

Apart from changing the links
in the lists of links that you

would find there, we could not
change We could not change the content.

We could not change anything very easily.

And as a result, we never did it.

And as a result, the pages
got stale and out of date.

And as a result, some of
these pages were losing traffic

because, well, fair enough,
they were not maintained properly.

And so really, that allowed us
to essentially whip out

all the tech that we don’t like.

One of the main goals with that site
as well is everyone that knows how to

use WordPress can edit every part
of the site without code.

And that’s what we have right now.

I would say, 95% of it,
there’s maybe a few odd cases

where we have to use some custom code.

But for 95% of it,
it’s all in a block editor.

And then you can see the list
of elements used on one page.

When you open it, you can
click it, you can edit it,

and that makes it so much easier.

I think this is a really common challenge
that a lot of people face when they’re

redesigning a site,
or if they’re involving an external

developer or a developer from the team,
is that from a developer’s perspective,

it’s very easy to build a site,
hard code everything in a clean way

without having to think of how
people are going to use them.

But as a marketer, you’re concerned
about how people that don’t know HTML,

CSS, PHP, how they can actually
go and do stuff quickly and easily.

And that’s really been a big problem.

It cost us, I think, a lot of money
in our development cycle, a lot of time

in our development cycle here.

So definitely some lessons
we’ve taken away from that in this one.

Yeah, I was willing to compromise on
design and functionality for the ability

to quickly do things in this new
version, and it’s so much better.

For example, releasing a full lead magnet
from having nothing to having an opt-in

page, having a and having the email go
out, delivering the lead magnet to you.

Now, before it would take us
half a day to do this, now

it takes 15 minutes, for example.

That just gives you an idea
of the speed that we gain by doing this.

It cost us a lot of time
to rebuild, but now it’s deploying

a lot of funnel stuff, etc.
It’s 10 times easier.

I think that’s quite important.

I think that’s the reason
why a lot of people end up

using expensive third-party tools.

They buy elite pages,
they or click funnels, etc.

Because in the end, they lost control
of their site and they were unable

to actually do things there.

It’s like you can do all these things
for free on WordPress.

We can build entire crazy funnels
and crazy functions, etc.

Without having to Without too much tech,
without coding anything, the problem

is most people outsource to developers
that build in a way that prevents them

from being able to do it.

And as a result, you end up having to
pay for another subscription and you just

stack your tech in a bit of a shitty way.

So this was an opportunity
for us to clean up a lot of stuff.

And on top of that, another reason
to redesign your site and something

that we’ve teased earlier
is the conversion rate.

As you You evolve as you
learn things, you know how…

You essentially have things that
you’d like to implement on your site,

but if your technical debt prevents you
from doing it, you end up not doing it.

Adding more lead magnets, for example,
in our case, there were three new lead

magnets that came out with the site.

And And obviously in a world
where traffic is harder and harder

to come by, conversion rate
is becoming increasingly important.

You need to convert your leads.

So here’s a few things, for example, that
we’ve done to improve our conversion rate

where we did the redesign because
that was one of our goals as well.

I wanted to finance the money we spent
on this by improving conversion rate,

basically, to justify it, basically.

More money equals I can spend money now.

I tried something new that I’ve never
seen on any other site, I think.

You know how on social media, there’s
these link in bio things where you click

on it and you have these link trees.

And then it’s just like you have
a bunch of buttons to whatever

that creator is doing, basically.

Book a consultation call with me,
download my lead magnet, buy my product,

watch my last YouTube video, etc.

I decided that the right sidebar
on the blog was properly a cool place

to experiment with that format,
essentially, because people want choices.

Not everyone wants the same thing, etc.

But it’s quite difficult to put clean
big call to actions for all these There’s

just not enough space on the sidebar,
especially if you’re on a small laptop.

It’s only for desktop.
So it’s like I’m just saying that.

It’s only for desktop in our case,
because I can’t put it on mobile.

But I might even stick it
on top of posts on mobile, actually,

because it’s working so well.

So we’ve done actually
this link tree scrolling with you

on the right of the desktop.
It’s working really well.

I’m pretty impressed so far.

The second thing that we’ve done is
we’ve redesigned a lot of incontent CTAs.

And I’m going to talk about
the system we’ve used.

We have now a dynamic update system.

So if we one day want to change what
the lead magnet is, we want

to change the design of it, etc.

We can site-wide update
everything super quick.

And that, again, we had lots
of CTS that were old and not updated,

not maintained because they
were on old pages or whatever.

And sometimes these pages,
they don’t get lots of traffic.

But when you have hundreds of pages
that don’t get lots of traffic,

that you don’t bother updating
because you’re like, what does it matter?

There’s 50 visits per month.

It actually adds up to
a fair amount of conversions.

Whereas now we actually have a way
to centrally maintain all these things

that generate money for us.

And that’s a big, big upgrade for us.

I think it’s also, you talked about
the ease of use for anyone

without dev skills being able to go in
and deploy a lead magnet, say, quickly.

That’s huge because it allows
other people on our team to start

taking initiative and do these things.

In the past, we, or specifically
you, you’ve always been

the bottleneck in the company.

If someone wanted to do this,
it’s like, Oh, I’ll try and find

half a day of Gael’s time
and work with him to to build this out.

Good luck.
And that never happened.

Yeah, that’s the thing.

Now, it’s like there’s
also a central place.

I’m going to talk about all these systems
in a bit when we talk about the building.

I just want to finish
on the new conversion stuff

so people can go check it out.
We have a new button on the page.

I call it a slide.

We used to have a call to action
at the end of our page, but it was

a small section that would take
a little bit of your screen.

Now, the point is, I call it a slide
because it takes your entire screen space

when you scroll.

And the idea is when you
finish an article, it’s almost

like you get a CTA as you
keep scrolling the page, basically.

It just sends you to a lead magnet,
and that seems to get a lot more opt-ins.

What’s that built in?

Generate blocks, all of it.

Generate blocks for the design,
and the pop-up is Opt In Monster.

That’s literally two pieces
of tech that I play here, but

all the site is just Generate blocks
and Generate price, actually.

We barely have anything
else on top of that.

We’ve kept it really That’s why it’s
pretty fast actually, because there’s not

too much on there, even though we managed
to do a pretty good design, I think.

But yeah, implementing just
these things like the link tree,

the redesigned content, the CTAs that we
can actually centrally update so that we

can maintain it even on no traffic pages
and a new bottom of a page slide.

I haven’t actually changed the pop-ups
because I wanted to see the baseline

of new site versus old site
without changing anything at this point.

So the pop-ups are exactly the same,
yet our conversions

have pretty much doubled at this point,
which is pretty interesting and shows that

while pop-ups are powerful,
they are not everything, and you can

capture these in other ways, actually.
I think that’s the main way.

I put branding as well in there.

For me, branding is part of engagement,
basically, where essentially,

If your site looks like a default
WordPress site,

or if your branding is not better than
the daily generated images,

you’re unlikely to get people’s trust
and they’re unlikely

to engage with your content.

But for us, that was like
new colour palette, new logo, new

formatting elements like images,
bullet points, spacing, toggles,

cards, buttons, et cetera.

Basically, rebranding everything.
That helped a bit.

But it’s probably the least good
reason to redesign your site.

If you’re tired of your branding,
that’s where you lose money.

You need some financial incentive for it.

If you’re just doing it for branding
reasons, you’re probably procrastinating,

and there’s other things
you should be doing in your business.

Yeah, there’s something else
you could do that could make you money.

That being said, there is something
to be said about having a site

you are genuinely proud of And that also
doesn’t look scammy and looks legit.

I’m thinking specifically
from a link building perspective.

Our old homepage had this thing
about building profitable.

We teach you to build profitable websites.

And sure, if you listen to 300
and something episodes of the podcast,

you know and trust us, then fine.

But if you’re a link prospect
that’s never heard of us before,

you come to that, you read that.

The first thing you see is,
well, what’s the angle here?

What are they selling?

I think from a link acquisition
perspective, having

a really solid homepage
that looks very trustworthy is good.

And from my perspective, when I feel proud
of this site, this homepage, I’m much

more likely to initiate business activity
with people, whether that be link

building or direct sales or whatever.

Not too proud of the photo,
but other than that, yeah, it’s fine.

Now, I think another thing I did
on the homepage to improve conversions

for link building is actually
put social proof numbers of the business.

I put number of students,
number of podcast downloads,

number of email subscribers.

And then below that, there’s also logos
of companies that have featured us.

The point is also when people
check our site quickly to see who

we are, it’s like builds trust
through social proof, basically.

On that specific point, we used, is it

ACF, advanced custom fields, to do that.

And we basically created
this authority hacker’s

numbers section within WordPress.

And then once a month, someone
from our team goes through

and updates all those numbers.

They’ll check how many subscribers
we have in active campaign

and then add it in there.

And there’s a version for the full
number, the number rounded to the nearest

thousand, and then the number
expressed is like 175K with a letter

like that, like the shortened version.

And I think the fact that we update that
every month, it also shows a level

of trust as well, because How many people
will just throw some random,

Yeah, we’ve got a thousand clients.
Ha ha.

And never update that for two years.

And if people see that not being updated,
then it’s a small thing, but there’s

an element of trust to that as well.

I don’t think many people
monitor it, if I’m honest.

But I know it comes for you,
so it’s fine, basically.

But it’s the fact that you put the numbers
forward, it helps quite well.

It’s like consistency.

If you’re saying, Oh, we have 13,
000 subscribers in one place and 14,000

in the other and 15,000 in the other.

That’s why we have one central place.
Yeah, for this basically.

Yeah, we have a whole short code system
for this with these numbers,

so we actually don’t put them manually.

Each time we just put the short code.

So we’ve talked about why you
should consider redesigning your site.

To remind you, high engagement
equals higher Google rankings these days.

Conversion rate improvement.

In our case, we are at double now.

I don’t know if it’s going to hold,
but even if it doesn’t fully,

I’m still pretty happy at the plus 50 %.

And technical depth, I would say,
are the three main ones.

And branding is like a cherry
on the cake, basically.

Now, let’s walk through
the rebuilding process.

If you want to go through this,
here are the steps that you should

follow to do the same thing, right?

You know it’s like, personally, when
I start projects, I’m very, very slow.

I’d spend a lot of time
thinking and planning, basically.

If you’ve taken the other side
system, for example, you see

the niche research is huge.

And that’s the same for the website.

It’s like before you jump in,
instal a WordPress website and start

doubling with some WordPress team
or whatever, whatever, there’s a lot

of steps that I need to go through first.

And the first one is actually
establishing your goals.

And so what do you want?

Why are you redesigning your website?

And I think that phase is important
because you should probably be able

to talk yourself out of the idea
of redesigning your website.

It’s not going to actually
help your business in a tangible way.

Are you going to make
more money, basically?

And so, again, the reason why
high engagement rate, higher conversions.

So it’s like, do I want more opt-ins?

Do I want more affiliate link clicks?

Do I need a stronger
brand that people etc.

If you don’t need any of these things,
don’t redesign your website.

Don’t bother.

Go do something else that will help more
than redesigning your website

because as you saw, it took us
a really long time, actually.

And the point is, you should write down
three main goals, basically, and these

are your North Star in the redesign.

The way it works is every time
I was associating some resources with

a new task with a resource, I was going
to take resources, either money or time.

I was just going to ask, I was just
asking, is this improving our opt-ins?

Is it improving our conversion rate?

If not, do we really need this, basically?

Because it’s super easy to add lots
of things to your website if you don’t

actually keep a North Star, basically.

Once you’ve established these goals, then
I really like making an inspiration list.

I can actually show on screen
the one that I did for a toray hacker.

I have a design on…
Actually, you know what?

We’re going to put the link to that
document in the description on YouTube,

so you guys can go and check that out.

These are my personal notes,
I didn’t intend to release them,

so don’t be mad if it’s not perfect.

But the idea was to just find URLs and
just highlight what I liked about them

and what I’d like to see on the website.

You see, for example,
the first one is Block Tyrant.

What I liked about Block Tyrant, one
of the things was the numbered headings

with the number outside the content area
because it was easier

to scan, for example.

And so it is highlighted in this document
and not translated in the final design.

I like the images that are bigger
than the content area.

We have that element now
on the site as well, for example.

I like the content boxes, et cetera.

I had the Ahrefs blog where I like the two
columns that scroll with you, basically.

We have that on a new site.

But we didn’t copy any one of these sites.

We took small pieces from the design
that we liked and we implemented that.

And we didn’t implement
everything as well.

For example, I say we like
the Ahrefs author box with the big photos

that people have, but we didn’t do that.
We did something else.

And it’s like, don’t copy sites.

But that’s why I say people
should take five 5-8 inspirations.

And we have some weird ones,
not just online marketing sites.

I have the points guy
in there, for example.

And it’s like, what I like is that you see
the reading bar and I think the authors

on top as well and how they break down
the author, editor, etc, which we also

have on a new site, for example.

It’s like, take a lot of sites
that you like, and then essentially

take screenshots of the elements
that you like, and that’s going

to be the base of what you’re going
to be using to then work with a designer.

I think most people
should hire a designer.

I could build the site, but I don’t
think I could design it.

I felt it was easier
to build than to design.

And it’s a job, right?

It’s like it’s something that…
Yeah.

I mean, we’ve struggled with this
over the years, finding designers that…

Because you need a designer
that knows what the marketing side

of the business wants.

And also you need a developer, someone to
build it, who knows what the designer can

do, what the limitations of the tech are.

And ideally, they should
push on each other.

And you have this three-way system
of everyone trying to balance out

what can be done and what can’t.

But honestly, in our experience,
it didn’t exactly go as smoothly as that.

We definitely had some
ups and downs with that.

We hired our designer through…

Actually, someone we hired on Upwork to
do something else recommended this guy.

And so that’s how we found him,
was through that.

He was great.

Really, really talented designer.

By far the best I’ve ever
worked in terms of quality.

Pretty expensive.

I thought the most expensive, too.
I was going to say.

$150 an hour, something like that.

So you have to be quite direct about
what you want and what you don’t want, so

you don’t end up spending a lot of time
doing stuff you’re not going to use.

And the problem you often have with the
designers and problem we had is that you

designed something that was beautiful,
but it was very, very difficult to build.

We had this five column system
with these little mini columns that had

extra effects and things like that in it.
It exists.

It’s on the site, actually.

It was hard to do.

It’s quite difficult, and I’m not sure
if we would do that again going into it.

So, yeah, we had a lot
of these challenges.

And I think the problem, if you’re working
with freelancers, specifically,

is that often they don’t feel as
empowered to push back against

other people in your company.

If they’re saying, Oh,
we shouldn’t do this or we

need to do it in this other way.

They just want to do the best design they
can, which is somewhat understandable.

So the thing is,
you mentioned it’s expensive.

I think people hold the price and
they’re thinking of turning the podcast

off right now, so don’t run away.

You can save money on this.

And the thing is, when you hire search
designers, you don’t need them

to design your entire website.

You just need them to establish
the base of the design for the site

so that you can then just
derive from there and keep building.

In this case, if I open the Figma
for the site right now,

there’s literally two pages
that are completed with a few variations

of them, but it’s two core pages, right?

And the way we decided to go
with this project is, I think what

you should do is you should take the type
of content that you have the most

on your website and start there.

It’s like a blog post
for most people then.

Yeah, for us, it was that because
that’s what 90% of your traffic

is going to experience anyway.

It’s cool to have a cool homepage, etc.

I Homepage is quite important,
but other pages on your site,

it doesn’t really matter.

What matters is that first impression,
and you do a good job there.

I like to make this the core.

It’s not even the first impression.

It’s like, where is most
of your traffic landing first?

It’s actually not the homepage for us.

It’s the blog post page.
Exactly.

Yeah.
Even after updates, believe it or not.

But yeah, so that’s where
we started actually.

We were like, You know what?
We want to make a really good blog page.

What you do after you’re done
with that blog page, which took us

a lot of back and forth.

I don’t know if Matt can flash
some versions of this from the Figma,

but that’d be interesting.

But once you built a page,
then what we decided to do is to go

to the other side of the website,
go to a completely different page,

and see if the design principles were
established for the blog post still held

when we build another page on the site
and work on both pages at the same

time so that they balance each other.

So we went to the home
page after that, basically.

And that’s the only two
pages we did together.

We did blog posts, but we did review
posts, podcast posts, video posts,

all of that, random posts.

We did all these things, including a lot
of elements that are not yet

built, but I intend to build
a mobile table of content, for example,

that I would really like to build.

To work on these pages, you
need to work on a brief for each page.

That’s quite important as well.

The two things I did for the page
briefing, again, I can give the document

in the notes if you guys want.

I’ll give you my auto
page brief, for example.

We didn’t build everything.

In the end, you’ll see you’ll
have to make concessions when you build.

But basically, again, I found
four auto pages that I really liked.

Again, HX was good, but SMR
was good, search engine was good,

and the verge was good.
I like the verge as well.

After that, you give your designer
You give your design of

the different sections you want.
In the Hero section, I wanted a long bio.

I wanted the photo.

I wanted social links,
websites, an email icon.

I wanted some expertise tags
so that we can do that

in the schema, but also visually.

I wanted Is it a position?

Is it a freelance writer?

Is it an editor in the company?

Is it anything like that?

I wanted to agree with the best
articles, the podcast where they

may have been if they have been there.

We haven’t built that, by the way,
but that was the brief initially.

There was also like,
you may have seen me there.

I wanted external links
of where people have appeared

online, most recent article,
and then other autogreets, for example.

You want to make a document like that so
that your designer can

look at what the pages look like,
look at the basis of the design

that you’ve established on your first
on each page and then look at the sections

that they’re supposed to build in because
otherwise, they’re never going to build

exactly what you want.

That is pretty much the process
that you want to do with your designer

for each page you’re building,
but you don’t need all pages to be built.

A couple of pages can be built
After that, you can take over or

you can take someone cheaper if you want.

At least in our experience, it’s quite
common that you have all these grand

ideas, and then sometimes when
you see them on the page with everything

else, it’s like, Oh, that’s too much.

Or when you look at it, you think, This is
going to be a pain in the ass to build,

or it’s going to slow down the site.

It’s very common that you
have that initial list and then

you start cutting things.

For the other pages,
to be honest, it’s like,

We want to make it better eventually,
but it just wasn’t worth waiting.

It’s like at some point
you just need to launch a site.

This is another thing with the
whole design process, and we get into it.

It’s like you don’t have
to finish everything to launch.

It just needs to be functional and usable.

There’s many things on our site,
the table of contents menu.

Functionally, it works quite well, but we
definitely optimise that and tweak that.

But why wait to launch it?

You can optimise that after it’s launched.
Yeah.

For example, it doesn’t exist on mobile,
but I want to make a mobile version

of it, for example.

That’s something that’s quite important
and fits our goal of higher engagement.

Therefore, I think it’s worth
putting effort into this.

Basically, you do your page
briefs, you find your designer,

and then you work on Figma.
We mentioned Figma before.

Most designers are going to work on Figma.

Some may work some other.

I think there’s some Affinity Publisher
and a few others that may be

similar tools but work similarly.

Once you’ve done that piece
of work with your designer, the back

and forth, that can take a while.

Then comes the time to actually
picking the tech that you’re going

to use to build the site
because obviously, it needs to be built.

I think I thought about the tech
before, but obviously, the design

dictates the tech as well,
and you need to be a little careful.

Really, it’s a game
of you need to educate yourself.

I was bingeing WordPress YouTube channels
like a madman.

Are there any specific ones
you want to shout out that were good?

Yeah, I’m going through this.

But I’m just saying that I’ll
give my recommendations, but in general,

it’s going to be very difficult
to trust anyone because everyone

has a different opinion on this.

And you’re going to have
to make your own opinion.

Most of these tools have a refund policy.

I bought so many at that time
and set up random test sites, etc,

to just I’ll test the most challenging
parts of the design right away

to see if it would work or not.

I landed on two tools
that will have worked.

The first one is Brex.

So Brex is basically
elemental, but actually better.

And what it is, it’s like
what pro designers use.

If I was a full-time designer, I
would probably learn Brex at a high level

because it’s probably the most advanced
WordPress builder on the market.

And it outputs quite clean code.

It’s quite fast and everything,
unlike many the page builders.

It’s very, very, very good.

And it’s a real what you
see is what you get editor.

So you really see the page
rendered when you work on it,

which is quite nice compared to
the block editor on WordPress.

They have a really good class system.

And I’m going to talk about class systems
a little bit later because it’s

a very big part of redesigning a site
these days on WordPress and something

that most marketers have no idea about.

And I think it’s a problem.

But Brex has also a lot of
advanced plugins that allow you

to even You can make custom animations.

You can make basically
an Apple sales page with Brex.

That’s the level of stuff that you can go.

I’ll give you some good plugins
that you can look at if

you want to look at bricks.

One is called advanced themeer
that basically adds a lot

of advanced options to bricks, really.
I can’t say otherwise.

Core Framework is a CSS framework
that allows you to create lots

of custom classes that allow you
to, again, streamline your website.

Custom classes that allow you to
create variables of spacing or size, etc.

That you can reuse in many
places and update later.

Then it’s Brick Forge that is one
that allows you to do crazy

animations, slide effects, etc.

Very advanced web design stuff.

Really, bricks elevates WordPress
to the world-class of building websites

along with the more custom CSS
that a lot of devs are using.

But it’s like Photoshop, right?
It’s a job.

It’s a full-time job
to learn to be good at it.

And that’s the big drawback of Bricks.

It’s a lot of work to learn,
and most marketers, I don’t

think they’ll be able to learn it.

And you will need to be able to do some
CSS and understand some stuff like that

if you want to get the most of it.

It’s not fully what you
see is what you get.

It’s enough what you see is
what you get to do most things, but then

you need to jump in and do some code.

That’s Brex.

If you are very, very ambitious,
that’s probably the direction

you should pick in terms of tech.

Then the second option was
Generate Press, Generate Blocks.

It’s the option that we’ve been using
for a long, long, long, long, long time

now, but they’ve been around
for a long time and it’s still by far

the fastest WordPress theme out there.

And most importantly, they have
a reputation of not fucking up

their product over time because
there’s always lots of new products.

But people tend to add features
and add features and add features.

And it starts like, We’re
the fastest plugin on the market.

Five years later, it’s a huge bowl
of blood full of bugs, etc.

And so we didn’t want something like this.

And Jermet blocks and Generalet press
have proven that they don’t

take that direction, which
is very refreshing in this market.

Part of our decision was also based
around we wanted to keep using the tech

that beginners are using as well.

So we’re not creating
some crazy fancy thing that is hard

to teach and hard to replicate.

I’m never going to make
a tutorial on how to build a site

on bricks, that’s for sure.

I would do it for myself
on the site, but I see people

struggling with WordPress already.

I just can’t imagine for a second to give
them something that advanced, basically,

because it’s really a lot already.

And even the new general
blocks, which was my next point,

the new general blocks that came out
added a pretty advanced layers to it.

It has a class system like Brex now,

and it makes it by far the most advanced

page builder for Gutenberg.

So you’re still using
default blog builder, etc.

But yeah, you can do pretty advanced
stuff, and it’s good, but

you can stay basic if you want to
as well, which is what I

think is important for many people.

But in general, the new JMP blocks
is really good, and I’ve really

enjoyed working with it,
and we’re going to talk about that.

You’ve mentioned this class system
a couple of times now.

You want to explain a bit
more detail exactly what it is?

Because I think there’ll be a lot
of people there that aren’t really sure.

Me being one of them.

Okay, what is a class?

A class is essentially a collection
of styles you can apply to someone.

Imagine a headline on WordPress, right?

Let’s say I want this headline to be-When
we talk about headline, we’re talking

like an H1 at the top of your blog.
Exactly.

Not the H1 because it’s special
in the WordPress editor,

but the H2, for example.

Let’s say I’m putting a headline blocks in
my WordPress page, and then I style it.

I make it 48 pixels in size.

I put a line height of 24, whatever.

I put a font on I put the weight
to be semi-bulb, so like a bit bold, but

not too much, like a 500 or something.

And I put a margin at the bottom
of like 12 pixels, for example.

I can put all these styles under a class.

I call it headline style.
For example, right?

And so every time I apply a headline style
to a headline, all these attributes

will be put on that headline, basically.

So they will all be this 48 pixel size.

They will all have that margin
at the bottom, etc.

Every single time.

It’s basically a way
to group all these styles.

I can apply that anywhere I want on my
site once I’ve built that class, right?

But what’s really important is one day
you decide that, Hey, you know what?

My site design is actually imbalanced.

I need my headlines to be bigger.

They need to be 52 pixels
instead of 48, for example.

I can just go and edit that class
and then put 52 instead of 48,

and every single headline on my site
that has that class then updates

to 52 pixel without me having to go
and edit every single page and then

and change the font size, basically.

It makes your site so much more dynamic.

I can do things site level like you can on

the WordPress build up by default.

Essentially, if we want to completely
redesign our site, again today

for some reason because we’d gone insane,
we wouldn’t have to build it

from scratch again.

We could just redesign it and change
it quickly by changing these classes.

I mean, not everything
because you couldn’t change

the structure of the HTML.

The HTML would be the same,
but we could change the way.

For example, we have
these orange buttons on the site.

Let’s say we do an A/B test one day
and we realise that green

gives us 20% more conversion rate.

We’re like, You know what?

It’s probably worth breaking the brand
and just go from orange

to green on the buttons
because it just makes us more money.

I can go in the primary button style and I
can change the colour from this gradient

of orange we have to a gradient of green,
and every single button on the site is

going be green in one minute, basically.

And that immediately lifts up
our conversion on every single page

because we’ve done that A/B test.

And I guess it doesn’t even
have to be a conversion thing.

It can also be, you mentioned the fact
that you built 80% of this site, and

there’s going to be some imperfections
there in the design and things like that.

But if next year, if we wanted to have
a pro come in and just tidy up

all this stuff, it would be much easier
to roll out using the system.

This, but there’s also It also
is so helpful, for example,

making things responsive.

For example, our headlines,
they may be 40.

I don’t remember the size
I’m saying randomly.

They may be 48 on desktop, but
there may be 32 on mobile, for example.

If I don’t use a system like that, every
single time I make a headline, I need to

go put 48 size on my desktop, then
I need to click on the mobile button,

I need to put 32 every single time.

With a class, I can just apply my class,
and on every screen size, it applies

the attributes that I’ve decided.

So I do the work once
and then I just do it quickly.

So my buttons, my headlines,
my containers, all of that.

And then not only that,
but I can go and fix it later as well.

If something breaks, if something
changes, there’s a iPhone’s double their

resolution next year, and therefore we
need to change a little bit these things

because otherwise it doesn’t look good.

We can change that very quickly.

And the implication being that if you’re
running a large site where you upload

a lot of content, you pay people to upload
a lot of content, then you can really save

a lot of money by having them able to do
it much, much faster by just clicking

on that one class and having
all these settings apply.

Yeah.

It’s like you can go quite crazy
with this, on bricks and people

using these CSS remotes.

For every single padding, left,
right, etc, they have different sizes.

Usually the way this works,
the way people organise themselves

is they use a T-shirt size system.

We have that as well.

We have headline XS, headline S, headline

M, headline L, all the way to triple XL,
I think we have or something.

But the idea is that you build
a set amount of spacing, font sizes,

etc, and you keep reusing the same
because what that does as well is it

builds the consistency on your site.

And it doesn’t look amateurish.

It’s not like everything
is a different size, etc.

It’s just like it’s one of these presets
that you’ve spent some time to establish

at the beginning of your project.

And you know it’s a secondary
headline, bam, did you have You know it

should be an Excel size, you apply
the Excel size, and then you’re done.

You don’t have to think about mobile, you
don’t have to think about all of that.

It’s all done directly into
your class, which saves so much time.

That’s a class system.

And Generate Blocks has this
and Brex has this as well.

A builder like Cadence, I don’t
think they have it, for example.

I know a lot of people are like,
Oh, Cadence, so great, et cetera.

I think Generate Blocks
is going to be a notch above this

at this point for this system.

But it’s a bit more hidden.

It’s just a drop-down box
on Generate Blocks and it

doesn’t really tell you what it does.
So you need to dig it.

But then you can add something on top
of that, and that is the pattern system.

The pattern system is actually
a native WordPress system.

So even if you don’t
use Generate Blocks, you have it.

What it allows you to do is it
allows you to save complex elements

as blocks, basically.

I can make a pros and cont
table, for example.

It’s like pros and cont table is like
there’s two columns, then I need to do

my headline with a coloured background.

I need to put another box below
with my I need to do the same thing

on the other side, start all of that.

Start that with classes, by the way.

Then I can just essentially take
the block that contains the container

that contains everything,
and I can save that as a pattern.

There’s two types
of patterns in WordPress.

There’s an unsynced pattern
and there’s a synced pattern.

An unsynced pattern is a pattern
that is basically a block that you

can just call and then you can edit it.

So pros and cons, for example, would be
an unsynced pattern because the pros and

cons are different for every blog post.

I would still start the pattern
with classes, so I can still

change the background colour
of the pros and cons, etc, if I want to,

but I can change the content.

Then there’s synced patterns,
which are basically you make it once

and you put it in your site, and then
if you edit it anywhere, it’s going

to edit it everywhere on the site.

I’ll give you an example of a synced
pattern on the site, the featured in bar

with the logos on the homepage.

That has the logos of Ahrefs, HubSpot,
entrepreneur, and search engine journal.

That is a synced pattern,
which means if one day we decide to kick

out HubSpot and we want to put
Forbes because I can’t wait to put

the Forbes logo on the website,
I can do that and it’s going to update

this absolutely everywhere we use it,
which means sales pages, opt-in pages,

homepage, etc, all in one place.

I don’t need to go and edit 5,
6, 7, 10 pages, 20 pages.

The pattern system is just
going to take care of that.

It’s quite interesting to brainstorm
why elements are going to be reused

many times on your site and need to
be updated all the time and essentially

build them into a sync pattern.

Another sync pattern
that we have is actually

the slide at the bottom with the CTA,
where there’s the free training thing.

Why?

Because I want to be able
to update it in one place.

Let’s say we give not five
tactics, but seven tactics

or eight tactics or whatever.

I can just change that number here.

Everywhere that pattern is used
is going to be updated, basically.

Building these dynamic elements
that update

together with classes and patterns
allows you to manage your site so much

faster and scale it up so much further
without losing quality and without

while being able to update
everything at once, basically.

Quick question here,
because in WordPress 6.

5, they released
partially synced patterns.

They haven’t released it, actually.

I don’t think it’s there.
It’s coming up.

It’s coming up, but it’s not there.

Partially synced patterns
are going to be cool.

We’re getting very nerdy, but I love this.
Partially synced patterns.

Think about a synced pattern.

A pattern where you would make it once.

It’s the same everywhere on your site.

If you modify it somewhere,
it modifies everywhere.

But you can take some elements
that can be overtaken locally.

Let’s say I want to be able
to change my title or the CTA text

in a button, for example.

Instead of free download,
I want to put buy it now, for example.

Then I’ll be able to select that element
in a partially sync pattern,

and I’ll be able to overtake
that text locally while the rest

of the pattern is It’s still synced.

If I change the colour in the background,
it changes everywhere still.

I’ll be able to have some parts of my
pattern that are site-wide and some parts

that are just for that specific instance
that I just called here.

Would you use this in that example
you’re talking about earlier where

you have a pros and cons box and the text
is local, but the design is synced.

Exactly.

Yeah, I would definitely use it
for that, for example, so that I

can change the way this pros and cons.

It removes the need to use it, to do it
with classes, which is a little bit more

nerdy and and hacky, whereas you’ll
be able to do that in a much cleaner way

through partial sync pattern, which
it should come out very soon, actually.

Apparently, it’s in
the next version of WordPress.

So potentially by the time this podcast
is released, that’s going to be like.

But basically, if you’re not using any
of these tools, which I know 99% of people

who listen to this podcast are not,
then it’s a good reason to revoke your

site because these are real
productivity boosts

and essentially hours of people you don’t
have to pay because you actually can mass

update your site and mass manage things.

What that requires, though,
is good organisation.

That’s why I have a few regrets
because I was learning

all that stuff when we started.

I’ll be honest, our class system
is a B minus in terms of organisation.

It’s not an A plus.

If I was rebuilding it today, I
would rebuild it differently because you

need to organise yourself, especially
in terms of name conventions, so that…

I think we have 90 classes
on the site or something.

It’s quite challenging.

I can’t just go back and change the names
because that breaks the HTML, basically.

There are guys on, I’m not
going to make a whole guide

on how to organise your classes because
I feel everyone’s going to tune out.

But it’s something that you want
to think about before you get started.

And that’s why I said you
should work on these elements.

And I think that’s what we’re going
to talk about next anyway, the steps

through which you should
go to actually do the building.

So this was just tech.

This was just thinking about tech.

I’m not going to talk about other plugins.

It doesn’t matter too much, to be honest.

And you know the good
plugins if you’re listening.

If you’re still listening, you know.

So let’s talk about the building, right?

Because the building,
because there’s all these systems,

you need to build in the right order.

If you start building your classes
before you’ve taken care of your fonts,

for example, it’s going to break.
It’s not going to work.

There’s a pyramid of things to do first.

First of all, you have to decide, do I
duplicate my existing site or do I start

from scratch on a new WordPress site?

If you start from scratch,
the pros, it’s clean.

There’s nothing else on the site.

There’s no database that’s bloated
with all the plugins that you’ve tried

because one day you wanted to try
all the plugins in the plugin library.

None of that.

You have no tech burden left for sure,
and you can get started quickly.

The problem is you’re going
to have to rebuild all the pages

that are remaining on your site after,
which can be a lot of work, especially

if you’re using different tech.

It probably is best for small sites.

It’s probably not very
good for sites like ours.

And that’s why we went this other
way, which is duplicating in the website.

Because you get to start
with the same pages.

So the URLs also are maintained
when we did the duplicate.

So it’s like there was very little checks
to do and everything was fine, basically.

And you can essentially save
some stuff that was done before.

The posts have not been reuploaded
on the site, for example.

They’ve just been adjusted, but there was
not a full reupload of all the content

of the blog post, for example.

And that saved us lots of time.

The cons is that before you
get started, obviously, you’re going

to have to strip a lot of stuff
and that’s going to break the site.

So for literally three months,
we worked on a completely broken site and

you could pretty much see nothing apart
from a couple of elements here and there.

Because once you remove the tech
that we didn’t want to keep,

everything exploded, basically.

And then we just had
to reassemble the puzzle.

And so that’s the thing.

You do have to be careful here just
because you can sometimes

get in that situation where
there’s two versions of reality.

If the development goes on long enough,
you change something on the live site

but not on the dev site, vice versa.

And it’s like, yeah,
it could be a bit icky.

Yeah.

And for that, we actually use
the plugin called WP All Import Pro.

That allows you to sync between
your live site and the staging site.

What that allowed us to do
is keep working on the live site

while we were rebuilding, obviously,
there’s lots of posts that came, etc.

Just bring them to the
staging site, basically.

That worked pretty okay.

It’s not too difficult.

Most people can do that,
I It’s a really good plugin, actually.

It’s the same one we use later on to do
the checks, whether we had all the URLs

built on the old site and the new site.

Wp export all, I think it’s that first.
It’s not the same then.

Wp all import WP.

Maybe it’s the same.
I’m not sure.

But WP all import.
That’s what I can tell you.

That’s what I used.

If you made it this far,
make sure to hit the like button.

It really helps us to know what content
you enjoy, so we can make more like it.

And while you’re down there, why not
smash the subscribe button as well so

you don’t miss out on the next episode.

All right, now back to the podcast.

Let’s talk about the order of
things people need to go through, though.

It’s quite important.

The first thing is when
you start WordPress, you should go

through your customizer settings.

On general blogs, that is setting up your
fonts, setting up your global colours,

setting up your default container size,
so the main container of your website,

like how large is it, etc.

Setting up font size, all of that.

And after that, you should
be working on your class system

by building basic elements.

What is an H1?
What is an H2?

What is an H3?
What is an H4?

And build that with a class, basically, or
multiple classes, so that you can start

building that system that you can reuse
and If you start from scratch with this,

you can update everything on your site.

If you start later with it,
some parts of your site are not

going to update if you do that,
and that just kills the whole system.

So it’s quite important.

Once you build your first classes,
you build your first patterns,

essentially your first templates.

So for example, basic pattern
we have is a container.

So simple, right?

But we basically have three weeks
for content on the site.

We have like wide, medium, and narrow.

And it’s like the way it works is you
have one container that is the broad

container, and then one container inside
that’s just the right size.

So again, we don’t have containers
that go in many different sizes

and the site looks very unprofessional.

You look at a page and it’s all
in one line and then some areas can

be narrower, but when they’re narrower,
they’re always the same narrow,

not like a little bit different, etc.

So you can build your containers, you
can build your headline, buttons, images,

that stuff using classes and patterns.

And then after that,
once you build these things,

then you start building your site.

When we use Generate blocks
or Generate press, in this case,

we use something that they call elements.

Elements in Generate press
allow you to take a section of your site,

for example, your footer, and be like,
I’m building this now, like it’s a post,

but actually it’s going
to show in my footer, basically.

You build your elements one by one,
you build your your footer, and then

you go through your main post.

So your main page is like, post hero, post
section, related post, end of post CTA.

You build everything one by one.

It takes a long time.

It takes a long time, but
there’s no real strategy in there.

Just slowly build it.

Binge the channels that
I’m going to give at the end.

I’m going to give some resources
that will teach you how to do a lot

of that stuff, actually.

The thing is, I didn’t do everything, and
you can hire help to do that step because

it’s quite a bit of grunt work, actually.

It takes a long time.

It’s quite interesting
I hired for that role.

I know we tried multiple times.

We started with a full-time developer
who didn’t work out, so we fired him.

And then we tried to hire.

You ran one run of hire,
but I ended up with

essentially same profile of developers
who want to custom code everything.

And I was like, no, I’m not
falling into that trap again.

I want to be able to edit this.

This is not good.

And so I hired what I call a duct tape
developer, essentially someone

who does not have a technical
background, but who builds websites.

The reason I wanted that
is because it’s who I am and who

a lot of our employees are.

I wanted that person to think the same way
and use the same systems that we do,

even if that means it’s slightly less
optimised, even if that means

it’s slightly slow or whatever,
the point is we can do things.

How did you specifically
find that person, though?

Because it’s not category enough work.

I just posted my job offer, but then
that In his application, he was like…

I had some pretty advanced stuff.

So for example, the table
of content is pretty advanced,

the interactive table of content.
That was quite a bit of work.

And he was like, I don’t
know if I can do this because I can’t

do JavaScript, for example, and so on.

I was like, Perfect, you’re hired.

It sounds crazy.

But also, I have this podcast
where I talk about Sight Speed

with Brian Jackson, etc.

It’s like, he could hang talking on
that level, talking about this FuffMatter

plugin, how to optimise it, etc.

I would say he’s like 30% better
than me, something like this.

At least he’s ahead, but not too much.

He could talk about these things.

He knew this WP Import pro,
it was him who did it, for example.

He had tricks.

When I chatted with him, he had that.

At the same time,
he could not hard code things.

He physically could not.

It was not an option.

We potentially, we even considered hiring
someone else to do it at some point

because we were blocked, but we managed
to do it actually by literally copying

code on another site or something.

But that’s what I wanted, a duck tape day.

It was much cheaper, too, by the way.

He was $40 an hour, which is
pretty cheap for a dev, I would say.

Native English speaker as well,
so no communication problem.

The way it would work,
it was pretty simple.

I would make a weekly to-do list for him.

I made an issue database
on our I would just make a list of

five things we want to do this week.

I would catch up with him on Monday.

I would catch up with him
on Thursday when he’s done or mostly

done, and make another list.
I would give him the next Friday.

He would start, you know what I mean?

And he would just keep going like that.

Essentially, you built
a one-week sprint cycle.

Yeah, and then we just catch up,
see, is it done?

Is it not done?
Do we have any challenges?

Do we need to change something like this?
And just double check.

And that’s it.
It was literally two calls a week.

And you were doing some
stuff in here as well.

It wasn’t him, right?

Yeah.

There’s a lot of stuff
that he doesn’t know.

It’s like how funnels are set up.

It’s like even building sales pages.
I’m not sure I would trust.

It’s a mix of marketer role
and technical role for this.

I don’t know if I could have handed
that off to someone like that.

But for example, he built
the homepage, for example,

and the sliders, things like that.

These were things I could not
have done, and he’s done that.

I would just bring I was doing him on
my stuff when I was blocked, basically.

Did you say you were using AI to help you
with some of this work as well?

Yeah.

Some CSS is definitely written by AI,
actually.

I’ve used quite a bit of AI.

Do you want to just explain briefly
how that might function then?

Usually, I would literally upload

a screenshot of the Figma on ChatGPT and

the screenshot of where I am right now on
the site, the bullet points, for example.

We have these little blue bullet points
on the new site.

And so they’re custom CSS.

And I’d be like, Hey, this
is what I want and this is what I have.

Help me write custom CSS.
And I would just paste the CSS.

Half the time, it wouldn’t work.

Even really three quarters
of the time, it wouldn’t work.

But by giving it feedback
on giving it screenshots

of what was broken, it would be not
a bullet, but a huge line or something

like that, like something weird.

And I would just upload back
the screenshot the output,

and it would just keep tweaking the code.

I would do that, and then I would pass it
on to the dev to double check.

I would give him a task
of like, I’ll double check that

this is optimised or something.

I would run it to a CSS optimiser,
for example, and it would just do it

for me because I can read CSS,
but I can’t really write it from scratch.

I don’t know all the properties by heart.

And then I would tweak
it a little bit myself.

But really, AI did a lot
of CSS for me, actually.

And it’s not perfect, but it’s nice Nice
to hack your website, basically.

And upload screenshots.

You can upload screenshots of code,
you can upload screenshots of outputs,

you can upload screenshots
of Figma, and it understands very well.

So yeah, use AI.
And I think CROD 3.

5 Sonet is now even better.

I used ChatGPT for at the time,
like Chobo, probably.

But Sonet is apparently
a lot better at coding now.

So I would say it’s definitely an option
for people who are on low budget

or want to do things themselves
and are a little bit hacky.

I think that’s the power of AI, right?

It’s removing the need
of technical knowledge to do some things.

I think that eventually,
you’ll just design the website

on Fema, it will just do it.

I think that was a cool use case
and a cool way to learn

how to use AI in general.

That’s pretty much the building phase.

There’s not too much to it.

It’s mostly a grind, and it’s mostly
about doing the steps in the right order.

I think that’s really what’s important.

You need to use your classes right away.
Otherwise, you might as well not use them.

Then obviously, before you
release your site, you should Q8.

Something that we’ve done okay,
but I think I could have been a bit more

organised here, if I’m 100% honest.

But again, we had that bug listing notion.
I had a database with issues.

Every time we go through it,
we just log it.

We just log issues.

Then every evening for 2 hours,
I would just go through issues and them

or assign them to the dev, basically.

We did that for a few weeks.

My wife is very high attention to detail,
so she was very good at finding

all these issues and annoying me with it.

So eventually, I did it.

Sent the site to several
people to test it as well.

Then I use the Browser Stack.

Browser Stack is a tool that allows you
to test the site on different browser.

You can test older versions of
the browser, or you can test on Linux or

weird use cases that allow you to maybe
get a different perspective for the site.

Really, it was just a game
of squashing the bugs, but accepting

that there was going to be issues
at the time, which we release anyway,

just hopefully not too many.

It’s a game you can never win
completely as well.

You have someone on a 10-year-old
It’s an old version of Internet Explorer.

It doesn’t support some of the stuff
that modern websites do.

It’s just about doing as much
as you reasonably can with

the common devices and common browsers.

I agree.

My benchmark is, is it better
than the previous site?

If it was, then fine.

I’m okay with that, basically.

What about the SEO optimisation?

Was there any major changes
from the old site to the new site?

Not too much because
honestly, it was okay.

The thing is,
I’ve actually lost some stuff.

I feel like some stuff was not needed.

I’ve lost some of the schema, for example.

It’s good to have it,
but we’ll maybe redo it later.

But I think I saw the research from
Cyris Sheppard that showed that like,

sites that over the schema tend to break.

So I was like, You know what?

I’m not going to bother rebuilding it
for now and we’ll see how it goes.

So it’s like, I’ve left some stuff
out, but there was not much to do.

I mean, we had copied the site,
so all the title tags were done,

all of that was done.

Was the internal linking the same
in the new site versus the old one?

Were there any changes there?
Mostly.

I mean, the internal link was pretty good.

Inside the content, we’re
pretty strong at internal linking.

So it’s not something that
I counted as part of the project.

It’s more like ongoing work for SEO.

I didn’t want to put it in the scope.
There was enough.

It was mostly like, does it
render properly on mobile?

Do I have this weird horizontal scroll
that some pages have because some

element’s too wide and things like that.

I wanted it to be
It could be a good experience.

Like the mobile menu,
we have a new mobile menu as well.

It was actually bugged at the launch.

I had to fix it a day later.

But yeah, things like that.

Then once you basically have gotten
a bunch of people through it,

you’ve made a list of issues
and you start to slow down.

You feel the list of issues
start slowing down or they’re smaller,

they’re less important.

Then eventually, you start putting
a date on the launch, basically.

But it was so hard for me because
we kept finding bugs and you were like,

Oh, when can we launch it?
When can we launch it?

It’s eventually, I was like,
Okay, fine, let’s do it.

What I did is I did a pre-launch checklist
and a post-launch checklist.

The first thing that you
need to do is a list of redirects.

For example, we’ve moved a lot of pages
under their own post type.

So sales pages, opt-in pages,
thank you pages, etc.

They have different URLs, right?

Because they’re in their own post type.

It’s much easier for us to manage.

But as a result, if it’s not
redirected, it breaks funnels, literally.

It can break things.

So we made a big spreadsheet
of what is the original URL,

where does it need to redirect?

And always, always, always,
always do your redirects on Cloudflare.

Cloudflare is free and redirects
are done on a DNS level, which means it’s

way faster than doing it
inside the WordPress plugin.

It doesn’t use your resources.

So it’s like they’re invisible.

Now, if you open one
of our redirects, it’s just as fast

as if there was no redirect, basically.

So Cloudflare.

Cloudflare is the only
place to do redirects.

Then the thing I did also before
the launch is I tested the site side

of the speed optimisation.

We don’t run with caching, etc, when we’re
building it because it’s just annoying.

You need to clear it all
the time to see what you did.

But then I implemented
all of that before we launched.

So I implemented
WP Rocket and PerfMatters.

We have the same setup
as before, really, except we have

less optimisation in WP Rocket.

But the idea is to make sure it doesn’t
break the site because sometimes

you’re building, you’re not
optimising the speed, then you

optimise the speed and just stop break.

For example, the slide
broke when we implemented WP Rocket

and we had to exclude it from
the optimisation so it doesn’t break.

So you run that before you launch
your site, so you don’t have to deal this

at the moment of the launch.
Like these plugins are already running.

That was mostly it.

And then obviously checking that
the old URLs and new URLs are matching.

So we did a whole check in a spreadsheet.

List of all URLs on the old
site, extract it from Ahrefs.

So we use the Ahrefs site to audit.

And we also audited the staging site
and we just matched them

inside the spreadsheet, make sure
that there’s nothing broken, and then

just basically fixed anything or added
a redirect in the list if we needed to.

And that was pretty much
it for the pre-launch.

Because we had a copy of the site,
there wasn’t much else to do.

It’s not that difficult.

Post-launch, first thing is removing
the noindex tag because when you work

on a staging site, you noindex it.

It’s in reading Sorry, it’s in settings,
reading, if you’re in WordPress.

So make sure you remove that immediately.

Otherwise, you’re going
to lose all your SEO traffic

and you’ll just blame your new website
for just a stupid mistake you’ve made.

The second thing to do just
after that is to implement

your redirects on Cloudflare.

So it’s like we use
the book redirect function in Cloudflare,

which is, as I said, the best one.

The third thing that, honestly,
we forgot some of it, is to update

any external service that relies on
the old URLs that you may have.

So in our case, we will have Deadline
Funnel, add audiences, etc.

People visit the sales page,
you want them to see your ads, etc.

If the URL has changed,
obviously, that doesn’t work.

So that stuff you want
to update immediately.

And after that, it’s extensive testing
on different browsers, etc.

One little bug that we had that
I could not squash is that the site

was working fine when we launched it.

And when you would click on the site from
Google, you’d get a really broken version

of the site for some reason for 36 hours.

I realised it’s actually
a setting in Cloudflare.

Cloudflare has a setting you can turn on
that allows Google to cache your HTML.

And so what it did is Google had
an old version of the HTML and the new-I

was trying to match them together.

It was a beautiful array of colours,
but that was a big problem

and I couldn’t figure it out.

So it’s like actually in your
site speed optimisation in Cloudflare,

there is something called SGX exchange.

If people want to really know what it is,
if you turn that off and you

reindex your site in webmasters console,
the problem goes away within a few hours.

I’ve seen several people have this problem
on social media, by the way.

It’s one of the site speed setting
in Cloudflare and they don’t really

explain what it is.

But eventually, I I got it out.

Regenerate your site map
and resubmit it in webmasters console.

I resubmit my home page
to recroll on Google as well,

so they start crawling everything.

And then after that, I implement
site speed optimisation.

We use Bunny as a static CDN,
and we still use Cloudflare, APO

to just cache the HTML.

I didn’t want to change
it because it’s fast.

Basically, it’s working for us.

And then finally, I just made sure that
everything fires properly, like Google

Analytics, Stack Manager, ads, etc.
That nothing’s broken, basically.

And that’s pretty much That’s pretty much
the process of rebuilding the site

from scratch, which was a long project.

There’s a few other things
I want to ask you about.

First, this was maybe the Achilles heel
of the project, and something

we’re working on on the day the new site
went live is featured images.

Now, we’ve always had a problem with that.

I think when we were looking at other
sites to get inspiration,

we saw that evidently everybody else also
has a problem with this because no one

really does it in a way that It looks
great but can be easily implemented by a

member of your team without design skills.

So talk us through what we did here.

Mostly I gave that test to someone else,
and they read it all the featured images.

Then I looked at the grid.

There were probably some left
on the side, if you guys want

to check because we’re redoing them now.

But this blue background
with some random image on the image

on it and way too much text.

That’s what came out on the other side.
So they read all the images.

Then I looked at the post-grid
and it looked disaster.

It was so bad.
It’s like, I hated it.

And so I just cancelled.

I just stopped them working.
I was like, Don’t do anything.

Stop now.

The thing is, feature images
are such a hard thing to do properly.

It’s hard to give it personality,
but it’s so important for

social media sharing as well.

I just ended up doing
it myself, to be honest.

The new featured ones, I just did myself.

I just found some
character on Shutter Stock.

I went back like, O.
G.

Otari Hacker for the people
who followed us for a long time.

We had this little character on
our images, and I wanted to do something

similar because I actually missed it.
I felt like it was cool, actually.

I found the same, a collection
of character on Shutter Stock.

Cost me €199 to download
750 of them or something.

So enough to make all the featured images
we probably need for the site.

I just made a template on Canva that
reminds you of the brand with the little

grid and noise and everything, but also
has different colours so that the grid

effect looks a little bit interesting.

Each one has a different colour
when they’re next to each other.

It’s quite a bit of work to make them.
It’s not so simple.

You need to cut the vectors, etc.

It’s just hard to give that
to someone who is not a designer.

But also, I hate the of paying
70 bucks for a future image.

It just feels like not very well
spent amount of money.

I’ve just built my templates
and we’re just going to do that.

Now making one takes me maybe five minutes
or something, and my wife

can do them, and I might train
some other team members to do them.

But you’re never better
yourself than by yourself.

Can you say that in English?
Yeah, that makes sense.

The job is better than
if you do it yourself.

If you want something done
right, do it yourself.

That’s how you say it in English.

So during this whole process,
we started around August last year.

We were looking at 10 months in total,
but it wasn’t really 10 months.

You were building that for
just really two and a half,

three months at the end there.

We tried a few other options
that didn’t work out, and the design,

the bulk of it was done fairly early on.

So if you were to do it again, how quickly
do you think you could run this project?

Do I count the designer time as well?

Yeah, everything.

The designer time is quite long, I think.

I think it’s the planning.

It’s easy three months, I think.

But again, it’s not full-time.

It’s just like you prepare
some feedback for a designer

and then see you next week, basically.

And then you just do that again every
single week for two or three months.

But I think getting the base right
is quite important because it’s like

if you have to figure stuff out when
you’re building, it’s a pain in the ass.

So I would say two, three
for the designing and then

two months for building maybe,
something like this, and that’s it.

I think if I don’t need to refine
the developer guy and I can just

go grab him and let’s make another site,
then we can build a site in two months.

The thing is, A lot of things
we’ve built in this, we can actually

reuse on any other site at this point.

When you build into a framework
like Generate Press, you do it once

and then you can reuse later.

I think in two months,
I could rebuild what we have.

I have today.

But to be honest, I’d rather just further
build this one because we still

have stuff to do actually.

Like, random reviews are not designed,
single reviews are not designed,

mobile table of content is not designed.

There are definitely more things
that this site needs.

It’s just a cool new base and a base
where we can actually do things.

But if you ask me what’s the percentage
completion of the total project?

I would say 65%, you know.

Okay, so you still think we
got another few months before

or you be in that happy place?

Yeah, definitely.

I really think that if we make
custom page templates for different post

templates, et cetera, we can
get higher rankings as well and so on.

So now is the time to actually
do the optimisation part.

Same, we have some post
templates that we use a lot.

We write for a lot of similar keywords.

And I feel like we need to design custom.

Now we can design really custom templates
for these posts and not just

look like a generic blog post,
but almost like a custom page.

It makes sense when you use it
100 times or something.

Now we have this tech capability and it’s
like it would be a shame to stop now.

It’s like now we can capitalise
on it and push our advantage

compared to the competition.

That’s what I intend to do, basically.

My last question is, if you were to
do all again, but on a super low budget,

where would you put your resources
or where would you spend money?

I mean, if it’s me, I’ll spend it
all on design, I think.

Okay.
I’ll just build everything myself.

But I understand that not everyone is
as comfortable as me in building, right?

If you’re not…

I mean, spending what
you’re not good at, basically.

The problem is if you’re not good
at designing, not good at building,

then you need to spend on both of these.

It’s challenging because low cost
builders, they will build it

like shit, to be honest.

I mean, not all of them,
but a lot of them.

I’ve seen how people do things,
and I’m shaking my head every time.

My recommendation is before you spend
any money,

no doubt on a couple of these WordPress
resources that I’m going to give you now

so that you don’t have to pay someone
to build it so that you can actually

pay for the design because
that’s much harder to learn.

And then you pay for the design
or you just mostly copy another design.

If you want to be really cheap, find
another site you really like that’s not

in your industry so that it It doesn’t
feel like you copied them.

And then just copy that
and learn WordPress yourself.

And here’s four resources
you can use for that.

One, the Admin Bar.

It’s a small YouTube channel
that talks almost exclusively

about Generate Press and gives you
simple tricks, 10 minute videos

on simple tricks on how to do stuff.
Very, very, very good.

WP Tuts, which is more on Bricks,
but also a lot of WordPress plugins

that can help you.

So for example, we use a gallery plugin
called Happy Files that It allows us

to classify the different images
in different folders, etc.

So I got it from this
channel, for example.

Dave Foy is also a bunch
of Generate Press tutorial.

And Mike Oliver actually
has a membership with prebuilt

Generate Press frameworks.

That’s very nerdy.

But I think for like $39, you can actually
steal a lot of stuff from there legally

because you’re paying for it.

And so it’s a pretty cool place
to essentially get a lot

of Generate Press advice.

And Also, the Genoite press Facebook
community is pretty good, actually.

It’s like, I would learn all of that.

We’ll put links to all those resources
on the show notes that go along

with this podcast as well.
Yeah.

It’s like, if you have no money,
you need to give time instead, basically.

That’s the reality of it.

It’s like you either have time, money, or
talent, and you spend two out of three.

To be honest, I’ve done that.

I’ve done the learning
for General Presence.

It’s not the end of the world.

I think bricks is more challenging.
It would take me longer.

But if I was building size full-time,
I would probably switch to bricks.

So yeah, that’s pretty much the rebuild.

Fingers crossed, our conversions
hold up, but so far, so good.

And, yeah, it’s really…

Looking at the results
now, I’m pretty happy, actually.

It’s not perfect, but I think
we’ve stepped up quite a lot.

And most importantly, we can justify it
looking at the increase in conversion,

be like, Okay, that was actually time
well spent because it’s going to help us

both deploy more things faster,
which should help us do better.

And conversions are already up, basically.

And as you said, this is
just the start, really.

This is the base that we can then
build all this other cool stuff

on top of as well.
Yeah.

I think websites have
a lifespan of five years.

I think every five years,
you should probably redesign them.

We have five years now, but you
need to understand when you’re at

the beginning of the cycle
to push your advantage because as time

passes, you’re essentially
falling behind in tech slowly.

I’m talking about this class system
is super cool, but in five years,

there might be something way cooler
where you have an AI agent

that prebuilds everything
and it’s 10 times faster and so on.

But we can’t implement
it in our current site.

So it’s like you need to understand
when you are at an advantage and take

advantage and push it while you have it.

And that’s probably a period of 2-3 years.

The last two years of a website,
you tend to just be slugging behind

and having other projects
to finish before you do this.

It’s like, yeah, it’s time
to take advantage of this now, basically.

Okay, well, I guess that is the podcast.

Thanks for listening, everyone.
We hope you enjoyed it.

I was pretty nerdy, but also people
want us to share real-life experience.

That’s real-life experience.

That’s something that you
can tangibly see.

You can go check the notes
that we’re sharing below,

like my inspiration notes and so on.

If you want some ideas on how to do this,
how we structure this stuff.

Redesigning your site, even
if you’ve been killed by a Google

update, might be a good idea.

I’m pretty sure at some point,
is going to have to turn some of

what they’ve done around.

And when that happens,
that should pay off.

But even if it doesn’t, eventually,
even from social traffic, even

from a trust building perspective,
etc, it’s quite important.

So maybe don’t go as far as we have,
but it’s still a good idea to make sure

you use all these new systems.

Hope you enjoyed it and see you next time.
Bye-bye.