The Website Design Process Explained

The website design process can be long-winded and complicated.

But it doesn’t need to be! (Ours isn’t!)

At Canny, we try and simplify everything we can for our clients. And that includes both our branding process, and our web design process.

Sure, there’s a lot involved in designing and building a website. After all, it’s not an easy task!

To help you get the most out of your website design project, we’re outlining our entire website design project, from start to finish.

Just as a heads up, we’re going to skip over the initial client contact, making the agreement, and all of the legal bits, and jump straight into the website design itself. Startup founders looking for a quality website, this post should appeal to you.

So, let’s dive in!

Step 1: Website Discovery Session

The proposal has been drawn up, and an agreement has been made.

So where does the web design process start?

All of our projects start in exactly the same way at Canny, with a thorough discovery session.

Usually, we run our website Discovery Sessions from our offices, but have also ran them out of client offices in Belfast, Edinburgh, London, and across the rest of the world.

Sometimes, we’ll run a Discovery Session through Skype or Facetime, but find that better results can be driven with face to face engagement and joint scribbling!

A website Discovery Session can take anywhere from a half day to a full day, and even into the next day. It all depends on the size and scope of the website design project.

What we look to establish in your Discovery Session is:

1. The visual direction you want your website to take.
2. What success looks like for Phase One of the project.
3. What your current baseline is, and what we can do to improve it.

As features and long term goals have already been established in the proposal/quote phase, we’ll quickly run over that again to make sure nothing has changed.

We also cover off any industry specific knowledge and terminology that we need to be aware of.

This helps to keep everyone on the same page as your web design project progresses! (There’s nothing more confusing than everyone using different terminology when discussing the same section of a website.)

If we’ve worked with you on your branding and brand identity, then we’ll have already covered the next set of questions.

If not, we always ask:

1. What does your business do?
2. Who are your customers?
3. Where do you sit in your marketplace?
4. What should customers expect to see when they arrive at your website?
5. What is the primary purpose of your website?
6. What messaging needs to be conveyed?
7. What are your competitors doing, if there are any, and how should we differentiate?
8. How will will we measure these goals?

A well run Discovery Session will leave both sides of the table feeling like they know each other inside and out.

It’s the first building block in starting to build trust and the foundation of a great relationship.

Step 2: Visual Website Research

The next step we take, is to start solidifying the visual direction of the website.

We’ve already touched on visuals in your Discovery Session, but it helps to go away, and have both parties work together to create a joint project mood board for the project.

To do this, we prefer to use Pinterest.

Pinterest offers a few key benefits:

1. It’s free, and really simple to use!
2. A lot of people are already using the platform.
3. It offers suggestions based on what you’ve recently pinned.

We don’t just pin other website designs at this stage. We pin anything visual that might have an impact on the project!

We’re especially on the lookout for things that either work or don’t work.

It’s important to note that both of these are equally important.

By disqualifying certain design styles at this early stage, we can ensure time isn’t wasted exploring a visual direction that was never going to get approved.

Once we have a good number of pins (usually between 50 and 100), we’ll quickly whizz through them internally, remove duplicates, and highlight the key things we want to discuss with our client.

This helps to move the process along quicker, and keeps feedback sessions shorter and more concise.

We know that your time is valuable, and we don’t want to waste a minute of it!

Step 3: Visual Research Feedback Session

With website design, there’s usually a feedback session at every key step in the project.

The feedback session that follows the visual research needs to be concise and hard hitting.

When this session is over, everyone should have a solid idea for the visual direction (or directions) the website project could take.

Typically this session takes place through Skype, or on the telephone. Or, if clients are local, they can pop in and we can run them through it in person.

So, now what happens?

First, we skim over the Pinterest board with our client.

Then, gut reactions kick in, and the conversation gets rolling.

The way the website visual research feedback session runs, isn’t dissimilar to when we work with clients on branding.

What we’re looking for when through the website research, is three things:

1. Things they like: layouts, colours, illustrations, general website style.
2. Things they hate and why.
3. Designs that they imagine will or won’t work for their business, and why.

Gut reactions help with a lot of this. However, we then let our clients go away and feedback to us in their own time.

Sometimes, you need time to process your thoughts. Especially when confronted with so many visuals!

What we’re really looking for, is several “key” pins that we can refer back to throughout the project.

We also want to disqualify a lot of things too. Again, making sure we don’t go down the wrong path!

