Seven Steps to a Great Web Design Process
Like most things in business, having a process that’s clear, understandable and actionable is key to project, and organisational success. Running a great website project isn’t so different. At times it’s tempting to jump into the creative, or get straight into the development, we’ve all definitely been there. While things eventually get on track, the project often feels like spaghetti – a tasty result but a bit too messy.
Things are always moving, developing and changing. New systems are created, tools and resources change, but it's important to stick to a process so that all the key elements of your site build are covered. It looks a little something like this:
- Sitemap & Wireframe
- Content & Copywriting
- Visual Design & Dev
- Test, Reiterate
- Launch & Tweak
Start with why.
Why do you need a website? What do you want it to do? How will it help your business? While these might seem like obvious questions, taking a moment to reflect helps to steer the project in the right direction. It is the starting point to ensure alignment between a business’ goals and the final design.
We work together with clients to discover the purpose, and goals of the project, usually in a workshop format.
- Who is the site for?
- What do your audience want to achieve?
- What do you want your audience to achieve?
- What are your goals for the site? And how will this help your business?
- What is the purpose of this site? Is it to generate enquiries for your service business? Or is it to sell items online? Maybe it’s just to share your thoughts with the world?
Without getting clarity on key questions like those above, it’s all too easy to produce a website that doesn’t fulfil your customers or business’ needs. Clarifying expectations and direction will bring alignment between the designer, the business, and their customers. Is a custom website design going to be the best solution or will starting with a template be a-okay for what you need?
What are we building?
Scope creep is a real thing. It’s not necessarily a bad thing, as it means that ideas are flowing and evolving, which is always good. What’s not good is when these ideas derail the project. What started as a website can quickly turn into a web app, with automations, widgets, and fireworks.
With increasing expectations, an increase in budget and timeline makes sense. While leaving a bit of wriggle room in the scope is good practice, we need to have honest conversations and define whether these new elements should be included in this sprint or allocated for a new stage of the project.
Continual adjustments leave timelines hairy, and they reduce clarity. Aligning expectations on what we’re building, and when we’re building it by, keeps everyone on the same page. Sure, maybe those convos are a little boring, but having a clearly defined scope reduces anxiety, increases trust and ensures things get done.
A sitemap is a document that aligns purpose and scope. It helps us make sure that what we’re going to build will help the business reach its goals, while refining the scope as things become more practical.
As a simple example, imagine you’re building a house, and you’re really looking forward to having a lovely new library in your home. You’re excited about it, plan for it and have told all your friends. When the house is completed, you go to show everyone your new space and where there should be a door to your quiet retreat, there’s a wall instead.
That would be a small disaster. A sitemap is an additional check to make sure that what the designer and developer will eventually build is actually what you want, and that it will help you achieve your goals.
It’s a low resolution guide that puts on paper what each party is seeing in their heads. Visually communicating how something could work helps teams reduce the chances of miscommunication, and serves as a reference point to what we’re trying to achieve.
At ONETOO this looks like getting out the pen and paper. We’re a bit old school but it’s a simple way to help people visualise what we’re seeing.
The quality of your content and copywriting can make or break even the most beautiful website. What needs to be said? What do we want to say? What do our customers want to hear? How do we help them achieve their goals? How do they find us online?
What we’re trying to achieve here is alignment between what your customers are looking for, what your goals are and what you need to communicate to customers to develop trust, and encourage action.
Simply, what do you need to communicate so your customers find you, engage with your business and take positive action – fill out a form, make a purchase or read your blog.
If we don’t align these three realities, we create confusion. While that might sound like an odd outcome, a confused customer is a customer that is very unlikely to make a purchase, or leave feeling like they can trust you or your business.
Content should hit these three key things. A) Action & Education, B) Brand and C) SEO & Discovery
Action & Education
Are you trying to get people to do something? Or are you trying to educate them? Considering these two different modes and how they might cross over within a customer journey, is a crucial consideration when it comes to putting the right content in the right place.
If a prospective customer is interacting with a brand and the message is all-action, it can come across pushy. On the other hand all-education and no action might not line up with both the business and consumer goals. Strike the balance, consider the customer journey.
Content should primarily communicate something about your business, in your language. It should let people rationally and emotionally understand what you’re trying to say as a brand. Your brand is the thing that separates you from your competition, it’s what makes you, you. Be remembered.
SEO & Discovery
A beautiful site is great but unless people can find it, what good is it really? When putting together content for a site we always need to consider search engine optimisation. What are people looking for? Will this get found in Google? Are we trying to get found in Google for these key terms?
Well written, informative and keyword specific content is going to have much better visibility in Google search. It will simply make the site easier to find. This type of content works in Google as it considers the audience, and their goals. If you have a good thing going, don’t go hiding it.
Not only should we consider keywords, phrases and topics but we should pay attention to how this structurally appears on a given page. As an example, this means we need to think through the impact of the use of H1s, Title Tags, Meta Descriptions, and Body Content – how we use and structure these will influence our search strategies.
Using tools like Google Keyword Planner, Google Trends & Answer the Public can be great places to look when investigating SEO.
Get excited, this is where things start to really look like your brand and business. All those little bits and pieces that make you, you. Your logo, your typefaces, and colour. We pull it all together alongside the content, wireframes and sitemap.
Depending on who your branding was completed by, it’s common to have a brand style guide delivered alongside your new brand. This document will hopefully outline the creative direction not only for the logo and elements, but also for the website. It’s like building blocks or puzzle pieces, when you put it all together you get to see the final picture.
The great thing about having a good set of brand guidelines in this process, is that the design of your website shouldn’t be a big surprise - sure the layout might be new, but followed correctly, your website will feel distinctly yours, and familiar already.
6. Test, Test & Test Again
Allocating time for testing as we near the end of the design process lets us review the technical solutions, and the user experience assumptions we all make in the process. This means reviewing the site for any bugs, broken elements, or flows.
Technical testing looks to make sure everything is responsive and working across multiple screen sizes, that all links go where they should, and that everything is working as intended.
In smaller projects, access to specific data driven insights isn’t always a given. This often means business owners, designers and developers are working around a best practice model and their unique experiences to build toward something that will be effective and achieve the project goals. At this point we usually have a working and interactive model, something which we can share with audiences to test our assumptions. Ultimately, we’re designing for your specific audience, so knowing that when they interact with the site, they’re able to do what they want to do - without being left confused and frustrated - is really important.
7. Launch & Refine
Tell all your friends, do a little dance. You did it!
We love the excitement around a launch, and while we’d love to say it’s a one and done kind of thing, web design is a fluid process where things change and need to be monitored. That’s all part of the beauty of digital, there’s always room for improvement, tweaks, new features.
Now we’re live we can start collecting data around how the site is being used. With tools like Google Analytics, Optimizely & HotJar we can challenge our assumptions and continuously improve the user experience and conversion rate of the site.