Case StudyWebsite Redesign

This Website Redesign Case Study explains the process of updating your old, tired and out of date website so it will live up to its full potential.

Case Study - The Subject

The subject for this case study is a website I came across recently. Sunshine Nut Wholesalers are a fantastic supplier of bulk nuts, oils, dried fruits and the like. In fact, I came across the site because my wife shops from it all the time, organising bulk orders for people on our local Facebook community board.

As is often the case, My wife and daughters are always showing me issues they have when shopping online. I get the whole “You’re a web designer, can’t you fix this site?” I wish I could fix every poor performing website out there but, well, I’m only human!

Daughter says...”You're a web designer, can't you fix this site?” Me...I wish I could fix every poor performing website out there but, well, I'm only human!

Why Redesign Gets Put Off

So many businesses put off a redesign of their website for one of three reasons:

  1. I don’t know where to start.
  2. I haven’t got time.
  3. It’s too expensive.

Obviously as a web designer I say these are not valid reasons, I say this because I know the facts behind the process. If my mechanic told me an engine rebuild was necessary, I’d probably react the same way because I don’t know the facts behind that process.

This is the main reason I decided to write this Website Redesign Case Study, to educate those that take the time to read this on the facts. So, with that, let’s get started.

When to Consider Redesign

There are a few things that tell us when a website redesign is something to consider.

The Basics

  • Does your site mobile friendly?
  • Is the important information visible above the fold?
  • Does you site load within 4 seconds from a mobile device?
  • Can site visitors find the information they want quickly?

Technical Reasons

There are other technical  factors to consider also that have an impact on how Google will rank your site. I have covered this aspect in my Website Health Check.

  • Size – What is the size of each page in KB)
  • Requests – How many page requests are being sent
  • Page Speed – How quickly  your page loads
  • Browser Caching
  • Compression
  • Render Blocking

SEO Reasons

SEO – or Search Engine Optimisation considers all the above in how Google will rank your site (or any given page within your site). But there is more to consider. Much more. Google now can easily decide, based on the content of a page, the intent of your content.

This basically means that a visitor to your site is looking for 1 of 3 scenarios called Do – Know – Go.

  • If a visitor is looking for a specific thing such as buying a specific product, then they are using the Do Intent.
  • Perhaps that visitor is looking for information about services or products that you happen to offer, then they are using the Know Intent.
  • Maybe they are looking for directions or a supplier close to their proximity. Then they are using the Go Intent.

And Google is plenty smart enough to understand all of this. It means that the content on your website must reflect the intent clearly.

The Penalty for Poor Intent

The main penalty for poor content on your website is the dreaded Bounce Rate. Bounce Rate is a metric used by Google that measures how often a user leaves your website page without clicking through to other pages.

This could be for 2 reasons.

  1. They found what they were looking for on that page so there was no need to go any further.
  2. Or they couldn’t find what they were looking for, so they left.

Either way, Google will count this as a bounce which is a strong indicator that intent was not what the user was after. The key is to make sure the content has a specific intent in mind. This will mean that a user will only click on your link in Google if it is obvious what the intent is.

How to Provide the Correct Intent

The 2 easiest ways are making sure that:

  1. The Page Title is reflective of the content,
  2. And the Description backs this up.

Let’s look at the Sunshine Nut Wholesaler’s snippet on Google.

  • Page. The Page Title is clear and concise.
  • The URL is clean and easy to remember.
  • And Description is clear about the content of the page BUT, it is too long. The description length should be between 150-160 characters long. *This does seem to change from time to time just to keep us on our toes.

So far so good!

A Big Case Study “But”...

But, let’s have a look when we do a search for sunshine nut wholesalers oil, because it is my intent to find information about purchasing bulk oil.

  • Page Title is NOT clear. It would appear the Page Title is simple the Site Title. This is bad.
  • URL is NOT clean or easy to remember. This can easily be addressed.
  • Description doesn’t reflect at all what I was searching for.

As a user searching for a specific intent – information on buying bulk oil – I would be unlikely to click on this Google result.

If in fact, If did click on the result, there is a high chance that I will just leave the page because the content doesn’t meet my intent and Google with count that as a Bounce.

Case Study - Design

So far, we have looked at the user intent aspect of a website, how impacts the performance of a website with a search engine like Google and to decide whether a redesign is necessary.

In this section of the Case Study, we will look at the design aspect and how it impacts the user, the site owner and the Google search results.

Design, For the Sake of Everyone

Humans are by nature, stimulated by visuals. The more attractive something, the more we pay attention to it. Obviously, this doesn’t apply to visually impaired persons but, there are important factors to help the like understand what is going on within a website. More in that soon.

The aspect of design, how things look on screen, falls under the discipline of User Experience (or UX). This is where a website and all it’s pages are created to look as attractive as possible in order to keep the visitor on your site longer.

One of the reasons I chose Sunshine Nut Wholesalers for this case study was that there website is probably the worst I’ve seen. Also because my wife uses it and I can’t stand the expletives!

