How A Business Website Is Born

I’m guilty… I admit it.For too long I’ve been guilty of having a pretty damn poor website for my business.This blog post explains in detail how we have now turned it into a great business website (and exactly why that is the case). It's a warts and all look at how to launch a website that kicks goals in 2018, and how to go from concept to finished product, like this:

But first, as I opened with until recently our site has been poor.And this is despite preaching to our clients all the damn time about improving their own sites!We’ve been banging on to them about how important their conversion rate is.Critiquing their copywriting and offer.Saying they should set up marketing automation and sales funnels.Recommending all sorts of whizz bang internet marketing nerdy type stuff.And all the while... not practising what we preach.Well, that all changed recently with the launch of our new site.I’ll show you how our new site was taken from nothing more than a concept to a finished product.We’ll explore in detail what it takes to create a business website that not only looks good, but actually serves a purpose when it comes to generating new business.If you’re thinking about making changes to your own site, this post will be a good barometer of what you should be looking at.Let’s get into it.

The Strategy

I don’t know if you’ve noticed it, but there are a lot of digital agencies around these days.Who am I kidding.You’re probably a business owner or marketing manager, so you’ve definitely noticed it.There’s no doubt you’ve been exposed to countless numbers of these companies pushing their wares on Google Ads, Facebook ads, cold emails, telemarketers and so on…I get smashed by these ads every day too!Well, that’s the space our business operates in and it’s really competitive.And essentially, most of these companies are all making the same claims & running with the same offer.So before we started work on our new website, we needed to think about the strategy behind it.Now it could be madness for me to write about this, as I know our approach is going to be copied pretty quickly.But I’m doing it anyway.We started with one question:“What can we say and do with our website to stand out amongst all that noise?”Because our old site wasn’t cutting it.Here is the old home page. It hasn’t changed in the three years we’ve been operating:

It kind of looks like every other agency out there right?Talking about ourselves in the headline.Offering a “free consultation” as the main call to action.Below the fold, listing a range of digital marketing tactics like SEO, AdWords, Analytics etc:

Then listing a range of features like no lock in contracts, strong reporting, run by humans etc - which a lot of other agencies claim as well.

All of this is…. very pedestrian.So before we started work on the site, we settled on a new strategy.In our case, the strategy behind the site was simplified to two main areas:

1. Speak to the reader about the stuff THEY cared about
2. Offer something of value to the visitor first rather than trying to get them to enquire about our services right away
3. Educate our visitors about various aspects of digital marketing, build some trust and over time win enquiries from the people who can see we know what we’re doing

In the online advertising space it’s pretty easy to get too focused on tactics, especially if you’re doing this stuff every day.That’s why most agencies talk all about tactics like they’re a selling point, for example, shouting all about link building, onsite optimisation, technical audits, managing keywords bids etcIn our experience, business owners and marketing managers don’t necessarily care about that stuff.Sure, it’s important to actually do and report on once you get to work.But what do they really care about?What can we do for them, and most importantly, can we help them hit their goals.That’s normally more leads.More sales.Is the phone ringing?We decided to change our website approach to talk to our potential customers about the outcomes & benefits they’d get from working with us rather than focusing on the tactics we’d use to get there.This is something I recommend you look at for your own site.If you are getting bogged down in your own industry jargon and tactics rather than speaking about the outcomes and benefits your customers would enjoy working with you, it’s worth taking a look at.Second of all, in our world every agency is out there asking people to book in a free strategy call or meeting or offering a free review of some sort.There’s a couple of things I don’t like about this.First of all, a lot of the time these reviews are very generic, or automated by software without providing much value at all. They often focus on “tactics” rather than giving actionable advice.And second of all, asking people to get in touch with you before you’ve proven yourself or given something of value is quite often not the way to go about things.That’s because at any given time people sit in one of these five segments of the buyer’s pyramid:

If you make the main call to action of your website an ask for people to get in touch for a free strategy session or for a quote or something like that, it is focusing purely on that small little segment at the pointy end of the pyramid.And if your product or service is sold on your expertise, the quality of your service, the return-on-investment it generates, the value provided etc then chances are people will need to learn more about you first.With our business, we know we’re not the cheapest out there, and nor do we wish to be be. To deliver quality lead generation and growth services for businesses that actually make a difference to their bottom line takes a lot of time, expertise, strategy and skillful staff... which means racing to the bottom on price is a lose for all involved.So rather than encouraging people to get in touch for a quote (normally a price driven lead) we instead chose to offer a really comprehensive report on the exact approach to generating leads online that is working right now.This report educates our potential customer, shows off our expertise and introduces them to the value and really strong return on investment that our approach to doing things might bring.We then use marketing automation software to follow up and build trust with that audience over time, which can lead to an enquiry for our services in the future.So that’s the strategy side of things taken care of.

