Working with an agency to create a new website can be a daunting idea. But if you follow a clear website design and development process, it doesn’t have to be stressful. WTM Digital is constantly working to create and refine our process, so I wanted to review the steps we use on every site to ensure a successful, final product.
1) Sitemap and Discovery
Before we crack open Photoshop or write a line of code, we need to understand the vision of the new site. In the Sitemap and Discovery phase, we review the current site (if there is one), and get a sense of what the new site should be. What designs does the client like? Will the new site consolidate pages? Will it add it pages? Will it keep all the same pages? Should the site convey a completely different message? Using this information, we create a sitemap that lays out the new hierarchy of the site, listing out the structure of all the pages. This information is important for designers, but it is also important for the SEO team to plan out the on-site recommendations for each page.
2) Wireframe
After the Sitemap and Discovery phase, we know what pages the site will contain, but we still don’t know how information should be displayed. The wireframe process is where we blueprint out the structure of the site, paying careful attention to the overall message and user experience. The wireframe shows what sections will display on what page, what length of text is required for each section, and the approximate image/graphic dimensions that are needed.
3) Content Creation
With the wireframe created and approved, it is now the client’s job to review the wireframes and write and organize appropriate content. When reviewing a successful wireframe, the client will be able to see what sections they need to write, and what images/graphics they need to provide. For example, you may see that the homepage requires a block of text with a certain word length, or an image with a certain dimension.
Often, this can be a bigger job than anticipated. In an earlier blog post, our front-end developer Kevin Konrad discussed the importance of both clients and agencies following deadlines, and this is the section that is mostly likely to stall your project. While many clients choose to write the content themselves, others find it easier to work with a professional writer through the agency.
Most agencies have a preferred means of receiving this content to alleviate confusion, so it’s important to agree on a method of sending copy and images to your agency.
4) Design
Now, with the wireframes and copy created, we get to the truly fun part of the process! If all the other steps have been followed, then the design should be a natural extension of the wireframe. There should be no huge surprises when the client sees the first design—it should largely fit with the desired theme and branding discussed in the Sitemap and Discovery phase, and it should be laid out to convey the message that was determined in the wireframe creation.
Still, some clients find that the first draft is not what they were anticipating. This is OK, and perfectly normally. Clients should not be afraid to tell their designer their honest opinion on the site’s design so it can be fixed through revisions—it’s easier to fix it now than after it has been developed! WTM Digital includes two complete revision cycles, which we find is sufficient to reach a final product that everyone is happy with.
5) Development
The development phase begins when the site’s design is approved and all the content and images have been provided. Development is the most time-intensive portion of the project, so it is important that changes regarding design and images are minor. Development takes the design of the site and makes it work for the web, using a content management system, or CMS (such as WordPress, Shopify, Magento, Squarespace, or Drupal) as the backend.
6) Responsive Development/Browser Testing
It’s not enough for your site to look good on 27-inch widescreen monitors, it also has to work on phones and tablets. With many people only using phones to browse the internet, having the site adapt and respond to various devices is necessary to create a good user experience. After the general development is complete, we will custom style the site to work on a range of devices and confirm that it is working on a variety of browsers. WTM Digital has an ever-changing list of supported browsers, but we are always happy to quote additional support for older browsers that may be needed based on a client’s unique visitor statistics.
7) Schema
Schema is an important part of every modern site. Schema tags classify what the data on your site represents. For instance, Schema tags can be used to mark information on the site as a product, place, review, event, etc. This lets search engines display additional data in the SERPs. Coordinating with the SEO team, we add all desired Schema tags to your site that are beneficial for your industry.
8) Content Upload and Formatting
Using the content and images that were provided earlier in the project, we can now start uploading the content to the site. In this section, we are careful to format the text and images to work well within the design, correct formatting issues, and resize images. Clients can either choose to have us upload and format every page of the site, or we can upload a smaller amount as an example and provide training for them to complete the rest.
9) Blog Migration
Though your new site may be on the same platform as the old site (such as WordPress), the blog posts will still need to be imported to the new site, and copy and images may need to be tweaked to work with the new design and format. Depending on the age of the old site, this can be either a quick, or time-intensive and manual process. In some cases, the client may decide to only bring select posts over, or posts within a certain timeframe. That should all be decided and communicated with the developers, to avoid potentially unneeded work.
10) On-Site Implementation
Before we launch the site, we want to make sure that all of the recommendations from the SEO team are in place, including proper redirects, URL structure, title tags, meta descriptions, image alt text, etc. After all this effort on the look of the site, it is important to have a solid technical foundation.
11) Site Launch
Congratulations! You’ve made it this far, and it’s time to celebrate by launching your new site. Prior to launching the site, we go over a pre- and post- launch checklist with the SEO team to ensure that the site is ready to launch. Once we’re satisfied that everything is ready, we back up the old site and launch the new site.
12) On-Going Updates and Maintenance
Your site is launched, the champagne is out, and everything is done. That means you will never have to do anything on the site ever again, right? Well, not exactly. Just like a brick-and-mortar store requires regular maintenance and upkeep, your site requires regular work. You may decide to add new pages and posts, create new templates, and design new icons and elements to use throughout your site. Or new versions of your CMS and plugins may be released with important security patches that will protect your site from vulnerabilities. It is very important to keep your site up-to-date and secure and do frequent, scheduled backups of your site.