The Ultimate Website Redesign Process Guide 2022
Redesigning your website is simply part of running a business with a successful online presence. As you learn more about your customers, your business should adapt accordingly, including adjusting your digital branding.
If you’ve ever spent any time on social media or checking out websites of multinational brands like Nike, Coke, Apple, or Microsoft, you’ve probably noticed that their websites are always fresh. The fact these huge companies keep their websites up to date isn’t accidental, and it’s not just because they want to be hip and trendy.
There are real, tangible monetary benefits of keeping your website design updated. While the evidence is anecdotal, we probably don’t need to convince you that it needs to be done, given you’re already researching the process.
You don’t have the same budget for redesigning your site as Nike or Coke do, but that doesn’t mean you can’t see significant results from a redesign. The catch is that you need to do it properly and follow a simple, logical website redesign process.
The process for redesigning your website boils down to the following steps (feel free to jump ahead to any of these sections):
TABLE OF CONTENTS
- Set your goals
- Plan and prepare
- Find your inspiration
- Create the design
- Build the site
- Assess the outcomes
These steps might sound a bit generic, but we’ll provide insights from actual projects along the way to help paint a frame of reference.
Enough introduction; let’s talk about the steps.
1. Set your goals
There’s nothing wrong with redesigning your website simply because it looks outdated and paints a poor picture of your brand. However, we would argue that you won’t know if the redesign has solved this problem without a more scientific framework. We need to have a hypothesis or goal in mind first and then make changes to achieve that outcome.
The rules for creating a goal are ensuring it’s “SMART”; specific, measurable, achievable, realistic, and time-bound. Keeping this in mind, let’s use the example above of redesigning a site because the old design has become outdated.
We’re preparing to redesign our website sometime in 2022 and have started going through this exercise. Here’s where we’re at.
Goal: Improve our brand perception and increase our rate of inbound leads.
The point of redesigning our website isn’t just to increase the conversion of visitors to qualified leads. It’s also to communicate with potential customers that we’re not just “web developers” but a team of specialists who create positive ROI through digital products.
The challenge is making this goal a bit more scientific to judge if we’ve achieved it after the redesign process. Improving our brand perception is the most critical part of the goal, but it’s tough to measure accurately. Instead, we’ll focus on form submissions and allow potential clients to nominate their interest in the higher-end services we’re showcasing.
Since we already know our submission form conversion rate, we can assess if the redesign has pushed the needle in the right direction!
So our new goal is:
See an increase in our monthly contact form submissions by 50% for headless eCommerce and web app development within three months of the redesign.
S - This goal is specific because it focuses on one action (contact form submissions)
M - It’s measurable since we can easily measure the number of monthly form responses
A - It’s achievable. Enough said.
R - Definitely realistic, even though it’s a lofty goal.
T - We’ve given ourselves three months to see the change eventuate.
Other kinds of goals
If you’re struggling at this step, don’t stress. Here are some examples of goals you may want to consider:
- Improve your conversion rate
- Increase the rate of repeat website visits
- Increase awareness of your new services or products
- Improve your website’s usability
- Improve your site’s accessibility and inclusiveness for the vision-impaired community
- Help users reduce the time spent looking for what they need from your site
- Bring your website’s brand in line with your business to increase recognition
Most website redesign goals will be driven from a commercial standpoint; increasing conversion rates, landing more prominent and better clients, increasing cart values. This isn’t a black and white rule. Plenty of non-profits redesign their sites frequently to keep usability and accessibility in line with modern standards and help their users find what they need.
The National Aboriginal Health Community Controlled Health Organisation (NACCHO) is an excellent example of this lesson. Our team recently finished migrating their site from Hubspot to WordPress. The process included a decent amount of website redesign, and the goal was to better help users find what they need.
The NACCHO website sees thousands of views every week and receives tons of community questions. The goal of rebuilding their site was to do a better job for their audience. And the best way to measure this is if the number of help requests decreases.
2. Plan and Prepare
With your goals figured out, it’s time to collect all the bits and pieces to start the redesign. Here’s our shortlist:
Brand guide
Your business may not have a brand guide which isn’t a problem. You’ll need to figure this out as the first step during your redesign. At a minimum, you should list which colours and fonts you want to be used.
If you have a brand guide, make sure you have it ready to send over to your design partner.
Logo & favicon
Get a copy of your logo and favicon in .png or .svg format. SVG is the ideal format since it’s vector-based and can scale up or down without losing quality.
Content
Content is usually the sticking point on website designs. Most of the time, if your website design and branding is due for an update, the site’s content is too. We’re not going to walk you through the steps to write new content because it’s way too big a topic to unpack in a guide about site redesign.
Our advice would be to spend time on this step before contacting a web designer.
Sitemap
You’ll want to create a list of all the pages that need to be redesigned. It’s easy to forget some of the pages like 404’s, privacy policies and thank-you pages. As an alternative, you can use FlowMapp and XML-sitemaps to generate your sitemap automatically. Both tools are free if you’re spinning up one project.
3. Find Your Inspiration
It’s time to get inspired by other websites!
You want your site to be unique and creative, but it helps to get an idea of what other businesses are doing.
There are some great resources for website design inspiration. Dribbble is probably the best place to start. It’s a hub for designers to showcase their portfolios. Adobe has its own designer showcase called Behance that is also worth a look at.
If you run a software as a service company, the guys over at Cruip created an aggregator site called SaaS Landing Page Examples that does just what you would expect; showcasing excellent SaaS landing pages.
If you want to get really creative and out of the box, you can take a look at Awwwards. However, take these designs with a grain of salt because they’re often poorly optimised for conversion and SEO.
Finally, you can browse your competitor’s sites. You’ll want your design to do more than theirs, so as you’re researching their websites, make sure to consider the areas you would consider weaknesses.
Tips for recording your inspiration
The most straightforward way to record your inspiration is by creating a Google Doc and jotting down the URLs. If you want to get a bit more involved, you can take screenshots and record the parts of each website that appealed to you.
Another approach that we usually turn to is creating a mood board in Figma. If you’re unfamiliar with Figma, it’s a free cloud-based collaborative design tool. To create a mood board, you just need to spin up a new project and start copying and pasting screenshots of your favourite websites.
4. Create the design
It’s time to create the design, and Figma is the right tool for this job.
You should find out what kind of device the majority of your traffic comes from; mobile, tablet or desktop, because that will affect your design’s target resolution. If most of your traffic is coming from mobile, start your design from mobile and scale it up to desktop.
Wireframing
Depending on how much functionality your site has, you may want to consider starting with wireframing to figure out the general arrangement of elements. We would argue this is overkill for most websites, but it can be helpful if you’re planning on building something more complex.
Start with the homepage
Your site’s homepage is its crown jewel. It’s the page most of your visitors will see and explains what you do. It should be the first thing that gets redesigned to set the tone for the rest of the site.
During this step, you will create a good deal of the global elements: navigation, footer, buttons, call to action, content arrangement, and some inputs. Once you’ve figured these parts out, the rest of the site will be a breeze.
Design system
A design system is a user interface library of the elements and components that make up your design. It isn’t necessary, but it’s a massive time-saver if you’re planning on extending your site in the future.
We usually work on building a design system as the site's design progresses. Every time a new part of the website comes together, we copy the individual components to the Design System page in Figma. The process takes a little time, but if there are any extensions required in the future, it’s all made back.
Nominate your animations
Animations are super hot in 2022. Almost every big tech company has incorporated some kind of animation in their design. There’s no reason you shouldn’t do the same. Animations add polish to your brand and help distinguish your site.
If you’re planning to incorporate animations into your design, make sure you figure out where in the Figma design they’ll live.
After Effects
Once you’ve figured out where your animations will go, you’ll need to create them in After Effects or a similar application. Figma can show basic transitional effects, but After Effects is usually better.
The purpose of creating these animated videos is to provide the websites developers with a blueprint. Developing animated content is tricky at the best of times. Make life for your developers as simple as possible.
5. Build the site
Involve your developers With all of your pages designed, animations created, and assets prepared, it’s time to move forward to development.
While it’s not specifically part of the “redesign” process, the ultimate goal is to get your design onto the web. The design and development process should be tightly intertwined.
It’s easy to design elements that look great but are challenging to develop. These issues typically boil down to responsiveness, and a few simple design changes can prevent them altogether.
Several years ago, we had this problem when working with a third-party graphic design company. They were new to web design and didn’t check in with us during the process. The result looked gorgeous, but we couldn’t make it look exactly like the design.
The client had gone through extensive review and approval of the design. When we presented the developed website, she was unhappy that it didn’t match the design perfectly. Countless coding tweaks later, the project was way over budget and time.
The lesson here is to involve your developer as you work through the design. Use Figma, align the majority of your elements to a 12-column grid, and you’ll be on the right track for a smooth developer handoff.
Pick the right technology
Before development starts, you should figure out what technology you’ll use. WordPress is the king over the internet. It’s a quirky platform to work with as a developer, but it does most things well. Alternatively, Gatsby and Next.js are new static site generators that promise incredible performance and an enjoyable developer experience. There are pros and cons to each.
On the more layman-friendly end of the scale are Webflow, Wix and Squarespace. These page building platforms are much harder to optimise to pass Google’s performance audits, and eventually, the technical debt will catch up with your business. We’d suggest avoiding these platforms unless you’re on a shoestring budget.
Testing forms, snippets, tagging
The final step of any website redesign process is to ensure everything is working. It’s easy to forget, but most of the time, the primary purpose of your redesign is to improve the conversion rate of visitors to customers. You can’t do that without some form of analytics and a working contact form.
Make sure you jump into Google Analytics and check that your traffic numbers are ticking over in real-time. Similarly, submit your contact form and check it’s coming into your marketing system.
6. Assess the outcomes
Figuring out if your redesign has been successful can be a stressful process. The last thing you want to find out is that you’ve spent a bunch of money and haven’t seen the results you were expecting.
Even worse is not knowing and being left to scratch your head about why your conversion rate or opt-in rate hasn’t improved.
The trick here is to build enough data points to measure your redesign's effectiveness accurately. At the very least, you should have Google Analytics goals attached to the buttons that users press to trigger actions like signing up for your newsletter or purchasing a product.
Average time on site, average bounce rates and user journeys through your site are also great things to investigate before and after your redesign.
Wrapping up
You’ve learned the most important steps to execute a successful website redesign. Now that you understand that there should be a central goal driving everything and the steps that need to happen, you’re in the driver's seat for executing your own design.
We’re excited to see what kind of results you manage to create. If you’ve made it through a redesign process and would like us to check out how it looks and even offer our thoughts, then drop our team a line in the comments section below.
