The redesign of a website can be a pretty daunting undertaking, with so many details to consider. It can be overwhelming and difficult to know where to start. But the process can be made much more manageable, if it is broken down into different parts, or phases. Please come along as I take you through the journey of redesigning a website from start to finish.
- PHASE 1: Research, Brainstorming and Discovery
- PHASE 2: Strategic Planning
- PHASE 3: Setting up the Theme, Creating Content, Developing the Design
- PHASE 4: Adding Custom Code, Plugins, Widgets, and Other Development
- PHASE 5: Testing, QA’ing and Fine-Tuning Everything
- PHASE 6: Post-launch Activities
PHASE 1: Research, Brainstorming and Discovery
During this phase you’ll meet with your clients and hopefully ask them the following questions (among others):
- What are your key goals for your soon-to-be redesigned website?
- Who are the target audience the site is being built to attract?
- Who are your main competitors and what makes you stand apart from them?
- Have you checked out your competitors’ websites? What did you like/dislike about them?
- What features of your current website do you like, and would like to retain in the new site?
- What features would you like to eliminate going forward?
- What are your biggest pain points with your current site?
- Where is your current site hosted? Will it stay there, or will it need to be moved to a new hosting provider?
This next part might need to be tackled/discussed in a subsequent meeting with the client – depending upon how large the website is:
Up next is discussing the technological route for the design and development of the new site.
For example: should the site be built/coded from scratch, or should some type of web CMS (content management system) be used? If it looks like the new site will be very large, it would be a good idea to use a CMS. Does your client intend to eventually update and maintain the website themselves, or will you handle that for your client? The answer to that question could make a huge difference in how to go about actually building the new website.
It’s also a good idea to determine early on if your client will require training, and if they specifically would like for you to train them on how to maintain their new site going forward.
During one of our past redesign projects, our client had expressed interest in using the WordPress CMS, and as such, we provided her with several choices and examples of WordPress themes (website templates) that she was able to choose from. Then we made a few recommendations for the theme that would best meet this client’s needs. Of course the final decision on the theme was left up to the clients (with some firm guidance from us!)
After we were done redesigning and rebuilding their website, we held a few training sessions at the client’s location to get them up to speed on how WordPress works, and to provide training specific to the theme and how to manage the custom modifications we had made to it.
PHASE 2: Strategic Planning
This is the phase where you get down to nitty-gritty details and try to map out the new site in more detail and get an idea of the new website’s flow.
This generally consists of an interactive information-gathering session (sometimes called info-mapping) between you and your client. During this session you’ll discuss the proposed structure and scope of the new website. You’ll be hashing out the information architecture and trying to determine what the main categories will be (essentially what your top-level main navigation menu items will become).
From there try to identify any sub-categories that fall under each of the main categories, and these will eventually become your 2nd-level, or secondary pages.
Carefully go over the existing site structure, navigation, pages and other features to determine which aspects of the existing site will be retained, and which are no longer needed.
One technique that works really well is to write out the name of each proposed new page on sticky notes or note cards and stick them onto a wall or board. Then you can easily move the notes around and place them under the main page categories as you deem appropriate.
From here, move on to further exploring the feasibility of implementing various new features, (i.e., a calendar with modal pop-ups, a contact form, a Send-to-a-Friend feature, social icons, need for a blog, landing pages, etc.)
Also at this point, work with your client to try to determine what the new website domain and web address (url) will be. They might already have one picked out, purchased and registered, or they may need some guidance from you in choosing a suitable domain. Once a choice is made, be sure to do some research to see if your chosen domain is available.
There are many different domain lookup tools on the web, but I’ve found it easier to look up the domain directly with the hosting provider to see what they have available when I’m purchasing a hosting plan for a client. I have worked on websites that were hosted with Siteground, Bluehost and Host Gator, and have been fairly impressed with all of these hosting providers.
Lastly, during this phase you’ll need to work towards determining the full in-depth scope of the project. Try not to stress out too much about this though. In my 20 years of experience building websites, maybe once or twice it came to pass that the scope of a website redesign project did not grow during the course of the project. This is to be expected, because clients often don’t truly know what they want until they are in the middle of the project and they start to see new possibilities unfold.
PHASE 3: Setting up the Theme, Creating Content, Developing the Design
This phase is where you (the developer or designer) actually get to work building the new website – my favorite phase! This involves the creation/implementation of the theme of the website, setting up the navigational elements, sidebars, the footer, and so on (set up the various components and widgets). This is when you work out the branding – including color scheme, atmosphere, general look and feel and tone of the website.
If your client has an existing logo, import that into your website theme or structure, and upload or create a new favicon. Graphics, icons and other images are added to all or most pages of your website.
This is often done in tandem with adding content to pages as you go along. You should be able to use at least some of the content from the existing website. Additional (new) content should be provided by your client at this stage. It might be necessary to tweak the content a bit, as long as your client agrees to that (as a freelancer, you should be charging at least a little more for actual content creation services).
In my experience the content stage is where things tend to get hung up. Oftentimes I wind up having to add weeks to the project schedule because I’m waiting for a client to send me the necessary content. This is where most of the project schedule gets eaten up… but I get it – clients are very busy and have a zillion other things on their plate! Just be mindful to pad the project schedule a bit to account for this.
You could try imposing a specific deadline for receiving new content from your client. (it could work… ?) But again, in my experience, clients tend to view this as more or a suggestion than a directive, and this date tends to slip. Hence the important of adding a few extra weeks into your project schedule.
During this stage, you and your client will probably experience a lot of back-and-forth in terms of editing of the content. When you do receive new content – sent to you in a Word doc, email, or in whatever form – ask your project contact person to highlight or otherwise indicate which aspects and sections of the content have changed, or this stage could get really time consuming. If you have to hunt through entire Word docs and PDFs every time your client sends over a revision… well let’s just say that gets old real fast.
PHASE 4: Adding Custom Code, Plugins, Widgets, and Other Development
This isn’t so much a separate phase as something you should be doing as you go along and are creating the new website. But it’s easier to separate it out here so we can see all of the necessary details that go into setting up a new website.
- Many CMS themes provide a solid foundation that you as a developer/web designer can build upon. However, it will probably be necessary to add custom coding (HTML / CSS / JavaScript / jQuery, etc.) to customize the theme. Themes are good starting points, but always strive to add your own unique flair, so that your client’s site doesn’t look too similar to someone else’s.
That being said: the flip side of adding your own unique custom code is: there’s always the risk that the more code you add to a website or blog, the more boated it will become – and as a result the slower it will be when loading into a web browser. Page loading time counts a LOT in terms of user satisfaction and SEO.
- Especially if you’re recreating your client’s website using WordPress, you’ll probably notice the massive number of plugins available for you to load onto your new site. But proceed with caution here, and avoid installing any plugins unless they are absolutely necessary.
Again, in regard to keeping things streamlined: plugins can introduce bloat and slow down your site. Or worse, they can introduce code vulnerabilities that hackers could exploit. At the very least, excessive use of plugins might mess up the code of your theme and/or of your other plugins.
I have run into this a few times – when I introduced a code conflict by installing a new plugin. Oh – and if you’re using WordPress and are checking out new plugins to possibly install: if a plugin says it’s “untested with your version of WordPress”, you should probably not go ahead and install it anyway (like I’ve done… but I will not be making that mistake again!) - As the new website is being created, make sure all pages are optimized for Search engines such as Google, Bing, Yahoo and so on. Try to keep SEO (search engine optimization) in mind every step of the way. SEO measures should be taken on the page content itself (text and graphics, navigation, h1 and h2 tags, using keywords, adding image alt tags, etc.) and inside the code of the web pages (title tags, keywords, meta descriptions, etc.)
- Take steps to optimize your site for different forms of user interaction: clicking with a mouse, touching the screen, using keyboard controls, and using voice-activated commands. Add label tags to all form elements. Please see this article for more details on SEO and website accessibility.
- Start to get the ball rolling on any web address (url) redirects that need to be implemented at the time your redesigned site goes live. (ex: redirecting the old website to the new website in Google My Business, Facebook, Google and other search engines, etc.) Ideally the site url should be manually updated to link directly to the new website url in all cases, but if this is not possible, then redirects may need to be put in place.
- Be sure to send the new website’s url to your client for a preliminary sign-off.
- Complete any work on the back-end (Admin area) of WordPress or other CMS to set up and assign user permissions and roles. Give your client access to the website within the CMS, if they intend to update it themselves going forward.
- Set up some type of plugin or firewall system for protecting your website from malware, suspicious login attempts, brute force attacks, hackers, or anything similar that could damage your website and/or the server your website is hosted on. I specialize in developing websites in WordPress and have used the Wordfence security plugin quite often, and am quite satisfied with it.
- Set up and begin taking backups of your website files, themes, plugins and databases. First check with your web host to see if/when they take backups of your website (to be stored on their web server). Then install some type of a file back-up plugin or system and set it up so that all files are backed up to an off-site cloud storage area (OneDrive or Dropbox for example). This is in addition to backing up your files on the same server that your website is on, which is what happens when your web host scans your site and takes a back-up of it.
In my experience working with WordPress I have used the UpdraftPlus plugin for this purpose, on several past (and present) website projects, and have found it to be easy to set up and reliable.
PHASE 5: Testing, QA’ing and Fine-Tuning Everything
Ideally, you should be testing your new site design and functionality often, as you move along in the process. I usually test in different browsers and devices every time I make a significant change to a page or feature.
In addition to this, when you are nearing the end of the project and are maybe a few weeks to a month from your go-live date, it’s time for more formal testing to begin. This is the time for extensive testing to ensure the site, hosting and backup setup and plugins are all 100% bug free, fully compatible and responsive. You will need to test the new website using multiple different devices (PCs, Macs, tablets, mobile phones, etc.) and on at least several of the major browsers (Chrome, Firefox, Internet Explorer, Safari, Opera).
Fine-tune and finalize details of the application design and features.
Then set a final deadline for receiving content changes and tweaks.
As the site creator you should provide a thorough checkout of every link, form and feature of the new site.
Either you or the client can arrange for further User Testing as needed. This could be done by the client and their team and/or outside usability testers.
Set a deadline for receiving testing feedback/changes from the client and/or their team of testers.
Unless all testing went without a single hitch, you will need to make adjustments to the site, based upon testing and feedback. Next submit those changes to the client for another and hopefully final review.
Once you reach your content deadline: make sure you communicate that no more content/changes will be accepted after this point.
Make any last-minute adjustments, then ask your client for official sign-off on the “QA” or testing site. Be sure to get this final sign-off in writing – then publish your website for the world to see!
PHASE 6: Post-launch Activities
As soon as your redesigned website is live (in “Production”) you will need to do another thorough checkout, testing everything again.
During this final checkout, make sure…
- all links are working
- all images are appearing properly
- all of the pages and content have been migrated to the live server
- that all files are on a secure server and you are seeing the little padlock symbol up in your browser address bar
- to test all forms to make sure they submit correctly and route the user somewhere after submission (or are given some type of “success” message)
- to test all sliders, videos, etc. to ensure they work as planned
After you have performed your checkout of the live site, again ask your client to provide a written sign-off that everything checks out.
Next, the old website url or web address will need to be manually updated to take the user directly to the new website url, where possible. In certain instances neither the developer nor the client has access to do this. If this happens, you could ask your server administrator (host) or developer to place a 301 redirect on the old url. If this isn’t possible (worst case scenario) you could try creating a manual url redirect using JavaScript, by coding that directly onto the old site’s homepage (not the best way to redirect but it’s a last resort).
You might be in a situation where your hosting provider or web developer has created your new website on a sub-domain of your current website. In this case, your web host or server administrator should be able to move your new site over to your existing domain, so you can still use the url that you’ve been using all along.
Remember, after your site goes live — ask your client to promptly report any issues that are noticed on the live site, so you can fix them as quickly as possible. Then re-submit the corrected pages (or links or whatever might need fixing) for a quick test and approval, them push them to the live server.
If you have not already done this, at this point you should submit your new website url and sitemap to Google, Bing, Yahoo and other search engines
so they can start indexing your website. This ensures that your new site will indeed start to get picked up in search results, but if you don’t submit it there is a slight chance your site will not get picked up.
Start to get familiar with Google Search Console and Bing’s Webmaster Tools. From there you can monitor your website’s performance, check for broken links, find out how fast your pages load, and much more.
Also, you might want to look into submitting your site url to certain directories. I especially recommend submitting your newly redesigned website (if the url has changed) to your local Chamber of Commerce to be placed in their printed and online business directories. Check to see if your local area has any other business groups where you can also get your site listed. This is a great way gain more visibility within your hometown and surrounding areas.
NOTE: stay away from online Site Submission companies that say they’ll add your url to hundreds or thousands of search engines and directories. I made the mistake of doing this myself a few years ago, and got spammed in my email inbox like you wouldn’t believe, and started receiving annoying phone calls.
Plus there is no need to pay to get your website listed in search or in reputable directories.
Finally, if it is part of your contract with your client, provide any necessary training at this point (if you haven’t done so already) so that they can take over their website or blog maintenance going forward.
There are SO many benefits for any business or nonprofit in having a website, and from time to time the need arises to refresh or redo that website. There’s a LOT to think about and plan when redesigning any site – large or small (especially with large ones though!) But by breaking the process down into smaller chunks of related tasks, you can ensure your redesign projects will be much more organized and manageable.
Please share this article & let us know in the comments if there are any key tasks you would add to the process. Thank you!
