As a web development agency, it is always challenging to revamp a massive, complex, established & reputable website. These clients typically have high expectations and a reputation that is too good to be compromised.
We were fortunate enough to be working with Got Sit Dog Training, an industry leading dog training franchise, on their site revamp. Their old website had excellent SEO(search engine optimization) ranking, but needed some new features such as calendar integration, and a design modernization. The look of the old website just screamed 2008.
In this article, we will be explaining how we successfully revamped their website, gave it a modern visual, added features and improved its search rankings.
Let's dive in!
First, Let's Talk Infrastructure
Just like the majority of websites on the internet today, the client's old website was built on WordPress. Unfortunately that is not how we do things here at 1 Stop Coder. We code every website from scratch and build their own servers.
On the front end (the website visitors see), we simply use ejs(HTML), CSS and JavaScript to allow for maximum creative freedom. We believe in 100% originality and simply refuse to reuse templates. This also means that we can easily work with any kind of API integration (features that required coding to integrate) without being restricted by WordPress.
We use this technology called Node.js to build servers. We host them on Heroku and Amazon Web Services. This allows a fast and secure back end that can withstand heavy traffic.
 |
| Amazon Web Services CEO Andy Jassy speaks with Jim Cramer on CNBC’s “Mad Money” on Feb. 28, 2019. Source: CNBC |
Find All Pages and Their Respective Links
The easiest way to find all pages(and their links) of a website is by reading its sitemaps.
The client's old website had excellent SEO. It had a sitemap index file, which contained all the sitemaps. We read the files and verified the valid pages and took note of their links.
One thing you have to make sure when revamping a website is to keep the existing link structure if possible.
For example if a page has the link "/articles/", you want to keep it as is. This would make the SEO transition much smoother because search engines won't need to re-crawl the site to update the new links.
After retrieving their pages and links, the next step was to create those folders in our server, and carry over the same link structure.
 |
| Image by Mural, that demonstrates how a sitemap works |
Create a New Look!
This is the fun part!
First, let's look at the design of their old website.
 |
| Old design |
For a site that was built in 2012, it was definitely ahead of its time. However, it can hardly hold its ground in year 2021. Mainly the font, icon, space management and the overall art style needed to be updated.
Upon the client's request, we decided to stick with the red and black color theme. Whenever we design a website, we always start with building a branding board. It is an art board that has fonts, color scheme, logo and icons that we wish to use on the site. Here is an example.
 |
| Branding board of the new website |
Here are some snippets of the final design:
Navigation bar and the first fold:
 |
| Navigation bar and the first fold |
Footer:
 |
| Footer |
Reviews:
 |
| Reviews |
Trainer page: |
| Trainer page |
Testimonial page: |
| Testimonial page |
Integrate Some Cool Features
The client really wanted a Google Calendar integration so that their customers can see when and where the group training classes are held in real time. The calendar on the site shall be synced automatically with the client's Google Calendar.
At 1 Stop Coder, we are known for our coding prowess, especially our experience of working with different APIs. And this Google Calendar API integration was no exception.
 |
| Google Calendar API guide |
It took us a while to go through Google's guide and figure out a way to best write the code for this integration. Here is the final look. We have a weekly view where you can see what days of the week the classes are held, and a list view where you can see more details. The details include time, location, title, description and a calendar link of the event.
Calendar list view:
 |
| calendar list view |
Calendar weekly view:
 |
| calendar weekly view |
When the visitor clicks on the event title, it will open a tab with the option to add the event to their calendar.
 |
| option to add the event to calendar |
Maintain and Improve Search Ranking
When the design and development work is finished, it's time to perform search engine optimization. First, we kept all of their keywords on each page, especially popular keywords such as "dog training", "dog trainers", "obedience training".
We also did some optimization to their page title and description to reflect recent changes.
Unfortunately they did have some broken links that were no longer used, so we removed those.
They had more than 85 blog articles and 190 reviews. So migrating those was not an easy task, but we got them done nonetheless.
The final step was to recreate new sitemaps and a new sitemap index. Then submit the sitemap index file to Google Search Console to let the search engines know that the site has been updated and please crawl it again!
 |
| use our sitemap as an example: 1stopcoder.com |
Closing Thoughts
Revamping a website of this scale is no easy feat. If you are the owner of a company and are looking to revamp your website, it is crucial to find a web development agency that's up to the task.
I hope this article helps explain website revamp. If you have more questions, feel free to book a free consultation with me by clicking the link below!
