How to start a web-design project

To the uninitiated, web-design might seem like a fairly easy process to follow, and indeed to get right. You have content you want to put on it, you have things you want visitors to do and you have a certain way you want it to look and behave. It’s easy, right?

Well, I’ve found that a precursor to any successful website project comes in the groundwork that gets put in beforehand. I’ve likened building a website to building a physical structure before, and just like in that pursuit, a great deal of planning and forethought happens before you even begin to think about decorating…

So, what is this groundwork? How do you structure it and how do you get a client’s buy-in? And how do you ensure that these carefully-laid plans are adhered to throughout the rest of the process? (i.e. how do you stop a client from adding a basement when you’ve already started laying the flooring?)

Well, there are four key things you need to understand before you even start talking about design with a client.

  1. User types
  2. Content
  3. User journeys
  4. Calls-to-action

In this post I’m going to outline what they are, and how to collect and collate them effectively and efficiently.


1. User types

Users of the same ‘type’ will have commonalities that lead to designing routes for their particular group

In terms of a communication tool, it’s important to remember exactly what a website is. Most people have this fixed idea (no doubt a hangover from the early days of the web) that a website is a portal that anyone (online) can connect to and engage with. Whilst this is technically correct, from a brand/marketing/design POV, a website is in fact a one-to-one conversation with an individual.

To an individual, their personal experience is all they care about when interacting (and judging) the quality of a website they visit. If it doesn’t cater to their specific needs, they’ll leave.

Of course, it’s impossible to design a different experience for every single visitor your website might get. However, what you can do is work with your client to segment their wider audience into key groupings; these will become your user types.

Take clothing brand websites, who literally segment their content via the user type. If you visit one of these sites, the first thing you’re likely to do is head straight for the gender most specific to your shopping needs.

asos, like most fashion brands, segment users by gender almost immediately

Try to write definitions for your user types. Who are they? Do they have prior knowledge of the brand? How? What kind of thing they will be visiting the website for? How do you think they will find the website (e.g. via search traffic for specific parts of the site? or via search traffic entering through the homepage? or via direct traffic?) — these definitions will help you understand how to cater for their differing needs more appropriately.

Doing this helps you sell this idea to your client. It also helps them understand the notion that—despite catering for them all—their website is very much a one-to-one touchpoint with each and every one of their customers.

2. Content

In order to properly structure content, you need to know what it’s going to be beforehand

Next up is a fairly obvious one; the website content.

Firstly, when I say “content” I mean everything that’s going to live on the website. From the copy, right through to the images, video and media your client feels that they want to include. Don’t be afraid to offer your own input and suggestions on what this should be; but ultimately you will need to audit an existing site and/or add/remove bits as necessary. If you’re starting from scratch then work with your client to determine what content needs to be present on the website. If you can, try to keep it succinct — web users have notoriously short attention spans (it’s nothing short of a miracle that you’re even still reading this!)

Once this has all been collated, you can start cross-referencing it with the identified user types. Which users will need to see what content? How soon will they need to see it? What direction will they need? Do I need them to do something?

As you start to put these pieces together you’ll find yourself led naturally to the next thing that you need to organise…

3. User journeys

Some user-journeys I drafted for an old piece of work. Each journey shows the path of a different user-type.

User journeys are exactly what they sound like. They are the pathways through a website that your users take. These journeys can be identified and designed by pairing the user types with their relevant content.

It’s helpful to visualise these journeys so that a client can buy-in to what you’re suggesting. Visible user journeys justify your decisions to put certain bits of content in certain places within the website architecture. This is especially helpful if your client has a personal inclination to put a certain piece of content front-and-centre on the homepage because they like it there; because you remove personal feeling or subjective disposition from the equation, you can now organise a website’s architecture to best suit the needs of the people who really matter—the users.

4. Calls-to-Action (CTAs)

A Call-To-Action can be something as simple as getting a new user to discover your product/service

CTAs are what drives the purpose of a website project. They can be seemingly innocuous (like asking someone to register interest in something by submitting their email address) or they can be highly-involved (like asking someone to create an account and make a purchase directly on the site) but ultimately they are the reasons that you’re asking people to visit your website in the first place.

Different user types will require different CTAs, and deciding on the right CTA will depend on who the user is, how well they know the brand, how much they trust the website they’re on and what action is being asked of them.

A general rule of thumb is to treat CTA-pairing like you would real-world interactions. You don’t meet somebody and immediately ask for their home address—so your website/brand needs to adopt the same approach of not being a way-too-forward-crazy-person.

For first-time visitors you’ll want to promote the values of your brand, as much as the quality and benefits of your products/services—but maybe don’t expect a sale or lead to be generated straight away. Perhaps the CTA for these users should be a smaller one, like a registration of interest or the exchange of an e-resource for an email address.

Once you have that email address, your client can always then (carefully) use email marketing to persuade return visitors to head to a particular landing page. The user can now be considered as part of a different user-type, and the CTA on this landing page might ask a bit more of them this time. As the relationship develops a user will gradually grow more comfortable in interacting with a brand, and the website attached to it.

Bear in mind that this sales cycle should be constantly informed by, and adapted for, exactly how people are using the website. You should also try to conduct tests of different CTAs, language and design, to see which combinations your users respond best to.

It’s a good idea to add these CTAs to your user-journeys, whether they appear at the end of a particular journey or along the various stages en route. That way, your client can see how your website design plans to capture leads and sales for them.


Conclusion

By following this process and gathering these four key components together early on in your project, you should have enough information to form a sitemap; displaying your proposal for a website’s architecture. Your user types and journeys should support and justify your decision-making when it comes to this sitemap, and your design decisions further down the line.

Not only that, but you should have enough snippets of important information visualised (and, perhaps more importantly, signed-off by your client) to ensure that your website project is realised from blueprint to launch without any surprises along the way.

If you ever feel a project is starting to drift into unchartered territories then you can now always refer back to your user journeys, identified user types and content list to ensure it stays on the agreed track.

By understanding the user-types, the journeys they will take and the content & actions available to them, you will be able to make much more informed decisions when it comes to the actual design and layout of your web-pages and styling. Happy designing!