Transcript (slightly edited)
Hi, it’s Sabine at From Scratch with a Web Audit for the Rainforest.
What’s a Web Audit for the Rainforest?
Well, it’s basically a free web audit of one URL on your website. It’s not entirely free — because what we do ask for is a small donation to a rainforest charity. Just enough to protect one square metre of rainforest.
You can find out more about these web audits here. There’s also an email version of this audit. Take a look at that, too. Maybe it’s interesting for you because you’re planning some changes or working on something exciting and want some pro feedback on your work.
But without further ado, I want to show you what the Web Audit is all about today. It’s a Web Audit for Little Green Space, which is a design studio in London. Little Green Space only works with ecopreneur businesses and organizations. This is what the Hero section of the website looks like.
What a Web Audit for the Rainforest includes
But before we dive into that, I just quickly want to show you what Jenny, the founder of Little Green Space, is going to receive from us.
Because she receives this video in addition to this version of her website: an annotated version where we’ve got 32 comments. Most of what I’m telling you in this video is also on that comment list. There might be a couple of extra ones. You can click here and then it expands so you can see all of them, or you can just click on one of the buttons, like here: number five, and then you see my comment and you can resolve it. I can edit it. You can add a reply. That’s what Jenny is receiving.
She will also be able to see a quick mobile view of her page here. And you can actually choose what device you’ve got. So, on an iPad, it would look like this.
I focused on the desktop version in my audit. However, I think the web page is set up to work really well on mobile, too. So, yeah, without spending too much time in this view, I just want to go back to the actual website, the way you would see it when you visit it.
Can there ever be 2 headlines in the Hero Section?
We’re starting with this amazing Hero section. It’s just simply stunning. I was immediately drawn in by this illustration.
There are two headlines in this Hero section:
- “expert creative storytelling for earth-friendly brands”
- “creative studio committed to a better future”.
Normally, we would say: don’t have two such headlines, because they’re competing with each other. In this case, I think they are actually complementing each other.
The first one answers the question: what does Little Green Space do? — Well, it does expert creative storytelling for earth-friendly brands. So we’re like, what do you do? How do you do it? Who do you do it for?
Whereas the second headline: “creative studio” — answers the questions: what is Little Green Space? and: What are your values?
So, the headlines are looking at Little Green Space through different lenses. There’s no contradiction. I think that’s why it probably works. They’re also clear: I know exactly what it’s all about.
Matching emotions in illustration and copy
Then we get into this bit of text here. I struggled a little bit, I have to admit — not because it’s unclear, just because we’ve got this amazing illustration which really nods to all of the SDGs that Little Green Space is working towards, like
- Climate Action
- Reduced Inequalities
- Responsible Production and Consumption
- Industry, Innovation and Infrastructure.
They’re all somehow in that illustration, and it really grabs me emotionally.
In comparison, this paragraph is just a little bit dry and corporate. That’s down to words like these: “provides expert visual storytelling” or “we are committed to businesses”.
- It’s not very direct.
- It’s not talking to the reader by saying “you”.
- It’s not using language that people would use in conversation when they talk naturally.
I would recommend rewriting that to give it a little bit more emotional oomph, so it can actually fly with what you’ve got here in the illustration.
Do your buttons clearly explain what happens when we press them?
Next, we’ve got the “work together” button, which is also up here. (Just FYI, the button doesn’t travel with me when I scroll.) When I click it, it takes me down to this booking form, which is really a contact form.
I would recommend looking at the wording of that button again: there are a couple of things that I expect when I see it. But I would not necessarily expect just a simple “let’s chat” form where I can put in my name and my email —and then I don’t even know exactly what happens next.
So I would rephrase as something like “let’s get to know each other”.
By the way, it’s really worth testing first person button phrasing: something like “let’s” or “yes, I want to”. It has been shown in some tests and trials that that performs better than button copy that talks in the third person (in the “he/she/it/they” form). So that’s worth testing.
I would probably recommend something like “let’s get to know each other” or something like that. Or “get in touch” maybe. Just something that is a little less than “working together” — because we’re not yet deciding to work together.
I can’t hire you through that form directly. And that’s also good because people are probably not ready to hire Little Green Space just after reading this and having this illustration shown to them. They probably need a little bit more information, and that’s fine. So let’s make the button really transparent about what happens when I click it.
Top tip: always add a headline above logos on your website
Now we’ve got some nice logos of past clients of Little Green Space.
The only thing I’d recommend is framing that with a little headline. Just saying something like: “Trusted by Eco Brands Like These”. So I know what I’m dealing with here, because if I’ve never heard of IndigiAds, for example, or Yakum, then I’m not quite sure — I see a gorilla and the logo, but what is it about? It’s good for people to have a little bit of context.
It’s also helpful with accessibility, because if you’ve got people coming to your page and using a screen reader, if you’re not using alt text on those logos and if you’re not giving them some sort of headline, it’s much harder for them to understand what they’re dealing with. And they might not even get any of this information at all.
Tell people why they should visit your social media profile
Finally, before we move to the next section of the page, we’ve got this really minimal, beautiful menu. (I like minimal menus. You might not get that impression from our own website because it’s a massive menu. But really, I do like them.)
Here, Instagram is a bit of a tricky one. You’ve only got the icon. So, again, for people who can’t see the icon, it’s really difficult to grasp.
But also, you’re not telling me why I should go to Instagram. And if you’re anything like me, (sigh) — social media is dangerous. You go there, you get lost in your feeds. You completely forget why you actually went there in the first place. So if you’re looking to get people to to contact you, if you’re looking to build that sort of relationship, it may not be very helpful to send them to Instagram.
At the very least, I would recommend thinking about what Instagram is supposed to do for your business and then make that the link in the menu. You know, word it explicitly. Spell it out. Say something like, “see our portfolio on Instagram” or something like that.
That way you’re still telling them that they’re leaving your website and going to Instagram, but it’s not like they’re going there aimlessly. They go there with a mission. And that way it’s easier to keep everything neat and tidy and also have good conversion.
However, if there’s no real purpose for Instagram, other than staying in touch, then put it somewhere else, like on a contact page or in your footer so that people aren’t distracted from the primary purpose of their visit here. Namely, to get in touch and book a consultation so they can then work with you.
What should go into a service description?
Right, moving on to the next section. We’ve got a bit of an explanation of what Little Green Space actually does, namely web design, branding and illustration. This section is great, but could be even better.
The main thing I would recommend doing is adding a bit of a portfolio beyond these images, because right now I can’t really do much with any of those. I can’t look at them in more depth. I can’t see anything about the background of the work.
Who is this client, for example? Not easy to read the the logo. I’m still struggling with that a little bit.
I can’t click here to see anything more. Would be great for a website if I could look at the live website.
For branding, it might be great to just see all of the different iterations of the brand:
- How is the brand expressed in different kinds of items or designs?
- What was the brief?
- How did you execute on it?
- Can you maybe give me a little bit of a case study?
And also with illustration:
- How is that illustration used?
- Was it a one-off Instagram post or is it actually a poster?
- What is it?
- Is it on the website?
Just to give me a better understanding of of the work.
Why you should never display your testimonials in a carousel
If you’ve got great testimonials for any of these past projects (like this one, which is about the Yakum brand — here you’ve got a testimonal from the Yakum director), then it would be very compelling if that testimonial was always visible and linked to the work that you did for them. So I’ve got branding, I’ve got the visual example, and I’ve got the feedback from the client, all next to each other. A potential client might say, “hm, it’s not the style that WE want to go for. But I can see from the surrounding ones that Little Green Space are really versatile. They can do all sorts of things. And the director of that company was really happy with the work. So that builds my trust and I want to get in touch.”
But please don’t hide your testimonials in a slide show or carousel.
I mean, this carousel is OK for accessibility because at least I have to actively click through it. It’s not automatically switching to the next testimonial.
But you’re really losing the majority of your impact this way, because I want to be able to see different bits of feedback about different claims that you’re making on the page in order to corroborate those claims.
If you’re only ever giving me one of them and it’s in its own section and not linked to any of the claims you’re making, then you’re losing that effect of building my trust, because I have to use my own mental energy to first think: “Oh yeah, I could click through all of them” — and then also make the connection between the projects you’ve worked on, the claims you’ve made and the social proof that we’ve got available.
So when going through the website and optimizing it, I would say: OK, where are we making a claim about something? Do we have a proof point, either by showing an image or ideally also by backing it up with a client’s testimonial? And not hiding them, because I don’t know how many there are — probably around seven or eight — but there’s only ever ONE that I can see at a glance.
And I have to put in some effort to see all the others.
So I never recommend having testimonial carousels, never. Especially not for smaller brands that are maybe a little less well-known on on the global marketplace.
How can you make your headlines work harder?
Right. Moving on to this section. I think there’s a little bit of an issue with this image today, because when I looked at this before, the whole bit here was filled up by the image. And for some reason, that’s not happening for me today.
Here Little Green Space go a little bit more into the philosophy that drives their work. So here we’ve got the headline, “brands that reflect the natural world”, which is great and very descriptive.
In terms of how to write headlines, I would recommend making the headlines more direct. So, talking to the person and helping them to understand that their brand should reflect the natural world.
Now you’re just saying: “brands that reflect the natural world”. But you’re not really saying explicitly what the relationship of that is to your work or to your client.
So you could say something like
- “we create brands that reflect the natural world”
- or a question like “does your brand reflect the natural world?”
- or something like “ecopreneur brands should reflect the natural world”.
There are different ways of creating that relationship between you as a service provider and the client and this concept of “brands that reflect the natural world”. And it would make sense to make that more explicit. So it has more of an emotional oomph.
There’s a little bit more text there to explain what that actually means. This image, it’s of a mountain. So it’s not a brand that’s being depicted here.
What I would love to see here is a brand that reflects the natural world. So, something like a picture of a mountain in the real world and a logo or a brand design that picks up on elements of that image to show that this brand reflects the natural world and in what way. So I can actually see it for myself.
Because the mountain itself is not a brand that reflects the natural world. It’s just the natural world. It’s a great illustrative image, but it’s not illustrating the entirety of the text right next to it. And so it could be a stronger image here.
“As a great brand, you have the option of taking inspiration from nature.”
Not just as a great brand. Anyone has that option. So maybe we can tighten that a little bit or even leave that sentence off. Because now we’re explaining what the brands that reflect the natural world are like.
“Earth, Air, Fire and Water provide appealing colours and textures while natural shapes are automatically pleasing to our eye, a pattern that we intuitively connect with.”
Just to make this a bit easier to read, it would make sense to shorten that sentence, to really break it into two:
- “Earth, Air, Fire and Water provide appealing colours and textures”. Full stop.
- “Natural shapes are automatically pleasing to our eye, a pattern that we intuitively connect with.”
So we’ve got one idea per sentence and it’s easier to read.
“Colours spark an emotional response and are powerful marketing tools. We use nature to predict the effect colours have on the human psyche and crucially, the influence they have over brand recognition.”
“Over” reads a little odd here, but yeah, that sentence for me is really the core. I would put that first and then the rest of the paragraph. I would leave this bit off and instead embed that message in the headline. And then it’s a bit more concise, and it focuses more on your strength and how it’s driven by your eco philosophy.
How to integrate an ebook into your website strategy
Now let’s come to a question that Jenny, the founder of Little Green Space, wanted us to address front and center in this audit. And yet we’re only coming to it now because I wanted you to have the experience — as somebody who watches this audit, I wanted you to have the experience of what it’s like to come to the page and look at it in the order that the information is being presented in.
The question that Jenny asked about is how to incorporate, how to integrate an ebook that she’s written into the setup of the page, but also from a marketing strategy point of view: how to make it work for her business.
Little Green Space wants to mainly sell one-on-one services at this point. So the question is:
- With an 80-page online workbook or PDF workbook, do you want to sell that as a standalone item?
- Do you want to give it away as a lead magnet?
- And how does it appear on the website?
Why am I bringing this up now?
Because the four elements and brand identity — Earth, Air, Fire, Water — that’s a big part of that ebook.
The e-book talks a lot about
- how to set up your eco business
- how to think about the values that you want to stand for
- how to incorporate them into your business every day — and then also
- how to build your branding on that foundation.
And it’s absolutely fascinating to see how Jenny describes these four different types of brands: the Earth brands, Air brands, Fire brands and Water brands.
That’s the true highlight of that workbook: to help people understand into what group they naturally fall and how that can drive their
- logo design
- font choices
- web design
- social media posts etc.
Leading with a fun & engaging quiz
I would recommend using the bit about the four elements and brand identity to create a really fun and engaging quiz where people can answer a few questions. If we go through the ebook together, we will find probably find enough questions and examples to build a quiz from.
The quiz would allow people to find out: is my brand an Air brand? And what does that mean for my choice of colour palette, or how to build my Instagram grid?
That kind of quiz could be really, really fun. Fun to create, but also fun to engage with. And then you could use that as a gateway into the ebook.
Why 80 pages is too long for a lead magnet
I would never recommend having an 80-page lead magnet.
We’ve got one at From Scratch, which is, I think, 24 pages. And I think that’s already a little long.
But 80 pages is definitely too long.
A lot of people download e-books from various websites and they don’t fully engage with them because they were free. And we tend to not fully use free stuff like that. Especially if it’s not really something I can do in 15 minutes and then I’ve already got a result.
The workbook that Jenny wrote is so in-depth that I would recommend setting aside a couple of hours to work through it at the very least. Because there’s so much value you will get out of it.
I would probably offer that as a paid product for people who love the work you do but can’t afford working with a designer just yet.
Or even for people who who want to get to know you better, who might have the budget, but really want to know more than they can find out through the website. It’s almost like dipping your toe in before you take the leap.
So it should be affordable. I’m not a fan of $100 type e-books. I don’t think that’s reasonable at all. I would think about it like this: OK, if I were to walk into a bookshop, what would I spend on a book like that? Then set the price accordingly. And use some sort of distribution through WooCommerce or whatever fits your website to make that available and just sell it online.
You can always use excerpts as lead magnets. You could say: OK, if you want to get tips that fit your Fire brand, then sign up here and I’ll occasionally send you an email with little nuggets of inspiration. And that way people get real value from signing up. It’s still optional. They don’t have to. It takes them on a journey of getting to know you better. And you’re not giving away your e-book, which then sits on somebody’s hard drive without ever being used.
So that that’s my my tip for how to use the ebook.
There’s more about the ebook here: “Your Guide to Ecopreneurship”. It’s absolutely magnificent. I mean, the illustrations, they’re just amazing. The way it’s put together. There’s so much good advice in there. It’s really actionable.
How & where to offer the quiz on the home page
The thing is though:
From this section onwards, “The four elements in brand identity”, we’re losing structure a little bit. This all needs to be tied together a little bit more firmly so I understand what the four elements have to do with the brands that reflect the natural world.
I would recommend offering the quiz at this point here. So we’re rewriting the section, choosing a different illustration here and then offering a quiz, saying: “find out how your brand can reflect the natural world”.
And that takes us to a quiz page, which you can also link here in the header menu. And then this bit about the four elements and brand identity, that’s being shown to people when they come to the quiz page. It’s a bit of an introduction. It tells them why they should take the quiz and makes them curious.
Offer the ebook on a separate page
And then you can spend the rest of your home page on, for example, talking about who you are and maybe teasing the ebook, too. But the e-book should be teased only on the home page, and then you should offer it on a separate page.
There, you can go into a little bit more depth and
- talk about what the book covers
- what you can do with it
- show a sneak peek and then
- offer a way to purchase the book as well.
Should your website say “I” or “we”?
At this point we learn that Margaux Carpentier is the person behind this illustration, these illustrations here and also, crucially, the illustration in the Hero section.
Let’s make sure that from the get go, we’re really clear on whose illustration this is.
When I come to the page and I learn that Little Green Space is run by Jenny Doré, I immediately have a bit of an expectation that all of the work I will see here is provided by Jenny.
However, it’s a creative studio. The page says “we”. It sounds like there’s more than one person behind it.
I think that needs to be made clearer so that we know exactly who Little Green Space is and what the relationship of various pieces of work that we see here is to Little Green Space.
If Margaux is available for commissions through Little Green Space, then why not add a little note here saying “illustration by Margaux Carpentier” — and then people can say, “hey, can we get something like Margaux’ illustration here?”
At least then it doesn’t sound like this was made by Jenny — when further down on the page, we find out it was in fact made by Margaux.
We can also make that clearer by adding a bit more text to the “about” bit here, because this text is really what makes it sound as if Little Green Space are only Jenny. I
f we add a few more sentences to say what Little Green Space is and what it encompasses, I think that’s going to be really helpful in clarifying who exactly is involved and what sort of team there is.
Choose images that direct the visitor’s gaze
I would also recommend having a picture that looks at people more directly. Maybe just use the one that’s currently next to the contact form.
Because when we have a picture where you’re looking to the left, our eye wants to follow your gaze. And so we’re not really looking at the copy underneath the image. There are click tests and heat maps that confirm: when there’s a picture with somebody looking to the left, then the visitor will also look to the left.
So what would be relatively easy, I suppose, is to swap the images that you’ve got. So here we’ve got the one where you’re looking at me, and here we swap the form with the image. And if you’re looking at the form because you’re looking towards the left, then people might be more likely to actually go and fill it in. It’s just a subtle way of getting people to take action.
Now, coming to a close, because we’re coming up to 30 minutes here.
We’ve got this section called “Questions”.
- They’re questions to think about for
- somebody who comes to the page or
- somebody who reads the book
- somebody setting up their business.
They’re really deep reflection questions. And so I think that the headline at the very least would need to make that clear.
The questions are addressed in the book. Maybe they’re even taken from the book. I would recommend writing a headline that says something like “the book helps you to address questions like these”. So it’s clear to me what the questions are about what I should do with them and so on.
And then finally there’s a “let’s chat” box.
This is a really easy way to generate a lot of leads for consultations. You’re not asking for a lot of information here. And that’s, of course, helpful in getting more people to fill this out.
However, if you’re looking to improve the quality of your leads, I would recommend adding more fields. Something like: “are you interested in branding, web design, illustrations, all of the above”. Or ask for information that will help you prepare for the consultation. And maybe even offer a scheduling tool of some sort so you don’t have to have the long back-and-forth between you and your prospect when you’re trying to set up the call. Just to streamline that a little bit.
It would make sense to rewrite the call to action from “work with me here” to something like “send” or “request a consultation” or “let’s find a date”.
Just to make all that copy a little bit more about what we’re really doing here. Because working with you, that’s still a question mark at this point and it’s a question mark in the future.
Another thing that might be good to add is the fact that at this point, all new Little Green Space clients will automatically receive this wonderful ebook free of charge.
So I would recommend adding it here or adding it where you’re talking about the book, so that people have another reason to think, “oh, this is a really nice offer. I would love to have that e-book. Let’s get in touch with Jenny to find out if we can work together.”
To finish things off: beautiful statement in the in the footer. Here, we’ve already got the Instagram icon, so maybe we can simply remove it from the main menu.
The website is wind powered. Absolutely love that.
Climate positive work force, that’s something I would recommend checking out. I didn’t know about this before meeting Jenny and Little Green Space, and I’m really intrigued by that.
How to get your own Web Audit for the Rainforest
Right, that’s it. Thirty two minutes or almost. Very sorry to have taken up so much time, but it’s a chunky website, and so I wanted to do it justice.
If you want your own Web Audit, check out from-scratch.net/freebies. There you can apply for your own Web Audit for the Rainforest.
Otherwise, we’ve got our big Web Audit as a paid service that you can book straight through the website, too.
If you’ve got any feedback or comments or questions about this audit, let us know.
Bye for now!