Disclaimer: I am in no way trying to belittle, cause harm to the business or the owners or any such malice. I am trying to show how relatively easy and painless a website redesign can be.

What Makes Good Design Case Study ?

Beauty is in the eye of the beholder, apparently. What Margaret Wolfe Hungerford was saying in essence was beauty is subjective. However, there are certain rules that apply in web design that have been proven time and time again.

The desktop version home page of Sunshine Nut Wholesalers is a little uninspiring to say the least.

And the mobile version is about as bad as bad can be. To the left of the red line is what you actually see. To the right of the red line is available to the user if they swipe to the right.

Keeping in mind that this is the Home Page and most likely the entry point to the website. The website needs to show off the businesses image now!

Keys to Good Design

As I mentioned before, there are tried and tested aspects to what makes up a good design for a website. At this stage, I am talking about layout for functionality. I’ll get to colour schemes and graphics shortly.

Above The Fold

When I talk about Above The Fold, I am talking about the content that is seen on the scree without scrolling. Obviously the fold is in a different place depending on what device you are using.

Any professional web designer in this day and age understands that one must design for mobile first. This is for the obvious reason that more and more people are using mobile devices. It is also a fact that starting design for the smallest screen and working up to the largest only make sense.

Case Study - Mobile Design

There are 4 elements that MUST be above the fold:

  1. Branding. The business logo.
  2. Usable Navigation.
  3. Breadcrumbs.
  4. Content (sometimes called copy) that tells the user straight away what the page is about.

And 3 optional elements:

  1. Phone Number
  2. Email Address
  3. Social Media

Branding

The logo must be prevalent and appropriate to the design. The logo must also be in two formats, one for standard screens and one for devices with retina screens. This stops the image from looking blurry.

Case Study - Usable Navigation

Standard navigation is fine on a laptop or desktop computer but hopeless on a mobile device. Appropriate navigation must be used such as a drop down or off canvas menu.

Breadcrumbs Case Study

Breadcrumbs are links showing you where you came from and give you the ability go go back with ease.

Content

In most cases, the site visitor is looking for information so it only makes sense to off it up as soon as possible for fear they may just leave.

Phone, Email and Social Media

These elements are always useful but not as important – in most cases. There are clear exceptions however. If the intent of someone is to find the phone number of a business they already know about, the a phone number is highly important!

Case Study - Let's Start The Design Process

At this stage, I will use all that I have spoken about to create a good looking and functional website that with suite the requirements of Google, the business and hopefully, the intent of the user.

I will point out however, I will do this without changing the logo design or the basic page content. I will be showing how simple it can be to do a redesign.

Elements To Keep

Sunshine Nut Wholesalers have enough information that a visitor might be looking for, it’s just a mess. There defiantly is not enough content on the page, this makes it hard for Google to decide what value a reader will get. This in turn will lower the chances of being ranked.

Having said that, for the purpose of this project I’m not going to add more content. Instead i will look at hoe to better present the available content.

Disclaimer: The resulting Case Study – redesign isn’t necessarily the greatest looking website in the world but it serves to demonstrate that a redesign can be worth while, relatively simple and fun.

For the desktop, there is plenty of “real estate” to work with. This means the use of white space sets off elements such as text.

Because this is an eCommerce site, a customer login button needs to be easy to find Navigation is clear and unmistakable and includes a cart summary and search function.

Everything in the image shows above the fold for a standard 1200px laptop and desktop.

With a smaller screen such as a smart phone, “real estate” is less so the key is to use the same space twice.

This means that the Navigation, for example is what is called Off Canvas. This means the Navigation Links, Cart Summary and Search Function are all hidden until the Hamburger Icon is tapped.

Branding – arguably the most important element –  is front and centre but more importantly, the name of the site and the main text explaining what the page is about is above the fold and the rest is available as you scroll down.

The left image shows everything above the fold. The right image shows the mobile menu open.

Before And After

The resulting Case Study – redesign offers the user a clear picture of what the page is about, as does Google. The user will find themselves enjoying the experience – even if they are not consciously aware of the fact.

Laptop and Desktop Before

After

As discussed earlier, the original version has more than it’s fair share of issues. My version with the Above The Fold view and the Menu Open view show a vastly better user experience.

Before

After

With Menu Open

If you think I can help let me know!

Kevin Oliver Web Design is all about helping those with online ambitions and am extremely well aware that ideas are hard to share sometimes. You can be rest assured we will never, ever share your ideas with anyone.

Find out everything you need to know about creating a new website for your business in a most cost effective way.

Is your website converting to sales? Are users getting what they are looking for? Is it time to redesign?

Crazy fast, hacker free security and affordable dedicated web hosting. You won’t find better.

My Website Health Check test is specifically for those that already have a website and would like to know how it is performing using 4 sets of key metrics.

The Website Planning Guide is aimed at helping those who want or need a new website but have no idea where or how to start.