The Secret with logo

6 Steps to a Fantastic Website Redesign

Websites and fashion have a lot in common. The design of your site will go out of “style” just as surely as fashions will change.

This is especially true for startups as they evolve their concepts and try to establish product market fit.

You can expect to go through several iterations of your site. The trick is to plan for this and make your site flexible enough to accommodate regular design updates.

My startup MondoPlayer is pivoting it’s business model and we are in the process of doing a website redesign with new graphics and new copy.

We will be deploying our new site in the next couple of months.  But you will get a sneak peek at our work in progress in this post.

Careful planning and some advance work will make the process of redesign more efficient.  And it will insure that you don’t bust your budget.

3 Tips for your Website ReDesign

  • Choose a powerful WordPress Theme for your Website

WordPress is hugely popular.  It powers a staggering 24% of websites including ours.

We use the X WordPress theme because it offers multiple unique designs that can be highly customized. It allows our developers and graphic designers the features they need for customization.  And it is simple enough for a user to update and maintain.

x Theme

 

X Theme is very economical at $64. It includes 4 completely different designs that can be fully customized, free extensions, free updates, lots of live demos to inspire you and awesome customer support. I can’t recommend it highly enough.

  • Make your Design Modular

The easiest way to understand modular design is to think of your web page in horizontal slices. Each slice is like a building block that can be swapped out or put in a different place on the page.

A modular design allows you to have interchangeable parts that can be assembled into pages. This gives you the flexibility you need to anticipate future changes and can save you from having to do a complete re-build of your site.

Here is an example of 3 slices of our new Home Page.

Home Page Slices

These slices could easily be assembled in a different order or used on another page.

If you would like to learn more about modular design check out this blog post.

  • Plan ahead for A/B Testing

It is important to design your site to allow for easy A/B testing. You will want to test alternative versions of marketing copy and different graphic elements to see how conversion rates are affected.

If your design has graphics with text overlaid on top, make sure that the image and text are treated as separate entities so the text can be edited without having to re-do the graphic.

If the graphic is saved with the text included in the image, the text will be “baked in”.  Any changes to the text will likely need to be made by your graphic designer. This is a budget busting move.  And it will rob you of the benefit of SEO.  Search engines do not index text that is part of an image.

When you design modules of your site make sure the design is flexible enough to accommodate different text formats. For instance,you may wish to test short paragraphs vs bullet points. Or you may wish to test smaller vs larger amounts of text.

You can save yourself a lot of grief by planning ahead for A/B testing.  Design your site in a modular fashion and make sure that all elements are designed to be easily edited.

To get started with A/B testing I recommend the Google Analytics tool called Content Experiment. This allows you to run simple A/B tests of your site for free.

Here is what the set up of a Content Experiment looks like.

Google Content Exp

If you want to learn more about how to do A/B testing using Content Experiments, check out this blog post.

Instructing your Graphic Designer

Most people meet with their designer and give them a nebulous description of their vision and what they want to achieve with their site. In my view, this is a dangerous way to proceed.

Your designer is not a mind reader. Expecting them to magically translate some airy fairy idea you have described to them is a road to ruin. And it will cost you big in terms of time and money. It will not produce an optimal result. And if you are not going to get an optimal result then why are you doing a website redesign?

Giving good, clear, actionable instructions to your designer is going to take some work. But I guarantee you that you will be happy you did this work when you see the results.

3 Steps to Giving Good Instructions to your Designer

  • Make a Mock up of your Site or Page

Doing a simple mock up of your site gives you the opportunity to plan your site and to see how it will flow. When I did my mock up I ended up re-organizing some of my modules to create a better flow.

Doing a mock up also allows you to see your copy in context. It became obvious to me where I needed more or less copy. I also realized that a diagram would be helpful to explain how my product worked.

Here are some tools you can use to create a mock up.

Canva –  This is one of my favourite free tools. I used it to create my modules and lay out my pages.  There are lots of free graphics and layouts. You can upload your own graphics or photos to use in your design. You can also easily create graphics for your site, blog or social media posts.  Canva offers stellar customer service and amazing instructional videos.

Microsoft Paint – I was keeping some modules on my existing site so I took a screen shot, pasted it into paint, cropped the shot to show the module and saved it as an image.  I imported the image into Canva to use in my mock up.

iStock – I found photos and icons to use in my mock up. I took a screen shot of the watermarked versions and used them in my mock up. If my designer likes any of these elements we can purchase them. At this stage I am using them only to communicate my vision.

Photoscape – This a good all purpose free photo editor. When you need to combine elements on a photo, resize it or manipulate it this is my go to tool.

  • Create a PDF of your Mock up

Canva allows you to download your design as either a PDF file or a graphics file. I have found that it is easier to give my designer a PDF file. My design is a rough guide only so they won’t be editing the image file.

If you are unable to do everything in Canva and you need to combine elements to create your mock up you can easily print the various pieces to PDF files. Then you can combine all the elements into one PDF that shows the complete flow of your page.

To do this I use a free tool called PDFill.  I use the Free Writer to print to a PDF file and the PDF Tools  to merge and organize the PDF file of my complete page.

Here is part of my mock up:

ProPage mock up

It’s not a thing of beauty but it gives my designer a representation of my vision.

My Designer can work their magic to bring it to life in an attractive way.

  • Explain your Vision

After you have sent your PDF file to your designer, you are ready to meet with your designer in person or on skype.

You should review your mock up with you designer in detail. Tell your designer what your goals are so they know what the important elements are on your page.

If it is a sales page and your copy needs to stand out then you should communicate this. Your designer can then create a design that emphasizes your copy and insures that it is clear and legible.

It is not unusual for over 50% of users to spend less than 5 seconds on a site, even if it is a sticky site.  That means that the top part of the page that is visible before you scroll down is valuable real estate.

The top of your page needs to convey your value proposition or your pain statement.  More than half of your visitors will never make it past this point.  So make it count. It needs to grab the attention of a visitor right away.

To encourage visitors to stay on your site for longer make sure that you communicate to your designer that the site must load quickly.  It must be easy to use and navigate.

Careful consideration must be given to the use of special effects or animation.  They can slow down your site and make it hard to navigate.  They should be used sparingly.

You should also make sure that your design is a responsive design. This means that it is optimized for phones and tablets.

Search engines are now downgrading sites that are not optimized for mobile so it is vital that your design work on desktop and mobile. Some elements work differently on mobile such as mouse over effects and some elements display differently. Your Designer must keep this in mind.

Once you have instructed your Designer you need to let them do their work. Your mock up should be a rough guide only. And you should be open to new concepts from your Designer.

Here is how my Designer re-imagined my mock up:

Pro Page Alexa

Why you should Follow my Advice

Next time you are doing a Website Redesign, I encourage you to try the steps I have outlined above. I have had great success using this method.

Here’s why you should try it:

  • it takes fewer iterations to reach a final design
  • there is less chance of missing an important component of your site
  • it saves time and money

Best of all you will end up with a top notch design.

Photo Credit: Ntr23

Supercharge your Content Marketing

Mv15 12 ways ads b

Improve your results up to 63%.

Make your content mobile friendly. Find out how to transform your content.

Actionable Tips, Tools and Resources.

Get MediaVidi’s Guide. Free.

We won't send you spam. Unsubscribe at any time. Powered by ConvertKit

Leave a Reply

You must be logged in to post a comment.