In a previous edition of this newsletter, we talked about auditing your own website. An audit helps you find areas of strengths and weaknesses, parts of your site that work and part that need fixing. Website audits are great for increasing the effectiveness of your website.
But what you if you find that the whole site needs an overhaul? Maybe the brand has changed, or the site is so old it just doesn’t look good anymore? It’s possible the site needs a redesign.
Redesigns can be scary. How do you know you’re making good choices? How do you make changes that won’t ruin what the site already does well?
First, make sure you do take the time to do a proper audit. This will make many of your tasks crystal clear. Once you have the audit complete, you can begin planning the redesign itself.
Pro-tip: Make sure you use a staging site!
If your site isn’t getting any traffic, you’re probably fine to throw up a Coming Soon page and begin making changes. But usually it’s a smarter idea to use a staging site. A staging site is a temporary environment in which you can build designs, test software, and make updates without affecting your live site. (I’ve got a course on LinkedIn Learning all about staging sites!)
You can make a copy of your current site for a staging site, or you can start from scratch. Either way, when you’re happy with the staging site, you can push that site onto your live environment. Making this new version the version that your users see and interact with.
Another pro-tip: Make good use of the gold site!
Before you even begin the redesign, gather information and data about the old site. Log performance and speed metrics as early as you can and up until launch day. Make note of all your traffic and SEO details. Take screenshots of the site on mobile and web devices. Write down somewhere information about your conversions or sales and create new goals for how much better you want the new site to do. It’s impossible to know if you’ve made an improvement unless you have something to compare to.
Okay, let’s go back. You have your staging site ready to go. Where do you start?
Identify the Key Concepts
I believe good design – especially design that is used in marketing – is about communication. The client, any client, wants to communicate something to visitors. Something that will make them think, “Wow, I really do need this product/service!”
Determine the things you want to communicate to visitors about yourself and your business. It’s possible that your old site did communicate some of these things, but not all of them. These can be adjectives or full phrases, such as:
- High-end
- Customizable
- Amazing customer service
- Attention to detail
- Creative out of the box thinking
Your top 5 main ideas that you want your visitors to walk away with will structure all your decisions afterwards. There are probably tons more important details, but those will come later. Spend the time tot ask yourself what the 5 key concepts are that your website should focus on.
Where do you find these key concepts?
If we’re looking at the previous examples, you might think of them this way:
- The design doesn’t feel high-end. It looked like something anyone could put together and the colors, fonts, and shapes did not have that high-end, luxury feel.
- It didn’t scream “customizable” because the photos that were chosen are not distinct and unique.
- If the headings and colors are cold, distant, and impersonal… that doesn’t effectively communicate the idea of impeccable customer service.
- The attention to detail should be reflected in the design, but it can’t be if details such as spacing and sizing are all over the place.
- And last, if the business is creative, the design should be too. It shouldn’t look like something you would find in a template.
With these ideas being clear in your mind, you can find a way to piece together a new design and layout. A redesign project isn’t just about providing a good design but directly addressing the areas in which the previous design fell short.
Content
One big fear for a redesign is hurting previous content marketing or SEO work that has already been done. Chances are, yes these values will take a bit of a hit when you launch a new site with a new layout and new content. But ideally, the long-term results are worth it.
Here are a few ways you can organize and plan your content changes strategically.
- Map out the original site structure in a site map.
- Pair new pages you plan to create with old ones.
- If you are removing old pages without replacements, create redirects.
- Make use of canonical links in order to avoid duplicate or confusing content.
- Pay attention to what made certain pages rank well. When possible, maintain internal and external links, meta titles and descriptions, page titles and slugs.
You want Google to see that yes, there is new content on this site and some of the old content is gone. But tell Google intentionally that the new content is related to the old, and the removed content is replaced in a way that won’t confuse visitors.
The Wireframe
A redesign isn’t just about aesthetics, but about organization, too. The way your site is laid out in terms of it’s page and posts makes a difference. An audit might tell you that some of your pages are not helping conversions, or that some important pages are hard to find.
Before thinking about colors, fonts, and images… create a plain wireframe that tells you how the site will be laid out. Page by page, section by section.
Make a list of all the pages you have on your site. You probably have a homepage, an about page, and services or product pages. Maybe you even have a blog. Evaluate each page and create a game plan. Does it need to:
- Stay where it is
- Move up in order of visibility
- Move down in order of visibility
- Be nested or associated with another page
- Be combined with another page
- Be removed altogether
On each page, consider it’s most important sections. For example, the above-the-hold area on each page should be useful, informative, and on-brand for the feel you want.
For example, when I think of walking into a high-end or luxury storefront, I would expect someone to greet me and cater to my needs as soon as I arrive. Leaving the visitor to fend for themselves as they enter the site was contradictory to that idea. So adding a warm greeting above the fold that also communicates what the company actually does, along with some relevant imagery, can make a huge difference.
There should always be balance between text and imagery. You don’t want the copy to overtake the images, but you don’t want it to get lost either. Most people tend to skim website copy and won’t read everything word for word. The sections should to be small enough, yet compelling enough to be interesting and answer every single question someone may have.
It is always imperative to have strategically designed and placed CTAs (calls-to-action) I like using them at the bottom of every single page that gently but clearly ushers the visitor into taking some kind of action. Your CTA may be in the header and always visible. Either way, when conducting a redesign, evaluate what kinds of conversions you already get on that page and what improvements you can make to bring that conversion point to the forefront.
Overall with the wireframe, consider your 5 key factors. Is the page organization and content layout complementary to these ideas?
I use Wireframe.cc to build my website wireframes- an awesome website that lets you build and save wireframes in any screen size. I love this tool because it’s intuitive and allows you to easily share wireframes with clients.
The Branding
Now that you have a strong baseline for the layout, you can look at imagery and color to design a basic branding board. You don’t have to be a pro graphic designer or brand designer to follow common sense and best practices around design.
Maybe your original design didn’t use a consistent color scheme. Or maybe the colors just don’t communicate what you want the site to say. Everything – from links to headers to backgrounds – should have a color that is chosen that way on purpose. For example, I try to never make links and buttons the same color as anything else. That way they always stand out and are easy to find. The visitor needs to see clickable things and know, 100% that they are there to be clicked on.
When considering font or typeface, go for readable and legible over fun and funky. While you want to avoid super basic fonts like Arial and Times New Roman, it’s not worth it to choose a fun pretty font that no one can properly read. It’s important to find a balance.
Establish a color scheme that would help direct the visitor’s attention the way you want to, while also providing the tone and emotion you want to. It helps enormously to look at the sites of similar companies or competitors to see what colors are common.
Don’t be afraid to change your mind. Bring all the colors and fonts and shapes together in one document to make sure they look good. While this is a very helpful step, sometimes when you add those elements to a website, they don’t really work how you thought. Be patient and willing to go back to the drawing board if you have to.
The Mockups
The mockups are your chance to really hone in on how to make stronger choices than those implemented in the previous design. Compare the new mockups to the old site and ask yourself if your new choices are stronger. Examples of stronger vs. weaker choices might be:
- Varying color vs. one color throughout
- Shadows on images vs. flat images
- Full-width images vs. smaller ones
- One color reserved for buttons vs. white buttons
- Varying fonts vs. identical fonts
When looking at layouts, observe how the content is laid out. Does it guide the visitor through the site, answering their questions, and pointing them toward solutions? Do you make use of negative space to draw the eye toward important information? Are sections and spacing consistent throughout? All of these things matter for a professional-looking design.
The Launch
Before launching, take as much time as possible to test the site. Make sure links and forms work, test ecommerce functionality, and test redirect links. It’s a good idea to have some controlled user testing as well to make sure that objective users will react to the new design the way you hoped.
Plan for time to address potential issues. When launching a redesign, things may go wrong. Some pages may not transfer properly. Images or links may break. Make sure the necessary people are on hand to jump in and help.
Promote your redesign! Communicate ahead of time that it’s coming to your audience. Get them excited and interested to see what kinds of new content or products or services will be available on the new site. Once it’s up and you’re confident, invite everyone to come visit!
Did I forget anything? What are some of your essential steps for conducting a redesign? Let me know in a comment!
