Website Redesign: 4 Steps To A More Attractive And Effective Website

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.

Agaudal Travel website
Before (L) and After (R). You can see from this Ninja Website Redesign that a professional site can completely elevate first impressions of the business.

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?

Plumbing Care Services website
A Plumbing Website Redesign. Notice how the call to action 'Get a Free Quote' is the most important element on the page

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:

tiered menu example
Notice how this menu offers easy category choices (1) then uses headers (2) in the drop down menu to guide the visitor to the right product category (3)

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.

Need Some Help With A Website Redesign?

Wow….just wow! I really can’t tell you how much I love the site, such a fantastic design and the more I see it the more I get excited – it is just ace and I appreciate so much all your hard work – the pages are looking so great! Really, I can’t praise you guys enough – you are awesome!

Sally Bennett, Agoudal Travel

I’m loving the look of the site, you really have made this an easy process for me throughout and you have so far delivered on every single point you promised – an outstanding customer experience overall.

Paul Cunningham, Plumbing Care Services

Request a Free No-Obligation Website Consultation

Tell us about your website project and we’ll be in touch to arrange a time to discuss your goals and how we can help.

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)

BeauSynergy website
Before (Left) and After (Right) a conversion focussed redesign

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.

Some Example Exposure Ninja Website Redesigns

Davis Associates website
Notice how in this B2B redesign we have emphasised the experience and credibility of the consultants by featuring them more prominently on the homepage. We've also added a CTA on every page, targeted at the service mentioned on that page.
Display Centre website
In this Before (L) and After (R) you can see how we've uncluttered the screen, making the layout responsive (thus improving mobile user metrics). In the first week, the redesign resulted in a decrease in bounce rate (from 54% to 32%) and an increase in time on page by 25%.

The Difference Between Website Design And Website Development

If you are planning to get some help with design or development of your new site, please consider that the skillset and talents of the designer and the developer are completely different. If someone claims to be able to do both design (the picture of the site) and development (coding it into a finished site), they are likely more suited to one or the other area. Here’s a quick Sunday morning video I filmed talking about this important difference:

Need Some Help With A Website Redesign?

Wow….just wow! I really can’t tell you how much I love the site, such a fantastic design and the more I see it the more I get excited – it is just ace and I appreciate so much all your hard work – the pages are looking so great! Really, I can’t praise you guys enough – you are awesome!

Sally Bennett, Agoudal Travel

I’m loving the look of the site, you really have made this an easy process for me throughout and you have so far delivered on every single point you promised – an outstanding customer experience overall.

Paul Cunningham, Plumbing Care Services

Request a Free No-Obligation Website Consultation

Tell us about your website project and we’ll be in touch to arrange a time to discuss your goals and how we can help.


About the Author

Tim is Head Ninja at Exposure Ninja and Europe's bestselling online marketing author.When he's not Ninja-ing he's playing in his band, going to the gym with his wife or fixing the destruction caused by their three fur babies, Ninja, Samurai and Shinobi.