The redesign of a website does not have to be a headache and to help you have everything under control, in this content I show you 10 steps to do it like a professional.
A website must be up-to-date and, above all, it must help you generate income. No matter what industry your business belongs to, if your site is not your main seller, something needs to be changed.
In these steps, the topic of mobile and search engine optimization is omitted a bit, because that is somewhat obvious.
Step 1: Take inventory
The first step is to prevent your web redesign project from becoming a mess.
The first thing you should do is take an inventory of all the pages on your website.
Use a spreadsheet where you have a table for web pages, landing pages, and blog posts.
The web page would have the following columns.
- Homepage
- subpage
- url
- State
The name of the page goes on the main page and if that section has a subpage, the name is placed in the next row: in the subpage column.
The url is placed completely with the domain; Once you access the section, copy the url from the browser.
Regarding the State, it refers to whether some pages are still valid or no longer. You can use: Keep, Delete or Enhance.
For the landing, you use the same columns as the website, removing the subpage and changing the main page by name. In the state you can use the same values.
Finally, the blog posts have the same name, url and status.
It may be a tedious task for you, but it saves you a lot of trouble, so I encourage you not to skip this step.
Step 2: Create a new sitemap
Now that you have the inventory, duplicate the previous document and name it: new sitemap.
The first step is to delete all the rows that have the status: Delete.
Since you did this, you add, if necessary, rows for new pages as the case may be: main or subpages .
Then, you add the following columns, followed by status, to work with your new sitemap.
Advance: which will have the following values Ready, In Progress, In Review, and Paused.
This column will help to know how the content of the page is going.
Notes: If anything needs to be considered, it will be noted in this column.
Page Content – Here you refer to the document that contains the section information.
Both in this step and in the first, I recommend that you use Google Drive or Microsoft One with their respective versions for spreadsheets and documents. This will ensure that there is only one version and everyone can collaborate.
Step 3: Organize the content of each page
Sometimes the content of the pages tends to lack organization and this can affect the effectiveness of your website.
Don’t worry, let’s see how to organize the content of each page.
Here again I recommend using an online collaboration tool.
For each page you will create a document, either a Google document or a Word document in Office 365.
For some pages, you will most likely already have the content and just copy and paste it from your existing site, but each document should have the following header.
It can be a table with two columns and must be at the beginning of each document:
- Page: Home
- Page Title: Inbound Marketing Agency
- Page meta description: We are the best Inbound Marketing Agency for you. We build systems that make your sales grow
- Objective of the page: Communicate to marketers and directors our offer of services
- Primary Call to Action: Schedule a Meeting
In italics I placed an example; Here’s the breakdown of each:
Page
Simplifies the page name and, if applicable, is how it will appear in the navigation menu.
Page title
This is what will appear as the title in any search result. It’s important to keep it concise (less than 70 characters) and include any relevant keywords with the content.
meta description
This is the plugin that usually appears below the type in search results. To help visitors, provide context for what they’re going to find; avoid placing the title again or a text that is meaningless or very long (less than 120 characters). Just like in the title, add any keywords that are relevant.
Page Goal
At a high level, it identifies the ultimate goal of the page content. This will help in the design process.
Main call to action
Each and every page should have a MAIN action that you want the visitor to take. The page can include multiple actions, but it is important to define what the main action should be.
After the initial table, you put all the content.
Step 4: Build an inspiration board
If you are a fan of Pinterest, you will love this step.
This process is called Mood boards, beyond the name, which is the least of it, the important thing is to seek inspiration.
For a web redesign project, inspiration is well received and more so if it is about making your website look current.
This step is all about finding and getting images or taking screenshots of design elements that inspire you.
You can start by exploring your competitors to see what they are doing.
It is not about copying, it is only to see what they are doing and what perhaps they have stopped using.
In the same way, in order not to stray so far from the guidelines of your brand, you can start by placing the logo, the colors of your brand (in image) and the types of images allowed on the board.
Don’t limit yourself; In the end, you will carry out a purification of the elements that are very far from both your brand and your target audience.
Since you enjoyed the process, let’s move on to the next step.
Step 5: Bundle your digital assets
Order is the key to achieving a web redesign and one of the elements that can turn into chaos are digital assets.
Digital assets are usually: graphics, images, videos, logos, documents, screenshots, among others.
What we must do is choose them and order them into folders. Here the goal is to have the initial digital assets; Chances are that over time and after you have metrics, some of these assets will need to change, so while it pays to be picky, don’t spend so much time searching for the perfect asset.
An ideal folder structure would be something like this:
- imgs: images or photos
- banners: graphic compositions for the header of a page
- logos: all versions, sizes and formats of the logo
- videos: all videos that can be embedded
- icons: preference svg icons
- blog-imgs: all images used for blog covers.
Order is the key; you can use subfolders. For example, if an article has many images, use blog-imgs/article-name.
Avoid creating too many folders to keep things simple. Something very important is that the names should not contain spaces or accents.
These resources can be found in free or paid image banks. For icons you can use Flaticon.
Step 6: Create the Website Style Guide
This step is often skipped and, despite the fact that it seems very basic, the reality is that it saves a lot of design work.
So even if you want to jump into the design already, go through the website style guide first.
The style guide basically includes the following points:
- Colors: primary, secondary, support, contrast, etc.
- Typography: type, size, style, etc.
- Buttons: primary, secondary, sizes, shape, etc.
- Forms: shape, color, types, etc.
The style guide is usually similar to the identity manual.
Doing this will make the design easier and create harmony in all the elements of each section of the website.
Step 7: Start with the home page
The home page of a website is, in most cases, responsible for making the first impression. You will agree with me that the goal would be for that first impression to be the best.
To achieve this, you must take care of each aspect that you include, but mainly you must convey your value proposition correctly.
You may have multiple services or products that will be on your home page, but first you need to give your visitors a reason to continue on your website and explore more parts of the home page and site.
One formula to achieve this is to talk to them about why they provide that service or product, then how they do it and, finally, mention what. This technique is known as the golden circle created by Simon Sinek.
Since you have the clear message, you add the primary and secondary buttons; It is not always necessary to include a secondary button, you can add a text that invites you to explore more.
Something you can do is look for the conversion by adding a box for them to subscribe, it depends a lot on the digital maturity of your site.
This is in the first quadrant of your main page, which is the first thing that is displayed.
Afterwards, you can add elements that are considered social proof or the logos of your clients.
Then, place the blocks according to the importance of the services or products, add testimonials and any content that gives context to your prospect.
Although you may not worry about the height of your main page, it is not about saturating your visitor with many options. Remember that often less is more, so be strategic.
One point that you should always consider is that your main page will evolve. Note: this evolution must be based on data.
Place the final contents to avoid that the design looks different or does not get the best result because it is too short or too long.
Step 8: Prioritize and continue with the other pages
Once you have the main page, it’s time to continue with the rest of the pages.
Here you must prioritize according to the weight that each page represents, since the page of x service has more weight than the one of terms and conditions.
Although they will all be there, the most important thing is to focus on the most important pages.
Using the spreadsheet add one more column that has the name of weight.
Top Pages: All top pages are considered critical and necessary. If you had to launch the redesign in a short time, these pages cannot be missing.
Support Pages: Support pages are pages that, while necessary, are not crucial to an initial launch. They are usually pages about us, team, etc.
Support pages: these pages are not crucial and can be omitted and completed at the end; they are usually few or in some cases non-existent.
Once you have the prioritization, start redesigning them. The key to the success of each page is the objective that it must meet, so do not forget to consult the document of step 3 related to the page that is being worked on.
Step 9: Choose the “Launch Day”
Since we are ready with all the pages, it is time to press the button…
Wait wait, there is something you need to do before launch and that is a series of checks.
We don’t want anything to go wrong, so please review the following carefully before launch:
- Navigation menu: all the buttons lead to the correct page, the review must be to the main menu and, if applicable, to the one found in the footer.
- Content – Check for spelling, grammar, and typing errors.
- Calls to action : Send to the correct page.
- Buttons : do the correct action, send to a page or direct to a section within the same page.
- Links : lead to the correct page and when the page is from another site it opens in a new window.
- Forms – Successfully save submissions, display the correct message or submit to thank you page that advances to the next step, send a notification to the right person, and successfully trigger a workflow.
- Mobiles and tablets : the site is displayed correctly and everything works fine, clicks, forms, etc.
- Browsers – The website looks good on the various browsers, mainly Chrome, Safari, Firefox and Edge.
- Videos – Display and play the video appropriately.
It is recommended that this activity be carried out by someone who was not fully involved in the web redesign, since having seen the design so many times can cause some errors to be omitted.
Since the check was done by two or three pairs of eyes, it’s time to choose the day the launch will take place.
Ideally, you choose either Monday or Thursday to be able to deal with possible details.
Once you define and that day arrives, press the button and high five.
After the day, check the traffic for 60-90 days to keep a close eye on what happens to it.
Step 10: Analyze and watch your visitors use your website
At this point, it’s time, at least for the first 60 or 90 days, to review website traffic. You should be aware of any sudden changes in case they exist.
One tool that you should set up before getting started is Google Search Console and Google Analytics. The first provides you with metrics on the behavior of your site in Google search engine results and alerts you to possible errors; the second gives you metrics of your website traffic.
You also need to observe how your visitors behave. For this activity, you can use Hotjar, a tool that allows you to record visitors.
With it, you can observe how users interact with your website: if they go down to the whole page, if they click on a carousel, an accordion or tabs.
The above, in order to make improvements per block. It is important to have a large sample.
Bonus: Compress and optimize speed
Speed is a relevant issue when it comes to user experience, therefore, I leave you with a couple of actions that you can use to improve the speed of the top page.
Important note: while everyone wants to have a page close to 90, sometimes using tracking codes and ad pixels make this almost impossible, so prioritize. While the Google PageSpeed tool is useful, don’t get too hung up on it.
For graphics and icons use svg whenever possible; this format is lighter and easier for browsers to process.
Enable lazy loading of images; most CMS already have it or it can be easily configured. What this option does is stop the loading of images that are not yet visible, when the user scrolls and is about to see an image block, it is until then that the image is loaded.
Use web fonts from either Google Font or Adobe Font TypeKit
final thoughts
A website redesign can take two paths: one that is organized and allows you to enjoy the process, as well as contemplating key points to make it the best seller, or a disorganized one that generates frustration.
I believe that with these 10 steps you can start a site that contributes a lot to your sales team and with this helps you grow in income.
It is important to mention that a site must always be constantly improving. I’m not talking about making releases every month, but making slight modifications to existing blocks or replacing some, based on metrics from your potential customers.
What do you think of these 10 steps? If you find them valuable, I invite you to share it with your team and I would love to read any opinion in the comments.