The Sitemap

Now that we knew the general approach to take with the site, the next step was figuring out what pages should go on it.Our old site was pretty standard for our industry.It had the home page and then a bunch of pages for each service/tactic that we use.Here’s the main navigation on the old site:

Outside of the services, we also had about us, some examples of work and a blog.Pretty standard.But also, pretty useless in my opinion.Once again, to improve on this I put myself in the shoes of the person using the site.I knew they would be business owners or marketing managers that care about growing their business.I also knew from the many discussions we have had with business owners over the past few years, they typically fit into two buckets.

• Those that rely on generating leads.
• Those that rely on generating sales.

And that’s really what they care about at the end of the day... they rarely truly care about the tactics used to generate those leads or sales.Sure, they might come to us asking about SEO or AdWords.But it’s not because they’re a search marketing nerd that loves that stuff like I am.Asking about SEO and AdWords is really asking “how can I get more leads/sales”.So that being the case, I decided to gear our website around those two areas.We created a “How Can We Help” category with the following two pages:

• I Need More Leads
• I Need More Online Sales

This section takes pride of place in our main navigation, home page and footer.We still have the services pages, but they now sit as a secondary focus rather than taking prime positioning on the site.We call out the how can we help section right away on the home page:

And it also gets prime position on the left hand side of the main menu, as well as repeating the tiles again:

In addition to these two new pages, we compiled a list of the rest of the pages for the site in a Google Docs spreadsheet and wrote the title and description tag for them right at the start:

This way, we had a clear record of which pages had to have copy written for them and wireframes & designs drawn up.

Copywriting

It’s important you have a clear idea what you want to say with your site before you start the design work, as your copy essentially dictates the way the page looks and feels.So by this point, we had a clear idea of the following:

1. What the main offer would be for our website (the free report)
2. The audience the site is targeting (business owners and marketing managers)
3. The pages that will go on the website

Before we started any design work, we had to make sure we knew exactly what we would say on the pages to help our target audience to take us up on our offer.We used direct-response copywriting principles to make this happen.First, I created a Google Doc file for every main page in the sitemap:

From there, it was a matter of working out what to say on each page.As mentioned, I used “direct-response” copy tactics to write each page.The art of writing copy that really sells is a topic that I can’t cover in depth in this blog post.But essentially, what it’s all about is using the compelling benefits of your product/service and the psychological triggers we all have in common to encourage the reader to take the action you want them to.With this style of copy there is a lot of talking directly to the end user and very little talk about yourself.There is also very much a focus on benefits and outcomes to the person for using your product/service rather than rattling on about features.It does take quite a lot of training to grasp good copywriting skills.In fact, I have read well into the double digits of books just on copywriting and advertising alone:

That’s a snapshot of some of the titles on my bookshelf at the moment (I definitely recommend checking them out).When you consume books like this, as well as copywriting courses and then study the advertising and marketing funnels of top-notch advertisers in Australia and overseas, you pick up on many of the little tricks copywriters use to get their message across.So when it comes to writing the copy for a website, you’ll need to do your own research and educate yourself on the key principles of direct response sales copy.I used everything I’ve learnt from those books and from running successful advertising campaigns for our clients to craft the copy for our site.If you’re looking for inspiration for your own website, in addition to the above books, I’d recommend you check out the following:

• Kopywriting Kourse Blog - plenty of free guides as well as paid training
• Persuasive Sales Copywriting - a great blog post on the basics
• AWAI Sales Letter - this is a very famous sales letter, written to sell copywriting training. Well worth a read.

Those three will be more than enough to get you started, and should be able to assist you making improvements to your own website copy.I’d also recommend you turn to the largest competitors in your space, or to similar overseas businesses to see what you can glean from their websites. Check out the main pages, sign up to mailing lists and study what comes back at you.As for the process.Essentially, I would come up with numerous headings, subheadings and call to actions for every page on the site, just like below:

The idea is to write a lot and then pick the best for each page.In time, I might look at A/B testing the leftover copy to really drill down on which resonates most with our readers.At the end of this process, I had every page on the site written in a Google doc before one pixel of design work had started.

Wireframes

