Whether you are looking to design your first website or are redesigning an existing one, your company needs a team of people with a strategic vision. Revamping a website is a mission where success or failure depends on choosing the right partners.
An outdated website is like a salesperson who is ready to retire. While it may have been successful in the past, websites using the latest technology now outperform it in many ways. No doubt you encountered a few pitfalls since you first launched your site and you want to ensure you don’t repeat old, outdated ideas this time around. Perhaps your website has not kept pace with your company's goals and strategies and, over time, its message is no longer as relevant. Here are the 10 key steps to designing an agency website.
Not enough time to read? Download your copy
Step 1: A Redesign Strategy that Mobilizes your Team
What motivates you to take on this project? There are many reasons to redesign a website.
- Your product line and/or the services you provide may have changed over time and your site no longer accurately reflects what you are offering.
- You recently made a business acquisition and would like to merge the acquired business website with the official company site.
- You are rebranding and need to implement the new design on all your marketing platforms.
- You are going digital. To succeed online, implementing digital platforms such as automated marketing funnels, intranets or extranets may become essential.
In planning your website’s new design, you must consider the needs of each department. Obviously, a website is a fantastic tool for sales and should, when integrated with your marketing campaigns, work to generate leads. But a well-designed website can meet several other needs as well such as managing human resources.
HR needs must be an essential part of your website strategy
Your website will be an important tool for future employees - thus your strategy must include a human resource component. In a context of full employment, companies that regularly attain their growth objectives have, for the most part, some type of automated process to collect resumés as well as web pages describing the company’s corporate culture. These companies are successful in communicating the benefits of joining their team. Candidates in today’s job market use various methods to find the suitable job. For many, applying for a job with a click on a button linked to their LinkedIn profile is now the norm. User forms should only ask for the minimum amount of information needed to prequalify the candidate, nothing more. We will discuss this point in a future article.
Here’s what you should have on hand when you start redesigning your website
- An organized diagram of your product / service offering
- Clear positioning
- A well-studied digital plan
- The personas to be addressed
- The key messages you wish to convey to your personas
- Your new brand image if it’s a rebranding exercise.
Before jumping in and redesigning your website, other decisions need to be made based on the budget, the business model and the context of your industry in the market. Defining a company’s digital strategy should be the starting point. The strategy must consider digital touch points and other traffic channels to provide the best possible customer experience. Develop and refine the following points to ensure that all factors which might impact the redesign have been taken into consideration.
Points to be discussed when designing a digital strategy
- Define the goals the redesign is intended to meet
- Identify the best-performing traffic sources in the current marketing strategy and determine which new traffic sources are worth investing in
- Create a comprehensive content outline and site map
- List the digital tools that are currently used (CRM, MAP, Chat, CMS etc.)
- Determine the types of content that need to be produced
- Organize a committee to take charge of the website
- Before the redesign, plan or at least get an idea of the different campaigns that are to be set into motion once the new website has been launched
- Build a project management calendar by phase
Step 2: Define the user experience
According to the principles of user experience (or UX Design), a successful browsing experience is one in which the user’s interactions with a digital service allow them to accomplish the required tasks easily and in a pleasant manner. In this sense, the UX Designer's role is to use empathy to predict user behavior to reduce any friction that might be caused by bad design. The designer goes through four fundamental phases to create the best possible user experience: research, definition, prototyping and testing.
User Experience | Research Phase
The research phase is where the necessary knowledge about end users to build up enough empathy to respond to their needs is acquired. While working on a project, we need to obtain background information about the industry and become experts in the field as it is essential to see the overall picture in order to communicate effectively. We develop this expertise through a dialog with the customer, but also by being aware of what competitors are doing. We identify important issues in the industry and that, in conjunction with the creation of personas and user-stories, will help us formulate a website that meets the needs of the user.
User Experience | Definition Phase
After the Research Phase comes the Definition Phase. This is where we identify and prioritize any challenges to better overcome them. In this phase, we have enough information to create the site map that defines the hierarchy of the pages on the site and how they relate to one another. We brainstorm general ideas about how best to serve the user. What type of menu will be most effective in promoting navigation? Which elements on the page should be prioritized to optimize interactions with the user? These are the types of issues to be explored at this point.
User Experience | Prototyping Phase
Next comes the Prototyping Phase. This is where we build the website that focuses on the features without worrying about the site’s visual aspect. This is often known as making wireframes. The goal here is to not only define the global structure of various sections of the website, but also to establish how it will interact with the user, which functions are to be included and identifying where help pages may be needed. We also emphasize any information that can be used to promote the ergonomics of the digital platform.
User Experience | Test Phase
The designer creating the UX will not be using the site on a daily basis. Thus, in the test phase, we confirm whether the designer’s ideas do, indeed, work seamlessly in the real world. These tests allow us to adjust our prototypes quickly without having to resort to complex programming until the overall experience is pleasant for the user. Throughout this process, the designer puts himself in the user’s shoes. Everything is constructed to meet user requirements and make navigation of the website a pleasant experience.
Step 3: SEO
SEO is a crucial step in the development of the website.
Keyword Research
Keyword research is where we analyze the search volume of keywords and how they are used on the Web. There are many tools available to help with this. To get a general idea of the most effective keywords, we can use SEMrush with your existing website and compare the results to those of the competition. The goal is to determine the top-performing keywords for these websites in the search engine rankings. Then, using a keyword miner such as Keyword.io. Long lists of related keywords from a semantic point of view are compiled. Moz Keyword Explorer and Google Ads Keyword Planner Tool provide important SEO data such as keyword search volume and difficulty. Google Trends can help identify search trends on Google. This tool can be used to, among other things, reveal the seasonality of certain terms and their usage in different geographical areas.
On-page SEO
In addition to identifying keywords, the structure of the information contained on the web pages must be optimized. There are several points to consider:
H1
Only use one H1 tag per page. In addition, the structure of the subtitles must be chronological. The best practice is to insert the keyword to be referenced at the beginning of the subtitle.
Meta
Meta-Description and Meta-Keyword tags help users understand what is contained on the web pages. A compelling description can increase the click rate (CTR) significantly. The keyword selected for a given page can also be inserted within these tags.
301 and 404
Make sure there are no broken links or Error 404s. Analyze your website’s internal links and identify which pages are referenced in the search results. To properly track these errors in Google Analytics, be sure to insert the error code, “404” in the title tag. To permanently remove these errors, you must configure a permanent redirect (301) to a relevant page.
URL
The page URLs should reflect the content of the web page. Here again, the ideal is to insert the keyword you are aiming for. Avoid complex website structures - your users should be able to easily understand the structure of your website by simply reading the URL.
HTTPS
An SSL certificate is used to secure a website as well as any data it may transfer. Google considers this so important that it prioritizes HTTPS secure sites for SEO. Hence, obtaining a security certificate for your site will help your SEO ranking and prevent the loss of visitors. In addition, some browsers, such as Google Chrome, display a message which indicates that the site does not have a valid SSL certificate and therefore can’t be trusted before the visitor can even enter it.
Step 4: Content
Once the strategy has been validated, the user experience is functioning well and the relevant keywords have been identified, it’s time for the content creation stage. Content for your target audience must take into account the personas targeted by your organization, search trends and, of course, the product or service you offer.
Creating content that resonates with the user is one of the most difficult stages of any project. Content creation can often draw attention to a lack of alignment in the organization. That's why it's so important to have key messages, personas and a clear offer to avoid conflicts between operations, sales and marketing during the website redesign or, even worse, after the project has been completed. Of course, there’s always room for improvement and content may be modified afterwhile.
As you develop your content, be sure to advocate the customer’s interests first and foremost. The reading experience must be aligned with what the customer had been searching for. Knowing exactly what your website’s visitors are looking for is difficult. Hence, you need to ensure that your copy is relevant and to the point. The end goal is to provide "... the right content, at the right time, to the right person". Since it is difficult, even impossible in some cases, to do this, it is more important to ensure that your content is easily found, is well indexed, the URL is easy to remember and links to your site can be quickly saved for future reference. In this way, even if your visitor is in a hurry when they stumble across your page, your content can be found easily and consumed later when they have more time to digest it.
There are 4 types of pages.
Navigation Pages
The purpose of a navigation page is to direct people to content they are currently searching for. Examples include the home page, landing pages and image galleries.
Content Pages
Content pages make up the major part of your site. They are the primary reason people visit as they provide information related to the visitor’s interests. These pages will likely be discovered through keyword search results that invite the visitor to click on an organic link. Examples include articles and product pages.
Functional Pages
Functional pages allow people to perform a task, such as a keyword search or subscribing to a newsletter. Examples include search pages, tenders and job application forms.
Landing Pages (or Squeeze pages)
In digital marketing, a landing page is a standalone web page created for a specific marketing or advertising campaign. It’s where a visitor "lands" when he clicks on a Google Ad, for example. Landing pages are designed with one purpose in mind: to convince. Having a clear call to action is essential for this type of page. Depending on the goal you wish to accomplish on a given page, you must adapt your writing style to guide, inform, accompany or convince.
Optimized writing
The diagram below demonstrates the synergy between users, search engines and your content. By combining a clear product / service offer, search terms that target the reader you wish to reach and optimized indexing in the search engines, you better your odds to enjoy success in terms of traffic to your site and conversions. That said, abandoning one of these three key components is certain to reduce traffic which will, in turn, lower conversion rates.
Step 5: Design
Next comes the design stage where we take the approved wireframes from UX stage and apply artistic design to make them visually appealing and consistent with the brand.
Mood boards and site layout
Inspired by what the brand already has as a visual identity (colors, font style, photo processing), we adapt these elements to the digital platform to establish the overall site layout. We also add elements that take less space on the page such as a family of icons. The site layout can be presented as a mood board for the client to approve or it can be applied directly to the prototypes depending on the budget that has been allocated. Mood boards show the general idea of the site layout at a glance without the time-consuming process of applying it directly to the wireframes.
Creating mock-ups
Once the overall layout has been established, it’s time to create the design mock-ups. Here, we take the work done in the designer UX phase and apply the approved layout to create a unified vision. If the content writing is also created at this stage, we can integrate it as well to obtain the clearest possible idea of what the future website will look like. We create the icons, select featured images and determine which fonts are to be used as well as determining their size and spacing.
Adding animation and bringing the mock-ups to life
At this point, we can suggest which types of animations will align with the visual look and feel so that they can be programmed in future steps. We predict the state of the buttons when the user hovers over or clicks on them as well as the state of the forms once they have been selected and filled out. We determine the style of each HTML element type including smart lists, quotes, accordion menus, pop-ups, and so on. Once all the mock-ups have been produced and approved, we deliver the source files to our programmers.
Step 6: Deciding on the CMS
At Parkour3, we have been evaluating CMS platforms since 2002, and, year after year, Wordpress remains our CMS of choice. Of course, we need to adapt to the contexts and business needs of our customers and sometimes this mean working with other platforms. But, in general, Wordpress remains the CMS of choice for over 70% of our projects. Evaluating which content management system to use brings up a number of questions. The 6 main factors to consider are:
- The programming language
- User autonomy
- Performance
- Security
- Size of the developer community
- Availability of compatible plug-ins in the marketplace
The programming language
The choice of a CMS is closely related to the programming language to be used to build the project. We tackle the following questions:
- Does it use old technology that may no longer be supported on other platforms in our digital ecosystem or is it a new technology that our development team is familiar with?
- Is it a technology that we plan to keep for a long time?
For example, at Parkour3, we’ll ask if languages includes PHP, HTML and CSS.
Autonomy of CMS content developers
It is of utmost importance that CMS users have the tools they need to work autonomously once the website goes online. Creating menu items, managing content and creating web pages are regular tasks for website administrators. It is good practice to create demos and perform feature testing to ensure the CMS is easy to use.
The overall performance of the CMS
Evaluating download performance and how the CMS renders various elements is a must. We recommend tests with demo content to evaluate:
- Download speed
- The quantity and relevance of downloaded scripts
- Speed of the interface
- Lightweight operation for browsers
Once we have the results of these fundamental tests, it is time to evaluate the performance of the development modules contained within the CMS. For example, if the CMS is in Laravel does it have to work within Laravel's standards or can we use a customized approach? Of course, a proprietary CMS will be more work to maintain - as much for the customer as for us. Consider the amount of data to be managed. For example, if you have 100,000 entries and your CMS is running on a single database, site performance will probably suffer. Which CMS is better: Wordpress, Joomla or Drupal? Each one has its strengths. It's a question of the size of the development community and innovation. For example, Wordpress has recently implemented its new Gutenberg editor where it uses blocks instead of page templates.
Security levels
Your website must be secured according to the type of information that is being collected. The more sensitive the information, the more secure the site must be. The CMS needs to respect certain programming standards. Although there is an established community which monitors CMS security, it is important to know which standards the CMS publisher uses for its security updates and whether security updates have been deployed on your site once they have been tested.
Size of the developer community
The size of the developer community has an indirect impact on costs and development time. Community support is helpful when technical challenges arise. Developers learn from other developers in the community at popular forums such as StackOverflow, in the resource sections of the company website or the Slack channel dedicated to the programming language being used. Clearly, when things go wrong fast support is essential. Hence, the size of the community has a direct impact on how quickly we can get answers to our questions so issues can be resolved more quickly.
Pre-made plug-ins in the marketplace
Each CMS has its own basic modules and fields. Your website will most likely be customized to meet your needs and work within your business processes. As we perform our evaluation to determine the best CMS for your project, we will take into account any existing plug-ins related to your needs as some of this functionality may not be addressed in the basic CMS installation. At this point, we must stop and weigh the pros and the cons. Are you willing to develop the necessary modules in order to keep the current CMS or would it better to consider another CMS that incorporates these features from the outset? The costs associated with developing custom modules or migrating to another CMS will often be the deciding factor. For optimum website performance, it may be best to develop in-house modules so as not to use too many plug-ins. By the same token, you won’t be dependent on third-party updates.
Choosing a CMS as part of an e-commerce strategy
As mentioned above, first we must identify the high-level functions and then evaluate whether the platform is able to respond to them - whether it be through existing modules or future modules to be developed. Doubtless you have some idea of the costs associated with each evaluated technology. Some platforms can cost tens of thousands of dollars each year. The chosen platform must be examined in context with the projected income it can produce.
Module availability
When creating an e-commerce site, your needs in terms of business processes must be well defined. The chosen platform will become an important digital tool. It can be connected to your product information management software (PIM). Most likely, the platform will need to connect to other applications such as shipping services, CRM, E-tailers, online support platforms, proprietary applications and so on. If some of these modules have already been developed, are known to be reliable and are available for purchase, it may be best to buy them - you will save considerable time and development costs. It is important to find out whether these modules were developed by and are supported by the CMS publisher or whether they come from third parties. You need to be careful in your selection as some CMS publishers do not support or validate the quality of third-party plug-ins. In the case of Wordpress / Woocommerce, several plug-ins available on the market have been tested and approved by Woocommerce which means they can be trusted to work well at the lowest level of operation.
Proof of concept
Should you be inspired by another e-commerce site, whether in your industry or in one with a similar business model, you should try to learn more about any issues or limitations that had to be overcome as well as the total cost of acquiring the platform. Look for conclusive proof of concept. Managing a static website is simple, but when the platform needs to manage multiple databases, accounts, and transactions, you need to be extra vigilant. After all, investing in e-commerce is a major change for many businesses.
Choosing a payment module
Should you want to use a mature and fully-developed platform such as PayPal or Stripe, integration with your e-commerce site will be somewhat linear and shouldn’t pose too much of a challenge. If the project is leaning towards a solution such as Beanstream or Paysafe, the primary reason should be the need for higher customization. Long-term savings need to justify the higher, short-term investment when compared with the first two solutions we mentioned.
The sales model
If your website is meant to sell unique products without too many variations and your database has only a few thousand entries, most platforms can do the job. However, here is a non-exhaustive list of questions you should answer before deciding on a platform.
- Does it need to manage tens of thousands of unique or variable products?
- Does it have to manage subscriptions?
- Does it need to provide a tender portal?
- Does it need to manage distributors or multi-user business accounts?
- Does the e-commerce site need to be available internationally?
- Will it be governed by the tax laws of the countries in which your products are distributed?
Maintenance
To optimize operational performance, ensure that proper documentation is available once the project is complete. The documentation must be scalable and adapt to changes that will be made over time. It should, at the very least, include the following sections:
- The modules that were originally installed and their mode of operation as well as how they connect to other modules in the platform.
- The original installed versions of each of the technologies used as part of creating your e-commerce platform as well as up-to-date versions.
Step 7: Martech Stack
The Martech stack, or marketing tools suite, allows you to operate your site on different acquisition channels and automate the site’s relationship with users. Several types of tools will make up your suite such as a CRM, a PIM, a marketing automation platform and even advertising platforms. If you want to compare various tools used by your competitors, Ghostery or Builtwith can be of great help. You need all the data you can crunch to compete and achieve online success!
Data to collect
The first step is to identify what information to collect about your users: demographics, interests, behavior, etc. Follow-up cookies are great for this. Due to data protection regulations and antispam laws, your site has to abide by certain protocols to avoid getting penalized. By gathering data about your users, you can better target your ideal customer and be more effective at communicating your message. While there are several forms of data, our focus is on the following two types:
1. Implicit Data : Implicit data includes data generated during the course of a user session - but without the user providing this information directly or indirectly through a form. For example: geolocation, the IP address, time spent on a page and the URL of the referring site are all examples of implicit data.
2. Explicit Data : Explicit data incorporates any information collected through forms, logins or any other means that requires the user to enter data. Explicit data is important to learn the first and last name of a user, among other things.
Interoperability
Your technological choices must fit in with your current ecosystem. Most tools on your website can be connected to Google Tag Manager, a tag management tool which is ideal for managing trackers such as Facebook Pixel or LinkedIn Insight. In addition, these tools often need to communicate with each other as it’s the case between the CRM and the marketing automation platform.
Scalable system
It is important to forecast the evolution of your Martech stack over time. What are its limits? What are the long-term costs? If you opt for a cloud computing solution, it's a safe bet that your software investment can grow in conjunction with your business. In the case of a hosted solution, it’s up to you to manage machine performance and uptime. Your ecosystem must be scalable and adaptable to your present and future needs.
The learning curve
The learning curve is certainly a factor that needs to be considered in your project plan. You will have to learn how to use a suite of tools. If you plan to manage your website in-house, think about what tools you’ll need to train your team and find communities that can provide helpful tips on Facebook, in tech software forums and/or on Slack channels. Several platforms have their own Training Academy. Most of the time, we work with companies that simply do not have time to attend these training sessions. In a context where employee turnover is high, a partner who has the necessary resources at hand to act quickly can become the solution. At Parkour3, we are often called upon to carry out the technical and marketing aspects of a project. Having trained experts on hand to support your team allows you to concentrate on your core business and reduce any risks associated with training your team.
Step 8: Development
Development, or back-end programming, consists of passing information from the databases to the user interface. These take the form of queries to a database, determining the best way to manage the information and what business rules need to be applied. For example:
- Displaying a sequence of records in a desired order
- Date and place management
- Importing and exporting information in a profile.
The first steps to properly plan back-end requirements
A technical analysis will be the first step. It will, among other things, include various guidelines regarding which features to include in the final version of the project. These guidelines include desired feature behavior as well as the relationships between the software and the databases, forms, profiles and other web services that need to be managed. This analysis is an essential step in redesigning a website. Documentation is provided and will be updated as your system evolves to ensure the integrity of the platform and the software to which it connects.
Administrative platform or Content Management System (CMS)
The back-end also refers to the administrative platform or CMS. When you log into the CMS, you have various options to configure such as form fields, menu items, page content, etc. Customizing the back-end will help provide a simple, user-friendly CMS. Any new modules also need to be created in the back-end. Modules can collect both front-end and CMS information and can also connect to a CRM or an ERP. Although back-end programming is transparent to site visitors, it does have a major impact on the user experience.
Back-end programming and 4 pitfalls to Avoid
Pitfall #1
Poor preparation before starting the project is the first trap to avoid. As back-end programming is less visual, bad results will be perceived later in the project - unlike in front-end development where results can be visualized more quickly.
Pitfall #2
Ask for proof of concept as soon as possible. Since back-end programming refers mostly to an information exchange between the platform and the user, be sure you have a proof of concept that validates the functionality as defined in the initial specifications.
Pitfall #3
For programmers, regarding what was mentioned in # 2, set up a comprehensive testing schedule in advance to ensure clean code and minimize possible bad behavior as well as errors in data rendering.
Pitfall #4
It is important to ensure that logs are properly managed. Often a programmer will not bother checking the logs or recent updates even though, should there be a glitch, they could help him identify if it was caused by a bug in an update of a particular feature. Some security features can help ensure that scheduled back-end tasks are completed successfully. For example, if a planned data transfer to your CRM or ERP failed, it can trigger an email to notify the system administrator.
Step 9: Technical Integration
The front-end developer builds the visual and dynamic aspect of the website. This development is divided into 4 important steps to optimize the visitor’s experience with the site.
- HTML,
- CSS,
- JavaScript
- and site performance
For the front-end developer, the project starts when the mock-ups created in Step 5 have been approved by the client.
HTML
"Hypertext Markup Language" - better known by the acronym HTML - is the most important part of website creation. It is the site’s “skeleton” or template. Proper positioning of the elements makes it easy to understand the page structure when navigating the page. Each section of the site is divided into a "div" tag (for “division”). Of course, we use a host of other available tags to recreate - as faithfully as possible - the visual appearance the designer had in mind. Thus, it is important to apply good logic to the sequence of elements as the structure established in this step will become the order in which information on the site pages will appear. Which leads us to the CSS portion.
CSS
The CSS (Cascading Style Sheet) code controls the graphical appearance of elements created by the HTML tags. Colors, position and text sizes can all be modified through CSS. The colors that were chosen by the designer are analyzed and incorporated into the CSS as per graphic design standards. Also, the front-end developer must decide which styles are needed to accurately represent the website being built. In other words, to use the appropriate tags to obtain optimal results. But be aware that some CSS code can render a different result depending on the browser that is used. Once the CSS is complete, the various transitions that need to be incorporated into the site are discussed with the designer in preparation for the next step, coding the JavaScript.
JavaScript
JavaScript code controls the functionality and animation of the site. It is best to complete the HTML and CSS steps before starting this phase. Javascript manages the dynamic aspect such as appearance and movement. Animating a menu, for example, amplifies the quality and appeal of a site. The developer sometimes uses animation libraries to transform the elements of a web page into a live interaction with the cursor. Using animations is optional, although the trend is towards dynamic websites. It is important that the animations are in good taste and provide added value to the user experience. Success in completing this step requires knowledge on how to optimize the download performance of the site so that web pages are not too heavy. That's why performance is the 4th stage of technical integration.
Download performance
When all these steps are completed, the front-end developer must optimize site performance. Viewing the site on different browsers and mobile devices is a must to detect any remaining bugs. Then, the files on the site must be reduced to speed up server response time. Finally, a good integration between the front-end and back-end is fundamental for the website to function as it should. Developers must communicate well with the entire team as many aspects of a project may change during its life cycle. This is why the use of Agile techniques is a key element in the contracts we undertake. Of course, other steps can also be incorporated during the technical integration phase depending on the complexity of the project.
Step 10: Analytics
Web audience analysis is at the heart of web activities. As an integral part of Martech, analytics needs its own step. At a minimum, you will probably install and configure Google Analytics. This crucial step will allow you to have clean data that is free of any parasites. You will be able to make informed decisions on topics as varied as UX, conversion rate optimization (CRO), advertising placement, communication and which social networks you should be active in. Having good knowledge of a web analytics tool, such as Google Analytics, is a must for in-house use. A good grasp of this tool lets you perform a rapid analysis of site metrics and key performance indicators. However, working with an expert can help you to visualize the data and associate a story to each visitor. In this way, you will learn a lot from the tool and will be able to make informed decisions regarding future campaigns and plan improvements to your website.
Conclusion
Redesigning a website should not be taken lightly for a company that wants a digital marketing strategy to perform. Many questions and challenges may arise that could influence the outcome of your project. The evolution of technology and business models as well as ever-improving processes will contribute to your success once they have been properly implemented. At Parkour3, we are at the cutting edge of new innovations in digital marketing and sales processes and are ready to use our expertise to generate growth for our customers. We strive to transmit what we have learned to companies that have the desire to perform well. We invite you to consult us for any website redesign project.