A Webpage Makeover is one of the services that I offer as a freelance interaction designer that delivers three concept designs of a single chosen webpage.
- Makeover one focuses on quick wins that can be made by applying best practice conventions while keeping development effort to a minimum.
- Makeover two looks at what is possible when content and functionality can be added or removed to the page.
- Makeover three is a blue sky ideation concept which may take extra effort to develop, but is likely to have the strongest positive impact on the webpage’s performance.
As a case study, I’ve just done a mini Webpage Makeover for the Les Mills homepage. It’s a ‘mini makeover’ because instead of doing the three total concepts only the first – quick wins with best practice conventions has been included.
You can download the full case study for the Les Mills Homepage Makeover here (PDF 1.7 MB) or click through for a quick summary and screenshots…
Current Homepage
Here is the current Les Mills New Zealand homepage, as captured 14th June 2009:
Structurally, it’s a very simple design. There is a header and footer navigation, a main hero promotional area, and areas for 5 smaller promotions. But there are some immediate areas that I see for improvement:
Too much noise
There are 6 promotions in total all calling for attention. Just like if there were six people all asking for your attention at once, it’s difficult to focus on a single message with so much happening at once.
All attention
$1 a day is certainly an attention grabbing message, but there is no follow up. To increase the chance of conversion, as well as gaining attention, interest must also be maintained long enough for desire to form, and people to eventually make an action.
No interest or desire
When people join a gym it’s not because they are actively wanting to spend money. It’s because they have a goal in mind. Some valid fitness related goals might be to build strength, loose weight, and to increase energy, but these goals, or other goals are not hinted at anywhere on this webpage.
No affordance in call to action
Any of the six promotions can be clicked to load another page, but there are no obvious affordances to show that these elements are in fact links.
Opportunities with makeover
There are opportunities here to decrease the bounce rate on this page, and in increasing organic referrals from search engines.
Makeover 1 – Quick Wins and Best Practices
Keep in mind the constraints of the first makeover – focusing on quick wins that can be made by applying best practice conventions while keeping development effort to a minimum. To help keep development effort at a minimum the following constraints are applied:
- no new functionality is added to this page, and content is only added if it’s omission is considered a breach of best practice and will not be difficult to source;
- changes that would globally affect the rest of the site (for example changes to the website navigation structure or the viewport width) are not changed.
Here is a screen shot of the redesign:
Changes to the Banner/Navigation area
- The ‘Paint splatter’ device moved from the banner to be the page background. In the banner it makes the navigation labels too difficult to read.
- More descriptive tag lines are used – “Unleash yourself” is expanded to Unleash yourself at Les Mills centers New Zealand wide, and “Experience Les Mills gyms online” switches to feature 4 key benefits of fitness – Build strength, Loose weight, etc.
- Club info and Contact info have a small label change and are moved to the top right of the banner – a convention of were contact details are often located on a webpage.
Changes to the Hero promotion
- Give the hero promotion prominence by visually separating it from the other promotions and placing at the top of the page.
- Give a more assertive call to action by starting the promotion with the action phrase “Join Les Mills today” and giving the call to action by displaying as a button that has more obvious affordances that it can be clicked.
Changes to body content
- Increase interest and desire by describing the benefits of joining Les Mills – explain the unique approach that Les Mills takes as well as how Les Mills can help with some common goals (Build strength, Loose weight etc).
- Structure and give context to the remaining promotions by explaining in more detail what they are. In this example headings are entered and content is provided introducing promotions for team training, personal training and careers.
- Promotions are given a common treatment of always including a call to action that has obvious affordances that show the button can be clicked.
You can download the case study for printing (PDF 1.7 MB) and you can find out more about the Webpage Makever service that I offer.
But most of all – I’d love to hear your feedback – please add a comment and share your thoughts!
Tags: case study, homepage, webpage makeover