Okay, so now that we have the pages identified and written, it’s time to design the site right?Not quite.We need to prepare wireframes before the designer can get to work.Like blueprints for a house, wireframes give designers parameters to work within.Designers have an eye for design.They can make things look beautiful.But all too often, they can design something that is visually stunning, yet does very little to drive measurable outcomes for a business like ‘more leads’.And if I had to choose between a beautiful site or a site that generated leads, I’d take the latter every day of the week.The benefit of doing up wireframes first is that we can have the best of both worlds.Wireframes allow you to make it clear what the “bones” of your design should be like, along with any must-have elements you feel will help the site to generate leads or sales. The designer can then work off that and add their own flare.The good news is there is a range of wireframing tools out there that make it very easy for you to drag and drop and quickly mockup an outline of what your page should look like.Here’s a screenshot of a page in our wireframing tool of choice Moqups:

And here’s a closer look at the actual wireframe itself:

This is a great way to design a site.As you can see, I have made it clear how I want the content to be laid out on the page, and given a rough guideline for where images and navigational elements should be positioned.I have also included all of the copy I wrote in the previous step throughout the wireframe.As a comparison, here is what the finished version of the page looks like:

As you can see, the finished product looks visually fantastic, however, it follows the framework set by the wireframe for the page.I ensured a range of “conversion” design principles are in the design. These are specific design and psychological triggers that have been proven in numerous studies to increase the number of conversions your site generates, including:

• Prominent phone number
• Clear and single call to action (send me the report)
• Social proof in the form of the company logos and Google rating
• Live chat always present to make it easy to get in touch

And so on and so forth.

Design

With the wireframes in place it’s time to design.And this section is pretty straight forward really.The process is:

1. Brief in the designer with “art direction” including logos, fonts and brand colour palettes & guidelines
2. Provide the wireframes for each page
3. Designer delivers first draft
4. We go through a couple of rounds of revisions until the design is perfect
5. Designer delivers a finished PSD file

Not every business will have set fonts and colours, however, in our case we did.So I made sure to brief in our designer with the specific fonts and colour codes to be using throughout the designs.We also had a chat re: the types of imagery to be used in the designs.From there, our designer got to work bringing the wireframes to life in Photoshop.When the layouts were ready, they were loaded in to a tool called InVision.This is a design prototyping tool that allows for rapid feedback from everyone involved in the project.Here’s a screenshot of some of our layouts in the tool:

Within each layout, our team could review and provide feedback.You do this by clicking on a section of the page and leaving a comment as per the below screenshot:

A running record of all comments is recorded for each layout, along with the ability to have back and forth conversations with team members.By approaching the design process this way, we were able to review and provide feedback for revisions very quickly and efficiently.All members of our team had access, and the designs were all managed through this tool until we settled on the finished version of each page.Once the designs had been approved, the final versions were provided as an Adobe Photoshop file like below:

With the designs finished it was time to start coding.

Development

The next stage is taking that lovely looking design and turning it into a functional website.This can take anywhere from a couple of weeks to 10 weeks, depending on how complex the site is and how many revisions there are.We built our site on the WordPress platform.We chose this as the CMS is easy to use, so we can make simple edits to the site on the fly, as well as make use of the great blogging features WordPress allows.The development stage is made up of the following main areas:

1. Slicing up the designs into individual images
2. Creating basic HTML & CSS files
3. Converting the files into WordPress format

SlicingOur developers started the process by taking each of the Photoshop designs we had for the various pages on the site.These are then “sliced” into various elements. For example:

• Headers
• Footer
• Backgrounds
• Images used throughout the site

The end result is you have the site sliced into all of the individual images that will be used.Wherever possible, we look for content that can be replaced with code rather than an image.For example, the footer of a site is a solid grey colour.This does not need to be an image, as the file size is large and it slows down the site.Instead of slicing that as an image, we use code to tell the browser what colour to show.By thinking like this across the entire site, we’re able to keep the size of each page smaller and speed up load times.CodingOnce the images are sliced, they need to be converted into HTML.This is the language of the web.HTML tells your browser where to look for images and how to display pages.It looks a little something like this:

Pretty hard to look at right?That code has been “concatenated” to make it faster loading. This means removing every space or line in the code to reduce its size.Makes it kind of hard to read to a human, but works just fine for a web browser.WordPress ConversionThe next step is converting the HTML into a format that works with WordPress.WordPress uses “themes” to display content, and these themes have standard files for the header, footer, page layout etc.Our developers took the sliced designs, HTML and CSS and converted them to work with WordPress as a custom theme.Here’s what the code for that looks like (a little bit nicer to read this time):

