Website Redesign Projects Don’t Fail at the End—They Fail at the Beginning
A website redesign project plan is the first step toward a successful project.
In the series, we discuss the three layers in a website redesign project: planning, designing, and building. You can find the first post in the series here: Successful Website Development Projects – The Oreo Cookie Strategy: Part 1.
As with an Oreo, it’s not a cookie without the crunch, and in this case, the first crunch is the plan. A successful website redesign project starts at the beginning, it starts with a project plan. Do you have one?
When developing a website redesign project plan, there are lots of things to do and consider. There are details to gather, decisions to make, and priorities to balance. The planning step is the first step in a website redesign project. It’s hard but essential work.
Projects don’t fail at the end; they fail at the beginning. Your plan is your foundation, and a solid plan will set you up for profitable website projects.
What’s the Objective for Your Website?
Determine what your goal is before design or production work starts. It’s important that you invoke The Highlander here: there can only be one goal for your site.
What are the Functional Requirements for Your Website?
With your goal in mind, it’s time to get into the weeds. What does the site need to do, and what are the functional requirements? This is extremely important. Knowing how the website will function before design starts will save you time and money.
There will always be at two sides to functional requirements: the perspective of the website users and the needs of your business. Both perspectives are valid, but their needs will be different.
Your website users and your business’s needs will often have subgroups. For example, your target audience might be business-decision makers and IT professionals. On the business side, there can be marketing and sales professionals and HR staff. Each group will have its own requirements, and it’s important to understand what they will need from your site.
There are many ways to figure out these needs. We use the agile user story template: As a <type of user>, I want <some goal> so that <some reason>. The “so that” is optional, and it’s not always included, especially when it’s obvious. You can also write use cases, or just list all the things each group needs from the site.
This won’t be the most scintillating thing you’ve ever done. But it’s important to list as many functional requirements as possible. You need to know all the information if you are planning profitable website projects. Know that you won’t get it all down at first, but if you are diligent, you will have a head start.
Trust us—it will save you time and money if you figure out your users’ needs now. Adding requirements after starting the project is a key source of change orders and budget overruns.
What are Your Site’s Technical Requirements?
Another source of budget madness is not understanding and documenting the website’s technical requirements. Technical requirements tend to fall into two buckets: the technology required to deliver the website functionality and third-party integrations.
Website Functionality Leads to Technical Requirements
This is a teeter-totter. You know what you want the site to do, or the functional requirements. The website technical requirements document describes how it will do it.
In many situations, developers can use existing code to deliver a specific function. This will cost less than having to build a custom solution. But the existing code will have a predetermined structure or set of screens that it uses.
If the design follows what the code does, then there’s no problem. But if the design doesn’t follow what the code does, then the website will need a custom solution. This is another area where we often see budget overruns.
Knowing how the website will function before design starts will keep you from overspending your budget.
Whenever the website needs to connect to a third party, you will have a third-party integration. These can be simple or complicated. For example, integrating a form with a common email platform is simple. However, it’s more complicated to integrate a form with a marketing automation platform.
Planning for third-party integrations keeps the project in scope. If you know your integration requirements, you can budget for them. Needing to build third-party integrations after the fact will hurt your budget.
Documenting functional and technical requirements goes a long way in determining the build budget. The requirements are what drive the majority of the work effort and therefore the cost. If you have a budget, then use the requirements document to predict if you will be under or over budget. With this approach, you can lay the foundation before the design starts.
If you are over budget, it’s time to invoke the first HGTV principle: “You can’t afford that. Either you need to drop something, or you need to find more budget.” And don’t forget the second Home & Garden Television principle: There’s always something bad under the floorboards. Make sure to budget for surprises as well.
Determine the Architecture of Your Website
Next, consider the site architecture, or site map. This will be the navigation that users use to find what they need.
Remember the five-second rule. You have five seconds to do three things:
- Show users they are in the right place
- Give them a good reason to stay
- Make it clear what they should do next
That’s a lot of things to do in a short period of time, and five seconds is probably a generous estimate.
The most important rule of thumb is to keep the main navigation to four or fewer choices. Put the rest in the secondary navigation.
How Do You Know What Goes Where?
Use Google Analytics to determine what users want. Put the high-value information no more than one click away from the home page. But keep things in balance. Understanding users’ needs is important, but so are the needs of the business. Make decisions in the context of the website’s goal.
Also, look at the analysis for both desktop and mobile users. Their needs may be different, which will affect what content will appear in each medium.
We use a form for this. In the left column, we list all the pages in the site and we include the permalink. In the right column, we describe, in detail, the content and functional requirements that will make up the page.
Website Layout with Wireframes
Now it’s time to map out the site. For this, we create wireframes. These are simple sketches of each page in the site. They show how the site will be organized and how the content will appear on the pages.
Prepare wires for both desktop and mobile. Consider whether the site will be responsive or adaptive. Are your mobile users happy with the same content as desktop users? If they are, that’s great. But if they aren’t, don’t frustrate them. Use wires to map out these decisions.
The wires will also show how the functional and technical requirements will integrate. For example, what happens when you click an image? Will the site display content from elsewhere on the page? Will it show the first X characters or will it present a predetermined excerpt? How will the flow or screens generated by the code appear? These questions should be answered in your wireframes.
The wireframes are the architectural drawings for your site. They show the designers where the walls are and where the plumbing and electrical goes. Wireframes are not the design, but they do guide the design process.
Conclusion – Website Redesign Project Plan
Whew! That’s a lot of planning and a lot of things to do. But consider for a moment what the alternative is. If you aren’t planning, your website redesign project won’t be as successful as it could be.
Get a few people to help with the planning, bringing others in as needed. This way you can make decisions in the context of requirements and budget, instead of unleashing expensive designers and developers who don’t understand what you need. And “design” is subjective. Opinions abound. Does it make sense to decide how the website will look and function in the swirl of subjective, often emotional opinions?
Without planning, the expensive design and development process is iterative, which makes it expensive. And you are more likely to add things in the middle, or worse, the end, which gets crazy expensive.
The first step in your project plan, planning, is a lot of work upfront, but it will make the next steps more efficient. Planning leads to a well-defined scope and a website redesign project without cost overruns. You wouldn’t build your house by trial and error, so don’t do it with your website. Having a Project plan for your website redesign is a much better way to go.