Gone are the days of just creating ‘beautiful websites’ for the sake of having a nice, trendy website. You still want to deliver a great website design. But smart marketers understand that websites are a means of achieving real business goals, and often the key goal is to improve conversions.
Good web design:
- Promotes usability
- Concentrates on conversion-centric design features
- Adheres to web design aesthetics
- Delights customers
Several sources have shown that most people are conducting extensive product research online as part of their decision-making process. This trend will continue to rise as the younger, digitally savvy generation grow older and start making important decisions on behalf of organisations they work for, and for their own households.
It's now more important than ever to ensure your website redesign project meets their needs and moves them seamlessly through the buyers journey.
How to Start Revamping Your Existing Website
Here are 4 key steps to keep in mind when you start considering how to revamp your existing website.
1. Get Stakeholder Buy-In
The first step is to ensure you get buy-in from relevant stakeholders so you can move forward with the project, as well as see it through to launch!
Identifying core stakeholders and engaging them, especially if you need to put together a business case to get this project approved, is critical for success. Face-to-face meetings with stakeholders are effective at getting them interested and thinking about contributing to the website project.
Different stakeholders have different priorities, depending on their own goals and priorities. For example:
- IT departments are concerned with technical objectives they want to achieve and becoming closer to business processes.
- Leadership departments are concerned with the bottom line.
- Sales departments are concerned with generating new leads and sales.
- Customer service departments are concerned with providing quality service to customers.
Using the above list as a starting example, work out your core messages to each stakeholder.
Targeting your efforts will help with your stakeholder management plan and result in multiple engaged stakeholders to help you deliver a new website everyone is on-board with.
2. Understand your end users
This is a good time to gather up-to-date information about your end users and redefine your buyer personas as part of your redesign objectives. For each type of end user, you want to understand:
- What motivates them?
- What is their purpose for visiting your website?
- What are their pain points?
- How will your product and/or solution solve these paint points?
- What are the barriers to purchase?
Tip: Hubspot has created a free buyer persona template you can use to get started.
You should have a record of current website metrics in a spreadsheet. Use Google Analytics, Google Search Console and any other analytics tools you have to serve as a baseline for later decisions, and to determine how effective your website redesign is.
4. Competitor analysis
Who are your key competitors? Select a handful and go through their websites to see what you can use as inspiration for your own website. What are they doing well? Is it easy to recognise the CTA for each page? Is it easy for you, as the visitor, to perform what you expect e.g. to find information or purchase a product?
You don't have to limit yourself to direct competitors. If you're a technology provider, you can turn to other technology providers. For example, Krost, a B2B furniture retailer, looked beyond similar retailers and took inspiration from fashion e-commerce websites featuring strong, visual imagery.
Use this competitor analysis to make your website more intuitive for visitors and ultimately prompt them to perform the action you want on each page.
7 Step Website Redesign Process
There are several steps you can expect to encounter during the website redesign process. They are:
Start by documenting the reason why you are redesigning your website. Here are questions you should answer:
- What are the main applications for the website? For learning purposes, marketing purposes, members to access their accounts and so on.
- What are the long term objectives for this project?
- What are the short term objectives for this project?
- What are your specific business and/or marketing goals?
Tip: As with any objectives, creating SMART (Specific, Measurable, Attainable, Relevant and Timely) goals enables you to easily measure how effective your new website is. For example, a short term goal might be to ensure the new website is mobile responsive and can be easily viewed on mobile and tablet upon launch or to make it easier for website visitors to find relevant information by providing dynamic content personalisation when the website launches. Whereas a long term goal might be to increase product trial signups by 30% within 6 months of launching and refining the new website.
Now you need to define the plan, scope and limitation of the redesign.
Here are the key actions to undertake during this stage:
- Determine budget and timeline.
- If you haven’t already, meet with end users across different audience types to understand what they want to see from the website redesign.
- Identify what aspects of the current website you like and do not like including navigational structure, design, videos, images, specific sections and so on.
- Review existing webpages you want to keep, delete or update. This is a great time to perform a full SEO content audit to determine what pages are ranking for specific keywords and opportunities to rank for other target keywords.
- Identify what’s missing and incorporate it in the new design including mobile responsiveness, social share buttons, videos, integration to existing business systems and so on.
- Consider whether the domain name needs to be changed.
- Check your current website's trustworthiness and authority to use as a benchmark once the redesign is implemented.
- List out all requirements (split between must have vs. nice to have depending on budget). Then prioritise.
- Use this information to form the basis of your request for proposal (RFP).
During the visual design stage, the look and styling of the interface, as well as its particular feel, is determined.
- How do you want your brand to come across to your customers? Part of this includes defining your value proposition. It should convey what you do and reinforce why you are clearly the best choice for your target audience.
- Making it 'mobile first'. How many versions need to be designed for different screens and interface components?
- What do you want users to do on a page and what their next steps should be. Be strategic about placement of buttons and CTAs.
- Using contrasting colours for CTAs. If you don’t want to stray too far from your branding guidelines, you could use a much lighter version of the same colour.
- The sidebars, footers and navigation menus.
- Simple layouts, whitespace (the white space between text and objects); anything to make it easier on the eyes.
- Limiting clickable buttons and unnecessary images.
- Choosing colours that are reflective of your brand.
- Using real customers and examples of work you have done where possible.
- The number of iterations (or visual design versions) needed to validate the design.
Tip: The same image renders differently on different devices. If you choose a full-bleed background (images fill the page to the edges of the browser), the image will be cropped differently on mobile than on desktop, because desktop devices are generally viewed in landscape mode vs. portrait mode on mobile devices. If most of your visitors access your website through desktop, choose an image that’s landscape-oriented, or one that can be cropped in a variety of ways. Keep in mind, this is something your vendor’s designers should pick up on and inform you of!
This is the stage where all your planning comes together.
During this stage, the vendor will take your requirements, apply the designs as discussed and if applicable, incorporate custom development such as integration to your existing business systems as required, on top of their website CMS to deliver your project in a high quality and timely manner.
Having a good site map to start with will make this stage so much easier. If in doubt about what to do, refer to your plan.
When starting a new project, developers will begin on a development server or in some other closed environment. Once the development of the website enters a state ready to be shared with you, all work will be transferred to the staging environment. This is a private version of your live production site (aka your public website) that is used to make sure everything is functioning correctly before your audience sees it.
- Review the overall flow and usability in this staging environment.
- Check that your vendor has staged with noindex, nofollow, disallow pages in robot.txt file. You don’t want these pages to be crawled and to appear in the Google Search results!
Once your build is ready, move to the next stage which is optimising the newly redesigned pages. Ensure your website follows the key SEO principles on the right.
Testing, testing and more testing, as well as optimising the website for better SEO results.
UAT ensures your requirements for the website have been met by the vendor, and all elements are working as agreed upon and intended e.g. fast website loading speed, proper rendering of images and so on. The website is tested in the "real world" as though the vendor, yourself and your team acting as the intended audience. During this phase you want to explore every inch of the website, and test everything!
Tip: You vendor should have their own detailed UAT checklist that is used for all website redesigns.
Go live with the new website and monitor performance!
Go to Google Analytics, and add an annotation. This will help you keep track of traffic and conversion increases and decreases after your new website go live date.
- Submit your new XML sitemap in Google Search Console.
- Fill out a change of address in Google Search Console if your domain is changing.
- Let relevant audiences know the new website is live!
Analysing your website’s improvement in metrics after the redesign is implemented, is key to ensuring you meet the needs of your end users, as well as your SMART goals.
Some key actions after launching includes:
- Rechecking for proper robots.txt set up.
- Is your content crawlable? If not, were noindex, nofollow and robots.txt disallow directives removed? (Check the Fetch and Render feature in Google Search Console.)
- Resubmit sitemap via Google Search Console if needed.
- Is Google Search Console and Google Analytics installed correctly?
- Are your webpages redirecting correctly? Are you 301 redirects working correctly?
- Are meta tags (titles, meta descriptions, headings etc.) correct and unique?
It's a good idea to regularly check your website analytics to ensure you've maintained your ranking on the search engines, and you're moving closer to achieving your goals. For example, you might notice only a small percentage of visitors are clicking on the 'start a trial' button on the homepage, so take the opportunity to experiment - change the button colour, move it to a different location or change the text or image that accompanies it.
Remember a successful website needs to be useful, relevant and well designed. If you can invest time in planning a great design, review website best practices and think about what websites you like engaging with, you can create a user-friendly, engaging and intelligent website that drives real business values for your organisation.
Now that you know what’s involved in the website redesign process, get a copy of the website redesign playbook for deeper insights into effectively planning and launching your website. It also comes with a comprehensive checklist to help you get started on designing your own successful website.