We’ll also whizz over any points or questions we had, and that typically concludes our visual feedback session.

A Note on Feedback Sessions

As we’re not looking to detail every single feedback session, here’s what we’re looking for when it comes to feedback.

Approval and Sign Off

In an ideal world, clients will love everything and will approve our ideas and direction straight away. That’s what we’re really looking for.

However, most clients tend to have…

Revisions and Amends

And that’s absolutely fine! Having amends and revisions to make is a natural part of the web design process.

By having a clear list of things that need changed or improved, we can crack on, and come back to you with a better solution.

Sometimes there’s a mix of approval, and amends. Certain elements work, others don’t. And that’s fine too.

Step 4: Wireframe Sketches and User Journey Planning

This is the step where things start coming together.

After hours of planning, discovery, and research, it’s time to start bringing your website design to life.

Here’s how we handle this at Canny (with a real life example).

Our client, Trench Networks, asked us to design and build a new website for them.

Trench have designed and engineered a WiFi Router specifically for construction sites and the construction industry. This service is called Outpost.

They also have a secondary service, WiFi SOS. A service that can help businesses get online within 24 hours.

The goal of their website was to generate more leads for their Outpost product.

So, we sat down and started to sketch things out.

We asked ourselves:

• What are visitors to the Trench website looking for?
• Where are site visitors coming from, and what do they know about Trench already?
• Who are the visitors to the website?
• Why should visitors use and trust Trench?
• When in the buying cycle are visitors coming to the website?

Here are a few of the first decisions we made:

Key Push

People within the construction industry are probably coming to the Trench website because of two things:

• They recognise they need better site WiFi and have found Trench organically.
• They’ve had an email campaign sent to them about Trench’s service.

Therefore, Outpost needed to be front and centre.

We decided the router should be the main focus of the hero section, and all of the language should be geared around the benefits of Outpost.

Job Roles / Benefits

To support the focus on Outpost, we also decided creating very specific “job role” pages would help.

In Trench’s case, there are three key job roles that they tend to sell to:

• Site Teams.
• IT Departments.
• Company Directors.

To account for that, we created three separate landing page designs that outline the benefits for each of those users.

Credibility Building

One of the key concerns in the construction industry, is the matter of trust.

There’s a lot of cowboys and rogue traders on the loose!

As such, we decided to utilise existing client logos and testimonials wherever we could, to help build trust with website visitors.

Clear Actions

One thing we learned about the construction industry, was that nobody has time for jargon or “industry bullshit.”

So, we made sure every action on the website was clear and concise.

From each page on the site, you can easily get in touch with Trench and find out how they can help.

Not only that, but each call to action is tailored to the specific page you’re viewing, so you can cut straight through the noise and get information relevant to your specific problem.

WiFi SOS

One of the key things we decided when it came to the WiFi SOS portion of the website, was that if your internet was down, you’d want it back up again in a jiffy.

Therefore, we opted for a big green, “Need Internet Quickly?” button at the top of every page.

This leads you directly to an enquiry form, which Trench respond to 24/7, allowing you to get your internet back quickly.

Trench were but one of our previous clients. If you’d like to see more of our website-related work, be sure to check out Aspire or iVent’s websites up on our portfolio page.

Step 5: Digital Wireframing

Once the initial wireframe sketches and general user journey are approved, it’s time to move on and produce a digital wireframe.

A lot of agencies that provide web design services tend to skip wireframing these days. They prefer to move straight into creating design work, but we find that wireframing really helps both our team and our clients.

The digital wireframing process involves taking our messy sketches and notes, and creating a polished, digital rendering of the site’s key pages and user journey.

These high definition wireframes allow us to get everything off our scraps of paper, and into the computer.

We then email the wireframes to clients, and ask them to sign off on them before starting the next step in the process.

Step 6: Homepage Design

Once the wireframes are approved, it’s onto the homepage design itself.

Now, we’re going to open a can of worms by posing this question:

Which should you design first?

• The desktop version of the homepage.
• The mobile version of the homepage.

Well, in our opinion, it completely depends on our client’s clients.

Canny’s Analytics show us that less than 30% of our website traffic comes from mobile and tablet devices. So when we redesigned our site, we started with the desktop site.

With most B2B sites we’ve ever created, we’ve found that to be the case too.

