Website Re-design – A Case Study

This Website Re-design article outlines our approach to website redesign. We have chosen olivianewton-john.com for 2 reasons.

  1. Olivier is an Australian legend.
  2. Olivier has not been represented well at all with her current site.

As designers and developers, we are always on the lookout for inspiration. More often than not, inspiration comes from stumbling across websites that are good – or awesome even – in content but are let down severely design, functionality, user experience or performance. Worst still, it may suffer from all these ailments.

After watching a TV movie series on one of the world’s greatest singing talents – Olivia Newton-John I went to Wikipedia to read more about her life. From there, I clicked on a link to her website, and there it was. Another bolt of inspiration.

olivianewton-john.com has all the information you’d expect and on a desktop screen, it looks OK. I was looking at it on my mobile device however and well, it’s impossible to use.

Because we love Olivia Newton-John, we decided to have fun with her site with a website re-design concept. If you love what we end up with, share this page!

Right, Let’s Get Started.

Website Re-design – Six Considerations

So, before we get carried away and start designing colour schemes and elements, we need to evaluate where the project is at looking at the following 6 factors.

  1. Evaluation Determining what content and design elements on the page should be kept, updated or discarded.
  2. Goals Identification – Really thinking about what the end result needs to be in terms of looks and functionality.
  3. Strategy Creation – Outlining a plan for achieving the goals based on the result of the Goals Identification.
  4. Needs Assessment – Understanding what resources are required to complete the project.
  5. Implementation – Putting it all together and making magic happen. (The most fun a designer can have.)
  6. Review & Launch – There will be bugs. It is a fact of life when designing for the web. Now is the time to test, re-test then test some more.

01. Evaluation

Because there is no way of knowing metrics for performance in terms of page views, bounce rate, click-through rate etc, we have to rely on other tools. One of our favourite tools for assessing a website re-design strategy is HubSpot’s Website Grader

olivianewton-john.com graded by HubSpot’s Website Grader

Straight away it is clear to see that this website needs work – and plenty of it!

Our article Website Health Check explores each of the 4 sets of key metrics: Website Performance, Mobile Friendly, SEO (Search Engine Optimisation) and Website Security.

  1. So from our evaluation so far, we can see 4 key areas that desperately need re-working. But what about the overall look of the website? How do you take the aesthetics into account when embarking on a website re-design?

What Google Expects

In this day and age of the World Wide Web, certain features are required by Google in order to rank a page in the SERPs (Search Engine Results Page’s). Of course no one knows 100% for sure everything that Google expects to see in order that their algorithm can rank a given page, so we rely on those with better minds than ours to help us identify a pages shortcomings. Read more about Search Engine Optimisation.

In a typical Website Re-design project, we would have the client fill out a questionnaire that asks the right sort of questions to give us that insight. Obviously, for this project we don’t have that data. Instead, we will use our expertise and personal design preferences.

Website Evaluation Tools

Joost de Valk and his team at Yoast for example offer what is widely regarded as one of the most valuable and powerful SEO tools available. Google’s own Structured Data Testing Tool is invaluable for making sure structured data is implemented and working correctly and the Social Debug tool for testing Social Media implementation are tools we rely heavily on.

AMP

AMP – or Accelerated Mobile Pages is a project designed to get mobile devices using cellular networks (particularly slow networks like 2G & 3G) to load content almost instantaneously by stripping out ‘the fluff’ on a web page.

Web pages and ads published in the AMP open-source format load near instantly, giving users a smooth, more engaging experience on mobile and desktop.

– AMPproject.org

Designers Toolbox

Every designer and developer out there have their own set of preferred test tools and the ones i have mentioned here are but some of what we use, and there are so many more out there. The trick is to find and use tools that aid in getting the job done. The big risk can be the dreaded Analysis Paralysis – and that’s not good for anyone.

02. Goals Identification

Working out a comprehensive set of goals on this project is basically impossible without Olivia’s input and access to vital statistics such as Google Analytics and Google Webmaster Tools .

With an actual website re-design project, goals typically range from vague to specific. Over the years we have pretty much seen them all, but here are 5 of the most common – and probably the ones that make the most sense.

  1. “To rank better on Google”
  2. “Keep visitors on my site longer”
  3. “Get people to do an action like sign up to my newsletter”
  4. “Lower my Bounce Rate”
  5. “Make my site load faster”

BUT, The only goal we want to achieve on this website re-design project is visual looks and User Experience (also referred to as UX).

03. Strategy Creation

Competitor Analysis

A Strategy Creation Plan is simply a plan to put what we have learned so far in to action. Typically we would look at competitors websites and see what works, what doesn’t and what could. That is not to say we are looking at copying their website, that would both defeat the purpose of creating a New Version of you own site and, it’s basically illegal (the © – All Rights Reserved notice in the footer of their page).

Content Analysis

Next we look at your content requirements. What is on you site now that you need / want to keep, what can go and what needs to be created. This is a perfect opportunity to plan for your SEO strategy. Tweaking your current content or creating new content with SEO basics is a golden opportunity.

Images, Video & Other Media

Images account for the bulk of the World Wide Web content and, they are usually NOT optimised. This means that when they appear on a website page, that page tends to load slow. This has 2 major problems.

  1. The user experience is poor. No one is going to hang around to wait for your page to load beyond the 3 to 6 second range.
  2. Google, in terms of page performance, will not rank you as well as someone with a blistering page load time (under 3 seconds – less for mobile devices – read about AMP).

Consideration to what images, how many and whether they serve the greater good of the website re-design project needs serious thought. Images to fill a space is poor design because it means the re-design plan is flawed.

04. Needs Assessment

Before starting the implementation process, take stock of what resources you need to complete the project. This includes images (optimized of course), text, video (if required) and a time schedule.

Embarking on such a project without the require resources in place will slow down the entire project and also has the potential to make the project less than enjoyable. If this becomes the case, then really, what is the point?

05. Implementation

Implementation of the what has been learned is (for me personally) the most fun I could have – outside heli-skiing off the side of Mount Everest that is. It is at this stage our team use their individual skills and talents to bring the project together.

06. Review & Launch

The final stage in the website re-design process is reviewing the work done by testing in a live environment before going live for the world to see. It is inevitable that bugs and mistakes will arise in a live environment. This is mostly due to the slight differences in rendering between a local server and a live server. The other reason can be due to lack of coffee.

website re-design

 

Conclusion

This is essentially how Benchmark Web Design go about redesigning a website. Each redesign project throws up it’s own challenges, both technically and working with what the client’s expectations.

Disclaimer: This project is purely for fun and to demonstrate the website re-design process. Benchmark Web Design is not being paid in any way for this project. The opinions and ideas are solely Benchmark Web Design’s.

 

Leave a Reply

Close Menu