Web traffic continues to increase as people work from home and businesses remain closed. With the “face” of a company being online, many companies are realizing the need to better optimize their web presence.
It’s important to understand that creating a new website is a structured process—from architecting the site and designing page layout and content flow, to creating (or refining) verbal and visual messaging, to development and searchability.
In our last blog post, we discussed the beginning steps you can take to improve your website with growth-driven design. Here, we’ll explain the process of a complete redesign, supported with examples from our clients.
Website Redesign Process
- Evaluate your existing site
- Establish a site strategy and SMART goals
- Evaluate competitor sites
- Create sitemap architecture options
- Wireframe key pages
- Art direct key pages
- Create verbal and visual assets
- Web development
- Optimize for SEO
- Launch and maintenance
1. Evaluate what’s working and not working with your existing site.
Input meetings with key personnel—from your company and the agency if you’re working with one—are an essential first step. Include a variety of team members from various departments so you have different perspectives to effectively determine what’s working and not working with your existing site. Identify and assess current issues and obstacles.
Here are a few example questions that can fuel discussions:
- What do users/customers like and dislike about your current site and why?
- Who is your target audience and for what information are they visiting?
- Do prospects often have similar questions that aren’t currently covered on your site?
- What unique selling points does your site need to address better?
- How well are various buyer persona pain points addressed?
- What content needs to be updated and/or added?
Analyze data from your existing site as well to see what’s working well and where issues lie. Using data tools such as Google Analytics, you gain insight into which pages have high bounce rates, from where traffic is coming, SEO performance, popular and unpopular pages and more.
2. Establish a site strategy and SMART goals.
After you have a good understanding of what your new site needs to include, it’s time to set goals to give the project proper direction and define metrics that will be used to evaluate success. Are you trying to increase your web presence and become a better resource? Improve user interaction? Build your brand? Whatever the goals and objectives are, they need to be Specific, Measureable, Attainable, Relevant and Timely.
A good place to start is by identifying needs and wants, and determining what are “must-haves” and “nice-to-haves” (items that may need to be set aside for development after the site is launched). That’s why growth-driven design is so important.
By having SMART goals and ensuring your design strategy allows room for growth, you’ll continually create the ideal user experience and provide relevant content that speaks to the most prominent questions, needs and desires.
3. Evaluate competitor sites and share other sites of interest.
What do competitor websites do well—or fail to do? A competitive website analysis will provide valuable insights into your own site creation. Evaluation should be done from an unbiased perspective, which is why many companies turn to an outside agency for a fresh perspective.
When analyzing competitor sites, some factors to compare are:
- Navigational structure
- Product/service hierarchy, organization, offerings and terminology
- Messaging
- Tone and manner
- Color palette
- Visual and verbal tactics
- Unique selling points
- Pain points addressed
- Functionality
- SERP ranking (tools such as SEMRush or SpyFu can be very helpful)
Review sites besides competitors as well, even outside of your industry. From where else can you draw inspiration? Encourage your team to share sites with each other when they find things that are done well: navigation, page layouts, interactive elements, imagery, video, etc. You never know what might spark a great idea.
4. Create and review sitemap architecture options.
How well you map your site determines how search engines crawl and index your site, and if visitors will be led down a conversion path. There are many factors to consider when creating (or restructuring) site architecture.
Effectively strategizing different options begins with assessing your current sitemap. We help our clients through this process by outlining their existing sitemap and then providing a variety of revised options based on findings from client input meetings and research including current navigational issues, user experience analytics, buyer personas, and industry and keyword research.
Diverse sitemap options fuel discussions, and the evaluation process ensures the best possible option is developed. When the sitemap is finalized, it provides an organizational structure for content that will need to be developed.
5. Wireframe key pages.
Wireframes provide a visual understanding of content flow and page functionality, without the distraction of art direction. This is often done for main pages in the navigation, such as the home page and product or service pages. Understanding what the page will communicate, downloads or other CTAs, and functionality will help avoid questions as the project nears completion.
Here’s an example of a partial wireframe we created for Capital Data, a premier IT consulting firm.
The wireframe visually shows page elements while notes explain functionality.
6. Design comps of key pages for art direction.
After a wireframe for a page is approved, comps need to be created to show what the page will look like (fonts, colors, buttons, etc.), for art direction approval prior to programming. Comps demonstrate art elements that would be repeated or modified on other pages, including header and footer appearance, forms, visual treatments, etc. Different options are often presented and refined until a final look is established.
Below is an example of a home page comp we created for the new Info-Pro site to show how new branding elements (fonts, color palette, etc.) would be incorporated.
The home page comp includes fonts, color palette, photography and imagery styles.
7. Content development for verbal and visual assets.
Whether creating new content or refining existing assets, there are many considerations. Based on the evaluation of your existing site, what messaging needs to change? Is new photography needed for your facilities, products, processes, demos or your team? How will visual and verbal content align with your branding strategy? Collaboration will need to happen between content strategists, copywriters, subject matter experts (SMEs), designers and developers. Ask your receptionists and technical support teams the most frequently asked questions—find a home for that information in a robust, well-organized FAQ section.
8. Web development—coding and building pages.
The web development stage varies depending on how the website is being built. Our agency builds on the leading CMS—WordPress (used by 65% of all CMS-enabled websites), so the first step is always selecting and setting up a flexible theme (not to be confused with page templates). Themes take hours of programming out of the development effort, but enable creative flexibility. After that, pages are built—often starting with the home page and other important pages that define appearance and functionality. Since it’s easy to duplicate a page design, we typically build different page templates first, then modify those designs to suit the content as we build out the sitemap.
Remember, all pages need to respond to various browser parameters and an array of devices. So during development continually test navigation, as well as verbal and visual appearances to ensure they work seamlessly across browsers and devices.
9. Optimize for SEO to improve search ranking and target quality traffic.
Reference the SEO research you did during the site evaluation step. What are your important keywords? What industry terms need to be included? If you provide a local service, how will you rank for local SEO? There are many on-page SEO elements and each needs to be optimized. This includes site meta tags, title tags, alt tags, URLs, navigation, header tags, content, links and images. Some CMS platforms such as WordPress provide plug-ins that help simplify clean, SEO friendly code. Further optimize your domain SEO by accounting for proper redirection of legacy and existing pages that historically served you well.
As you create content for your site, think about how you can position your brand as an industry thought leader. Long format educational pages, also known as pillar pages, are a great way to convey expertise on an industry topic and drive more organic traffic to your site, improving your overall ranking.
10. Launch the site and implement a maintenance plan.
Finally, launch day! The excitement and satisfaction of seeing your hard work come full circle. After thoroughly testing and reviewing your site, your URL can be connected to the new website, residing with your web host. When the site is live, the website should be reviewed again to check for issues like broken links or missing images.
Before your site is launched it’s essential to establish a long-term maintenance plan. A site that isn’t maintained and updated runs the risk of security breaches, functionality glitches and decreased speed. And if updates are missed or made too late, it can lead to costly downtime since it may take more time to find and fix issues. Regular maintenance is a simple way to protect your online presence and ensure the user experience is optimized.
Going forward with growth-driven design.
As customers and team members get familiar with your new site, ask for feedback and analyze data to see if your goals and objectives are being met. Adjust and modify over the next few months. These insights will help you down the road as you commence other phases as your site grows and evolves with your company.
With a growth-driven design strategy your online presence will evolve naturally as your business and marketplace changes.