B2C is a different matter, as the Analytics tend to skew the other way.

Either way, one thing is for sure:

Both a desktop and mobile version of the homepage are critical to making your website a success.

The purpose of designing the homepage first, is to allow us to establish a visual style that can then be used on the rest of your website.

So, how do we create a winning website design?

That’s a secret! Work with us and we’ll show you how…

Once the homepage design is finished, it’s into another feedback session.

Step 7: Design Other Key Pages

Again, the homepage design has either revisions and amends to make, or, it’s moving on to the next step in the website design process.

Once the homepage is signed off (usually we present both the desktop and mobile versions to our clients), then it’s on to designing the other key pages in your website.

It’s not very often that we’ll produce a pixel perfect design for every single page on your website. That’s usually a waste of time, as a lot of things can simply be executed with code.

Key pages tend to include:

• Pages with a special layout (perhaps a product page, or checkout page).
• Pages with unique functionality (pricing tables, forms etc).
• Key identified templates (a single blog post, a basic page template etc).

In a typical website design project, we’ll usually be designing between ten and fifteen pages.

Using a mixture of input from your brand identity, to the visual research, to user journey mapping, and homepage style, we’ll create a website design that’s completely unique to your business.

There’s no space for off the shelf themes or templates here at Canny!

After all, your business is unique, with it’s own set of goals and challenges, and your website design should support that.

Step 8: Amends Made and Final Design Sign Officially

Needless to say, the key pages also go through the feedback and iteration loop.

And then that’s it. Your website design is finished.

Once everything has been amended and tidied up, we ask our clients to sign off on the design, before we start the build.

Leading into the website build, at Canny, we run a….

Step 9: Design to Development Handover Meeting

The design to development handover meeting is an important step in the website design process.

Developers are involved in the process from the start, but the official handover meeting lets everyone clear up any issues.

This is what happens in our handover meetings:

• We identify all website page templates that need built.
• We discuss all functionality between both parties and discuss ideas and implementation options.
• We also run through the website style to clear up any issues there.

Our designers then go off and make sure all templates are saved out as JPEGs, and save out all of the assets into one easy access folder.

This keeps the whole process nice and clean, and stops our development team from having to interfere with the design files.

Step 10: First Pass Website Build

Once the handover meeting is completed, it’s onto the build and development of your website.

The first thing that our development team do, is code up the repeatable and reusable parts of the website.

That typically includes;

• The header design.
• The footer design.
• The main call to action.
• Font and colour variables are set-up.
• Spacing and margins are created.

Any other repeating sections that were identified in the handover meeting are also created at this point. See the above example to see what we mean!

They also run through the site and put all of the pages into the backend, ready, for when they have the page template code complete.

This also allows them to drop the repeating blocks into the appropriate pages of the site, ready for when they’re needed.

Once the repeatable sections are coded, we tend to code the rest of the homepage.

Then, it’s feedback time.

At this point, our client tends to be able to see the homepage of their site, as well as links to the other main pages, which are also likely to contain some of their elements.

Step 11: Continue the Build

There’s usually not a whole load of feedback at this point, and really, it’s just a quick look at how the project is progressing.

We then continue to build out their new website. Heads down working in code, until between 50% and 75% of the website build is complete.

At that point, our development team emerge from their cave.

Typically, complex functionality has been handled at this point, but sometimes that needs further discussion.

Most of the page templates are built out, and things are really starting to take shape.

Step 12: Mid-Build Check In Meeting

It’s at this point, we run a pretty big internal meeting to check the progress of the build.

Between the development team, and design team, the progress of the website build is checked and monitored against the agreed wireframes and designs.

It’s also checked against the project status to make sure everyone is still on track.

What we’re looking for at this point is to identify:

1. Areas where the build doesn’t match the design.
2. Areas with complex functionality that needs discussion.
3. To gain an understanding of how far from completion we are.

This can then help steer the direction of the website design project moving forward.

Step 13: Finalise The Website Build

After the mid-build check in, our developers keep the momentum going, and press ahead to get the rest of the website finished.

At this point, all client content is added into place, and flexible, editable content fields are created. This gives our clients the ability to change their website content easily!

We do that at this stage, to ensure we have enough time to test it as the process rolls on.

Once the build, it’s time to review the website as a whole.

First, we do that internally, and iron out any of the major creases.

Then, we move onto…

Step 14: Device Testing

