Your website is the core of your online presence. It’s the first thing a client sees when they interact with your brand online. Consequently, it should reflect and elevate what your business has to offer.
Suppose your website hasn’t changed in a few years, or you’re shifting to a new business direction. In that case, you are probably thinking about undergoing a website redesign to reflect your new strategy.
But before you do any work on your site, you need to have a plan in place as a website redesign process can be tricky, expensive, and time-consuming.
The most common complaints we get are that website redesign projects often finish later rather than on schedule, are filled with technical surprises and challenges, and face scope creep.
With over a decade of building and designing websites, we have learned and developed a full-proof website redesign strategy that prevents you from falling into common pitfalls.
For this article, we asked Anastasios Mantas, our Creative & UX Director, to share what should go into your website redesign strategy. Take a look at the steps we mention below.
Steps of website redesign strategy
- Understand and define what success looks like
- Benchmark yourself against the best in class
- Align your business with the design team
- Perform a complete audit of your current website
- Define a proper information architecture (sitemap)
- Create a wireframe
- Start the new design of your website
- Develop and test
- Launch
1. Understand and define what success looks like
Your website is there for a reason. That reason is different for every business. Some want to convert their users on their free trial, some want to establish brand recognition, some want to generate more sales, while others want to increase leads.
Since a redesign requires a significant investment of time and resources, you need to ask yourself, ‘’why do I want to redesign my website?’’. Without a clear goal, it’s also difficult for your designer to create a website in a way you consider successful.
You want to be sure that the results you’ll get after going through this redesign will improve your previous situation in a quantifiable way.
2. Benchmark yourself against the best in class
Now that you know why you want to redesign your website, you need to benchmark your goal. Look for the best in class in that market.
For example, if a client approaches us and says he wants to gain brand recognition with his new website, we will benchmark him against a brand that has excelled in brand recognition.
We would take the main elements such as his home page, product pages, features, checkout process, promotions, etc., and compare those to a best-in-class brand. Usually, we suggest benchmarking your business against 6 to 8 other brands.
Doing so allows you to have a good idea of where your current website stands and where you can improve upon it through your redesign.
3. Align your business with the design team
At this stage, it’s essential to get all the key stakeholders of your business involved in the website redesign process. We call this our exploration approach. It’s where we brainstorm and get discussions started between your stakeholders and a team of UX designers, business analysts, tech leads, project managers, and strategists.
We ask questions, we gather information, we go back and forth with you to push you to think further ahead and think not only about your business needs but also your users’ needs.
Then, your needs are mapped out by a business analyst to scope out the features and translate those needs into tangible elements such as timeline, budget, hours needed, integrations, desired components, etc.
At the end of the exploration meetings, we regroup as a team to finalize the user experience on the website and deliverables. By now, you should have some ideas about the kind of work that will be performed, which will help lead to the next step.
4. Perform a complete audit of your current website
While a visually appealing website might be your goal, it’s important to understand that a redesign should be as much about functionality as it is about looks.
Your website redesign should also focus on improving performance, your online customer experience through your platform, and reaching specific business goals.
As Anastasios Mantas, our Creative & UX Director, often likes to say: “We sell results, not art. Clients don’t just want pretty pixels and images. They want the design to generate revenue.”
To know what to improve on your website, you need to collect data. Sometimes you might think that your website is not working well because of certain reasons like its design, technology, speed, or any other reasons. However, your assumptions can be far from the truth as you don’t always have the same pain points as your users. By gathering data, you’ll get a clear picture of the real situation.
There are many ways to gain this kind of insight. At the agency, we developed our own proven audit templates to analyze and better understand a client’s website’s performance and users’ behavior. When redesigning a new website, we do a performance audit, a UX/UI audit, and an SEO audit.
Performance audit
With a performance audit, we examine your website’s performance and analytics data.
We dive into indicators like how much traffic your website gets, how many pages are on your website, their bounce rate, whether you have broken links on your site, how new visitors compare to returning visitors, and so much more.
You can use free tools like Google Analytics and Lighthouse to understand your website’s performance.
UX/UI Audit
On a website, many elements require optimization. So how do you know what you should work on? That’s when a UX/UI audit comes in handy, as it helps you identify usability issues. It defines pain points users might face and helps you understand what makes users abandon their journey and leave.
Hotjar is a tool we use to perform UX/UI audits. It allows you to see how visitors behave on your website by visually representing their clicks, taps, and scrolling behavior through heatmaps.
Collecting data about your users helps you answer some fundamental questions: where on the page specifically are they having issues that lead to them bouncing? Why are they not converting? What are they interested in?
Tools like Hotjar gives you insights into where users click
SEO Audit
Nowadays, if you want to perform online, you need to maximize your SEO efforts. By completing an SEO audit, you see how your current site ranks and assess what you can do to improve it.
The discoverability of your website in search engines depends on a multitude of factors. It’s not just about keywords, but also about speed and how mobile-friendly and optimized for user intent your website is.
At the agency, we have a checklist of elements to verify and make sure they are optimized. Those elements can be alternative texts, HTML tags, website speed, broken links, irrelevant keywords, syntax queries, security, etc.
5. Define a proper information architecture (sitemap)
A website needs to be easy for users to navigate and allow them to find what they need without a lot of effort. The truth is, if users can’t find what they’re looking for, they’ll simply leave your website.
That’s why having a good information architecture (IA) is essential. IA aims to organize and structure the content for users to easily find what they need on your website. IA elements to be defined include elements such as level 1 navigation, category listings, product structures.
Here’s an example of a sitemap.
To create a good website structure with the right entry and exit points, you first need to define your buyer persona. IA puts user satisfaction as a priority, and by having the right personas in mind, you can build your customer journey.
For example, suppose you are a retailer of gardening goods and plants looking to grow its online channel. In that case, you might target four different types of personas: the experienced gardener, the urban gardener, the rookie gardener, and the green thumb gardener.
They won’t behave the same way on your website. You need to tailor your customer experience and strategy around your main buyer personas, the ones that matter the most to you.
Once a sitemap is complete, it can always evolve depending on new findings. Taking that same example of the gardening retailer (a real client case), they had different product categories such as garden accessories. At first, we were thinking of using this category as its own. However, looking into their analytics, we found that garden pots had a huge amount of traffic. So we’ve asked the question if we want to hide garden pots into garden accessories or make it a stand-alone.
The sitemap is the solid foundation of the website. Without a solid base, we can’t start the wireframing.
6. Create a wireframe
Now it’s where things get exciting with the wireframe. For the first time, you see a mockup of the page’s structure and layout and how the information and content get displayed on your new website. Here are two examples of a wireframe.
The client gets to test the shopping journey scenario that has been defined during the sitemap with the buyer persona in demo wireframes. At the agency, we record all of their actions and interactions to improve the shopping journey.
The number of scenarios will depend on what you defined as a goal in the first step. The reality is that you will have all types of shoppers that go into different shopping behaviors. One can be quick to purchase, one can be looking for discounts, one adding many items to a cart, and abandoning it to get a promo code in a few days. The more scenarios you have, the better it is to be more precise in your targeting with many personalized shopping experiences.
Also, wireframes are useful to showcase new features based on your requirements and budget. Let’s say a client needs a search feature on its website and considers either the default search feature against an external Magento search option. We will evaluate both search options for him and then showcase how it works via the wireframes.
When creating a wireframe, we suggest taking a mobile-first approach. Mobile web traffic accounts for 50,81% of global web traffic at the end of 2020. In line with that, experts expect mobile data traffic worldwide to increase five-fold by the end of 2024.
However, you need to evaluate your industry and audience behavior for mobile. If 90% of your users visit your website on their laptop, then a mobile-first approach might not be the best option.
The goal of doing a wireframe is to understand the different scenarios and functionalities of your website’s elements. It’s focused on user experience and conveys the overall direction, and description of the user interface closely tied to client personas.
7. Start the new design of your website
With the design phase, you are putting the wireframe into images. You define everything that will be included on your website.
The first step is to define the style guide from colors, fonts, sizes, what the CTA (Call to Action) button will look like, and so on. Once it’s done, you’ll get a general idea of what your website will look like.
Some changes might be made following the design preview. However, when everyone is set on the final design, it’s time to get hands-on. Designers make the website look what it should look like by applying all the visuals to it.
8. Develop and test
You are almost at the finish line of your website redesign process. At this stage, developers transform the design mockups into pages, functionalities, content management system elements, and more.
We favor an agile approach where development is divided into sprint demos. Working this way allows you to see how the website is coming together.
During the sprints, the stakeholders need to use the website to test it. It’s not unusual to have a disconnect between designers and developers. From when the website’s new design reaches development, developers may misunderstand the intention behind some elements and code it to look or function differently.
Also, QA (quality assurance) needs to be done to ensure everything on the website works as it’s supposed to. QA also ensures that your requirements set in the analysis phase are met during the development from integration, functionality to design testings.
The development phase is critical to your website’s success, so make sure to dedicate enough time and not rush this step.
9. Launch
You’re now ready for the go-live. However, once your new website is launched, you can’t just sit there and relax.
Over the next few days, you’ll need to do a final QA. Sometimes bugs, errors, broken links, and points of friction on the site come up. So, be alert to problems your end-users and those who use your site internally will notify you about.
When you launch your new redesigned website, the last important thing is to measure if the goals you’ve set in the first step are being met or need more work.
This will give you insights into how well your new site is performing against the previous version. From this, it’s all about embracing continuous iteration until your goals have been met or exceeded.
Conclusion
A website redesign project has a lot of moving parts to it. Whether you’re working with an agency or redesigning your site in-house, you must have the right website redesign strategy in place so that nothing is missed or overlooked.
The difference between a successful website redesign and a failed one is the planning, the expertise, the time, and having the right people.
Need help redesigning your website? Talk to us.