The real beauty of WordPress is the backend of it.It’s very easy to use and make changes to the site once you have set it up.Here’s what it looks like.The home page of our site looks like this to the visitor:

But in the WordPress backend, here’s that same page:

As you can see, each section is broken out with an easy to edit field, making management of the site much easier.

Testing, QA & Speed

We’re nearly there - the point we launch the site on the world.But before doing that, it needs to be put through its paces.The final stage before sending the site live is to test and essentially try and break everything with the site.Better to get that stuff sorted before you publish it on your live domain.At Local Digital, we have a standard set of testing and QA we put all of our sites through including:

1. Installing a range of important plugins for WordPress
2. Setting up various security tools and software
3. Testing all forms and integrations with other tools like CRM
4. Speeding up the site as much as possible
5. Testing the site on various browsers, devices and operating systems
6. Testing the site at various resolutions and screen sizes

And a range of other areas.Testing on various browsers, operating systems and resolutions is very important.A site that looks good in Chrome on Windows on a laptop might look absolutely horrible in Safari on a 27” iMac.This can cost your business leads, sales and hit your bottom line, and a lot of time businesses are not even aware of this.We use a tool called BrowserStack to test our websites.It allows you to simulate all of the major operating systems and browsers:

It’s as simple as testing it on the OS and Browser from a drop down like the above.This does take quite a bit of manhours to do, however, it’s well worth it in the long run.The below screenshot from the BrowserStack tool shows our site in the latest version of Safari on a mac at 1920 x 1080 resolution:

All looking good.But what about larger resolution devices?People with 27” displays are looking at 2560 x 1440 pixels compared to the above which is 1920 x 1080.Although 1920 x 1080 is the most common resolution, there are plenty of users out there on higher resolutions.We test that by connecting our laptop up to a large physical monitor in our office:

Our developers can make tweaks to the site based on how it looks here.Once all of the testing is out of the way, it’s time to send the site live.

Launch

Luckily, this part is pretty straightforward.First, we install the site on our server.Then, we make updates to the htaccess file on the server to tell it to serve our new site rather than the old site.To the end user, this is not noticeable. One day the old site is showing, then the next the new site is there.However, there’s a bit more to it.With the change to the new site, we got rid of a bunch of old pages. If we did nothing about that, it meant when people try to visit the old pages they see an ugly error like this:

We get around this by redirecting all of the old pages to the most relevant new page.We took an audit of all of the old site pages that were no longer going to exist.Then, we mapped out in an Excel document where they should point on the new site like so:

These redirects are set-up on the server so that if someone tries to load the old page that no longer exists, it redirects them to the new page.The other big aspect of this is trying to speed the site up as much as possible.Fast loading sites are very important.First, it’s a good experience for the end user. People are impatient and won’t wait around for a slow site.And second, Google favours faster sites over slower sites.Our site is very “designy” with a lot of images used throughout, and at first, it was extremely slow:

That’s 21 seconds to load the home page and a huge 5.1 MB file size for the site.Once it was launched, we did quite a lot of work to speed up the site.This included:

• Compressing all images to reduce file size from as high as 2MB down to more manageable sizes of 200kb or less
• Setting up caching tools
• Combining javascript and css files into one file to reduce requests
• Concatenating HTML code to make it smaller
• Removing unused scripts from Google tag manager

And a bunch of other changes.Here’s what that looks like now:

The size has been reduced by a couple of megabytes, the load speed is down under 3 seconds, and the number of requests the site makes reduced.Loading in less than 3 seconds for such an image heavy site is a good result.Post-launch there was a bunch of other testing:

• Checking all forms work
• Checking all integrations work
• Using every page on the site and looking for errors

Anything identified was recorded down and resolved by our developers.And that pretty much is that

Conclusion

So there we have it - a taste of how a new business site is born.If you are thinking about launching a new site for your business, this post should serve as a good framework.Approach the process along these lines and you should ensure a successful new site.In particular, the strategy/offer/copywriting side of things combined with a high converting design is absolutely essential in this day and age.If you’re interested in finding out how to bypass figuring it out yourself, we might be able to deliver a new website for your business. Please give us a call on 1300 896 007 to find out if we’re a suitable fit to work together.And if you’re looking to learn more about the process working best for growing your business online right now, check out our in-depth report “How Your Top Competitors Are Crushing it Online”.This report does a deep dive on strategy, offers, copywriting, design, traffic sources, analytics, reporting and more and will give you a great level of insight into how best to approach marketing your business online using the same tactics the top Australian advertisers use.