As we use the Foundation framework to build our websites, most device compatibility is great right out of the gate.

Our developers test the website as they build it, but there is a dedicated step in our website design process for purely device testing.

At this point, we’re typically testing websites across a range of devices including:

1. Mobile phones (iPhone, Android, Windows, both horizontal and vertical orientations).
2. Tablets.
3. Laptops (Mac and Windows).
4. Desktop machines.

We try and test devices alongside each other, to ensure we’re covering a wide range of fixes with efficient code. Rather than coding lots of tiny little rules to fix anomalies.

Step 15: Browser and Bug Testing

Device testing then leads to browser and bug testing.

What we’re looking for when testing on different browsers and devices is:

• Glitches that break the site.
• Things that don’t work./li>
• Styling that doesn’t look right.
• Areas for improvement.

Typically, our whole team get involved in testing a website. Sometimes, our clients like to get involved too.

To keep track of the bugs (nobody escapes bugs!), we use Asana, which is one of our favourite apps.

Step 16: Client Sign Off

Most of the hard work is finished by this point.

And once the bugs are all ironed out, and the site has been tested to within an inch of it’s life, we seek client sign off.

At this point, the final invoice is sent and the client gets to see their shiny new website. They also live with it for a little while, before signing it off.

This allows for any last minute tweaks and changes!

Once our client is happy, the website is signed off and our 30 Day Warranty period starts. This ensures that if anything goes wrong, we can help get it right back on track.

Step 17: Moving From Staging to Live

Websites are typically built and tested locally, or on a staging server.

If the client is hosting with us, we’ll move their website from the development area, to the live website host.

If they’re hosting elsewhere, we wait until they’ve paid their final invoice, and then provide them with the files and database so they can have their website host install it on the right server.

Moving a website from staging to live comes with it’s own unique set of challenges.

But, handled properly, the transition should be seamless!

Step 18: Website Training

Once the site is pretty much ready to go, we offer our clients a website training session.

In that session, which can be run in-person, or digitally, we cover:

• Website content management.
• Blog management.
• Google Analytics usage.
• And sometimes, Google Search Console usage<./li>

This typically opens up a discussion about our digital marketing services and what happens next.

Step 19: Full Live Website Test

Once the site is sitting on it’s live server, there’s a period where we test the site again.

Sometimes things go wrong between staging and live environments, and it’s best to be thorough and check it all again.

Will brilliantly outlined how we test a website in his post, The Complete Website Checklist.

We check over all of the little niggly bits, but pay special attention to forms, form submission, and the main call to actions of the site!

You don’t want them to be broken on launch day. In fact, you don’t want anything to be broken.

Thank god for testing!

Step 20: Website Launch

And finally, it’s time to launch your website!

The thing is, you don’t want to just quietly roll out your new website. It’s been tested, and it’s working.

You want to launch with a bang. The biggest possible bang you can make!

Launching a website is an exciting time for your business. We’ve covered how to get your new website launch right on the blog before.

As a quick dive:

• Send out a press release to relevant media.
• Post a blog about it on your website and any other sites you own.
• Ask your design agency to share it.
• Schedule social media posts about the launch.
• Send out an email campaign (using ActiveCampaign, Mailchimp, or similar).

You’ve just spent a healthy sum of money on your new website. You want to increase your chances of getting good organic traffic.

Don’t just let your launch fizzle over. Make a big song and dance about it!

Step 21: Post-Launch

Even after you have launched your website, the hard work doesn’t stop.

For instance, the needs and habits of your users will change over time, and so will best practices in web design.

As a result, you need to be aware of these changes to stay one step ahead.

Creating a roadmap will come in very useful as this will help keep your business ahead of the curve to make sure you are continuously fulfilling your customer’s needs.

The Website Design Process Explained

The website design process, as you can see, is quite complex and involved!

And this is why we laugh when people ask “how much is a website?” There’s so much involved that it’s impossible to give a price without more details!

Your website is a marketing tool that works for you 24/7. Therefore, you need to make sure you’re putting your best foot forward at all times.

Some websites are simple, others not so. But the process remains the same.

By following our web design process every time, we can create outstanding websites that deliver results for our clients.

Our website design process works, because we’ve refined it over the last five years. We have a good understanding of what makes a website work, and that’s informed our process.

We love building websites, and would love to help you get your website right. Talk to us if you need help.