You’ve decided that you need a website redesign. You might have some reference sites that you like the look of, and you know some of the things that you want to include on the new website. What now?
In this post, we’ll walk you through the process that we take when redesigning a website to make sure that nothing is missed and the redesigned website is as effective as possible. We’ll also show you some examples of recent Ninja Builds for reference.
Step 1: Choose Your Goal
Most redesigns aim for one or more of the following goals:
- Improve the look and feel of the site
- Increase visitor engagement (i.e. keep people on the site for longer, make them click on more things while they are there)
- Increase conversion rate (the number of people that become a buyer or lead after visiting)
- Improve ranking
Feeling greedy because you want your new site to do all of these things? In this case, greed is good. A new site should be aiming to tick all four boxes.The layout should increase engagement and conversion rate. The design should improve the look and feel. The site structure, content and optimisation will influence the ranking. None of these goals are mutually exclusive, and all should be built around.
So rather than starting the process by just trying to find a theme that looks nice, firstly think about what the ultimate outcome of the process will be.
This can make future decisions easier, for example, the answer to the question “should we make this picture bigger?” is “only if it’s likely to help conversion, engagement, look and feel or ranking.”
Step 2: Wireframe A Layout
Before getting into things like colours, headlines, themes and images, take a step back and think about what your site needs to do. Make the most important thing the most important thing, so if your goal is generating leads from a contact form, it’s a good idea to put that contact form somewhere really visible.
You’ll notice in the plumbing website example below, we’ve placed a ‘Free Consultation’ contact form in the top right-hand corner of the page. This is intentional because this is the area that the eye is most drawn to. Amazon wouldn’t bury it’s Buy Now buttons at the bottom of the page (or, worse, on a separate page) so why should you?
The importance of thinking through layout can’t be overstated. Too often people rush into colours, logos and the frivolous things which have relatively little impact on the website’s success. Think of your website as a team member and judge it using the same criteria: ‘What have you done for me lately?’ rather than a brochure, ‘it’s just there for information’.
Here are some key Ninja layout principles:
Calls To Action (CTAs) are the most important thing
Those who ask, receive. Those who have weak CTAs, or bury them in the footer, spend their days roaming the wilderness of their empty pipeline.
Logos are like babies
To the business owner, the logo looks so beautiful because they know the struggle it took to choose the particular shade of green. The rest of the world glances over without a second thought. They are looking for reasons to stay, engage and buy, and no matter how pretty, your logo won’t make a single person do any of those things. So keep it small and give prominence to the stuff that matters
Use the ‘fold’ to your advantage
This is the area of the page that is visible without any need for scrolling. Think of it as the shop window or a Tinder profile picture: you want to show your best stuff to try and ‘hook’ your visitor. Hoping that lots of white space and a generic business statement will be enough to lure them in and get them clicking around is hopeful at best. We regularly hear a variation of “but if the visitor is really interested in buying, they’ll find my CTA in the footer”. This is like saying “anyone who really likes me will see past my personal hygiene and bad manners, so I don’t need to wash, get dressed or try to make conversation on a first date.” For every person that has enough desire to see through all of that stuff, there are dozens if not hundreds who would have given you a chance if you’d have made the effort and presented the ‘best’ you.
Menus should be clear and descriptively labelled
You are aiming for ‘brainless’ clicks that require little to no initiative from the clicker. Use the words your audience uses, and try not to give them more than 7 things to choose from at any one time. If you have more than 7 options, consider tiered drop-down menus to split up choices.
We like to design wireframes using something we developed called the Ninja Design Matrix. This is a proprietary collection of high-converting layout elements which we piece together into a website layout ready for the design. This ensures that whilst every website is unique, the same high-performance principles stay consistent for every build.
Get to the top of Google for free
Step 3: Collect Your Assets
Once you have your wireframe it’s time to start thinking about the design. Of course, you can always design first and plug your content and images into the design afterwards, but the danger is that your design then restricts the content. So if you have the choice, it’s best to be super organised and collect all of the text, images, colours and Calls to Action that you plan on using before starting the design.
A word on images: If you have only basic or amateur images for your site, consider getting professional photos taken or using high-quality stock images instead. The look of your photos has a significant impact on the overall look of your site, and rubbish quality photos will sell you shorter than a Monday night Elvis Presley tribute at the working men’s’ club.
Step 4: Design Time! (Finally)
Yes, only now do we start thinking about design. The design is not the start of the website building process, but really somewhere around the middle. Because you already have your wireframes, your content, and your goals in mind, all that remains is to turn it into something beautiful. Go for something that puts emphasis on the things you want to emphasise, and use colours and texture to bring out your call to action and other important elements.