When it comes to the digital world, it’s the smart, fast, and simple solutions that matter. That’s precisely what our client wanted when he reached out to us for a web redesign. An outdated and hard-to-use website will not just create a disconnect between you and the users, but affect the bottom line.
How to tell if a client’s website needs a redesign?
It involves many things, including refreshing layouts, updating content, and improving navigation. The question that most people ask is how often they should invest in a website redesign. While there’s no magical answer to this question, here are top reasons why a website may need redesigning:
- When rebranding or repositioning
- Need to create a better user experience
- The current site isn’t mobile responsive
- The current design looks outdated
- Need to improve conversions/sales
- Third-party tools are outdated
- The current website doesn’t work
Scorpioncoatings.com case study
The website template is a critical part of a business, and one of our important clients felt this area of business could be improved.
The problem
After looking at our client’s website, we noticed that it needed redefining to communicate the company’s core successfully.
We also needed to optimize the business for core web vitals. As you know, these vitals play a crucial role in determining a website’s ranking on Google and other search engines.
Navigation through the product portfolio was a problem making it hard for users to find what they were looking for — the issue of navigation negatively impacted conversions and ultimately affected their bottom line.
Objective
- Create an engaging and attractive website with a clear call to action
- Create a responsive web design that is easily accessible and user friendly on mobile devices
- Build a visually appealing homepage (I tasked the team to build three mockups of the home page for the client to choose from)
- Redesign “about” page
- Design the “locator” template
- Integrate social sharing to relevant pages
- Optimize the website for SEO to improve visibility
Preparation
To map out the site and find every detail about their products, we started by analyzing the current website. We looked at onsite issues that could hamper SEO. We noticed that the 83 images didn’t have alt text tags, and the site had broken links. We also needed to optimize the title tags and meta descriptions.
The next step was to look for inspiration and references. We checked the leading websites on the client niche to get some ideas on what works best. Of course, we needed to have a clear picture of how we should structure the website early enough to avoid confusion later.
The process
Before starting the project, I wanted to make sure that my team and the client are on the same page regarding communication and time. I created a communication channel on Basecamp with the details of the project and everything that we needed to do.
I added members from the client-side and my team members who would handle the project.
Before we started any project, we could discuss it with the client to know the direction we are heading. We also gave everyone a chance to express their opinion on the project before moving to the next step.
We also set the timeline for each stage of the project to enable us to track and move to the next stage without confusion.
Steps to redesign a website
Research forms a crucial part of our website redesign process. Before we start the redesign process, we dig deeper into our customers’ audience to find what works and what doesn’t work. Ideally, our redesign process follows these steps:
- Auditing the current site
- Understanding the users
- Identifying the goals
- Competitive analysis
- Creating a strategy
- Evaluating the platform to use
- Setting a timeline
- Execution
- Pre-launch review
Step 1: Audit the current site
As a web design company, we understand that proper preparation is necessary when redesigning a website. The first step we took was to conduct an in-depth audit of our client’s current site. During the audit, we realized that some parts of the website were outdated or under-performing, while we could reuse some.
Specifically, here’s what we were doing when auditing the website:
Assess the website page performance
We build a sitemap of the current website to help review the analytics of each page and look for noticeable user trends. Through this, we were able to know what pages we needed to work with. By analyzing things like traffic, conversions, etc., we could tell what pages users find helpful and what pages we needed to remove. This helped us significantly when creating a sitemap for the new website.
SEO audit for the current site
No matter how good a website is, no one will see it if it is not optimized for SEO. With this in mind, we used Google Search Console to conduct a complete SEO audit of our client’s site to get an idea of where they were with SEO efforts and what we could do to ensure the site performs well in search engines.
After conducting the SEO audit, we realized that technical issues like site speed and missing keywords negatively affected the website's organic performance.
Content review
Content is another significant part of a website. Even so, many website owners don’t know how to use it to grow their business. For instance, after reviewing the content on our client’s website, we realized that most of it was about their business and not their audience.
Most people visit a website to find an answer to their question and probably make a purchase. That being the case, good website content needs to be about buyer’s pain points and not about “you” and your company.
Step 2: Identify the Users
One of the mistakes that inexperienced website designers make when redesigning a website is failure to understand the current website visitors. We knew this very well and wanted to do things a bit differently.
We decided to interview the users and ask them questions so we could understand their journey. Some of the questions we asked the users include:
- What was your experience navigating to page x?
- What prompted you to purchase product X?
- What challenges did you experience on the website?
As you can see, these questions aim to understand the user’s journey so you can make the necessary changes. Besides interviewing the users, we set up user testing to get first-hand information on how users interact with the website when performing different tasks. This way, we were able to identify areas that we needed to change to minimize user frustrations.
Step 3: Set goals
Now that we had already conducted the site audit and were familiar with the users’ journey, the next step was to set the goals. Of course, we had an idea of why our client wanted to redesign their website, but we knew it was imperative to set some specific goals after our research.
Since we wanted to make a website that works well for SEO and marketing, we went beyond the looks and appearance to include the website's functionality.
Although visual features are good, they can cause issues when stuffed on a website. Think about hard-to-find navigation, slow loading times, confusing page links, etc., that would frustrate a user.
Here’s how we set goals for our website redesign:
- Our client wanted to triple their visitors, so we used a number when setting our goals
- Navigation was an issue, so we made specific design goals
- Mentioned specific functionalities like calls to action
After setting our goals, we communicated them to the entire team so they could know what needed to be done.
Step 4: Competitive analysis
There’s nothing wrong with looking at your competition to see what they are doing in your industry. If a competitor is doing better than you, it is wise to figure out why that is the case.
In our case, we took a look at other competitor websites and took note of what we like and what we don’t. We looked at what they are doing on their website that our client is not. But don’t get us wrong, our aim was not so that we could imitate them. Instead, we wanted to figure out how we could improve and set our client’s website apart from the competitors.
Step 5: Create a strategy
Now that we had well-defined goals and performed competitive analysis, the next step was to define a strategy for achieving those goals. Here’s what we included in our strategy.
Information architecture
We discovered some pages that were doing well during our site audit and some that did not receive any visitors. We needed to reorganize these pages, delete some, and even add other pages that we deemed fit.
We drew structural maps of the old site to get an idea of how the screens compare. We took into consideration the goals, evaluated traffic and content before implementing the new changes. The information architecture acted as a checklist when designing, writing, or coding all the pages.
User journey
How a user interacts with a website will determine how long they will stay on the site and whether they will make a purchase or not. To that end, it is imperative to consider all the stages of a user’s journey, from when they get into the website to when they make a purchase.
By identifying the ideal user flow, we could determine how visitors will interact with the site. Once we knew how a user would move through the site, it became easier to optimize the user journey.
SEO checkpoints
One of the main reasons for redesigning a website is to improve traffic and increase sales. As earlier stated, no one will see your website if it is not discoverable on search engines. Our web design team knew this, and that’s why they involved our SEO nerds in every step of the redesign process.
Our SEO experts performed proper keyword research to get an idea of what visitors are looking for and optimize the new site for those keywords. Knowing the terms that the potential buyers are using helped in two ways. First, it made it easier to create content that resonates with the audience, and secondly, it helped improve ranking in search engines.
Besides keyword research, here are other steps we took to optimize the site for SEO:
- Include Meta descriptions and permalinks for all content
- Include headers and subheaders for readability
- Include target keywords on the landing pages
- Improve site loading time
Mobile responsiveness
Currently, there is more mobile browsing than desktop browsing, meaning more users are likely to use a tablet or phone when accessing a website. To ensure our client’s website is up to the task, we had to make it mobile responsive.
User experience is Google’s new ranking factor, meaning websites that don’t have a good user experience will rank low on search engines. Besides, users are likely to leave a site if it is not responsive. A responsive website will not only improve user experience but boosts SEO as well. Some of the steps we took to improve site load times and mobile experiences include:
- Optimize Images
- Optimize Fonts
- Optimize CSS Delivery
- Enable Compression
- Reduce Server Response Time
- Defer JavaScript & JavaScript Loading
- Minify JavaScript & CSS
- Minify Resources
- Prioritize Above the Fold Content
- Shove Scripting Below the Fold
Step 6: Evaluate the Site CMS
Choosing the right software is crucial when redesigning a website. This software, also known as a content management system (CMS), determines how content is developed, designed, and published.
Different platforms have their advantages and disadvantages. The key is to use a platform that is up to date; otherwise, you will miss several valuable features and optimizations.
In our case, we wanted a secure, search-engine friendly platform and one that is optimized for speed, so we went with WordPress. Of course, there are many possibilities out there, so be sure to check them depending on what you want to achieve for your clients.
Step 7: Set a timeline
Goals can never be open-ended. After we had everything ready, we set a realistic timeline to finish the project.
Creating a website takes time, so we gave ourselves enough time to avoid rushing the process. Of course, there’s no magic way to determine the time it will take to redesign a website, but it will take two to five months to complete the project in most cases.
For our case, we considered when the client would need the website and the amount of work we planned to put into it. After we had a deadline, we broke it into smaller pieces to help us keep track of our progress.
Step 8: Execution
Designing is the most critical step of a website redesign. It is the time that you finally get to put together what you have been preparing behind the doors.
We wanted the best for our client, so we decided to take it slow while getting constant feedback along the way. The first step was to create wireframes to get a clear idea of how the content will appear on each page.
After that, we went into designing the homepage and, of course, asking for feedback from the team. This saved us much time as it ensured that everything is heading in the right direction from the start. We repeated the same process for the remaining sections until we completed the whole site.
Step 9: Pre-launch review
Now that you have designed and developed the website, the next step is to launch the website. However, before launching the website, we decided to review the site to ensure everything was in order. Here’s what we included in our pre-launch review:
- Ensuring that the Meta description and page titles to ensure they are correct
- Checking for any broken links
- Checking for any missing or broken images
- Confirming that 301 redirects are set
Reviewing the website before handing it to the owner allowed us to fix any issues that could arise after the launch. What’s more, it became easier for users to transition from the old site to the new one.
Results
Here’s what we were able to achieve:
- An updated website that is engaging to users
- A professional and mobile-friendly website that communicates the client’s brand successfully
- A proper and clear Call to Action (CTA)
- Brand values of the company were now clearly visible
- Easy to understand delivery process even for new users
- Increased traffic and sales
Key takeaways on a web redesign
Always take your time to understand the business requirements before you start the design process, and remember that user experience forms a critical part of a web design project. Meanwhile, clear communication between you and the client, you and your team is paramount in each stage of the project. Make sure you validate all options before coding and always test the design for feedback and improvement.
