We’ve redesigned our home page

0 comments
Profile picture of Paul

Posted 30 August 2013 18:12

by

You may have noticed that we have totally changed the design of our home page – again. I say ‘again’ because it has actually gone through many iterations over the past 7 years, this just happens to have been a major redesign.

I blogged about our last major redesign last November. Since then, the home page has looked like this:

GetMeCooking original home page design.

Its design was split into two halves - top and bottom. The top half explained four of the core features of the site and the bottom half displayed the latest content (recipes, articles and blog posts).

The elements were

Title

  • Food to your personal taste

We wanted this title to give visitors an instant indication of what the website was there for. We probably should have replaced the word ‘Food’ with ‘Recipes’. It was a little ambiguous without the tagline, which was immediate below it.

Tagline

  • GetMeCooking lets you find recipes online, Based on your personal food profile

We think this would give visitors a clear indication of what the site was about. They wouldn’t immediately know what a personal food profile was, but we think that most people would guess that it is some sort of profile based on a questionnaire. The tagline was split onto two lines, to help make the visitor think about the statement in two halves.

User Features

  • View your recipe box
  • View your profile

Registered users would be shown a link to their recipe box and their user profile. These was really here to help encourage engagement with registered users – i.e. we want user’s to personalise the site, to make it more relevant for them

Description of site features

We intentionally used the minimum number of words possible for the description of the features. This was to:

  • Improve readability
  • Make the page look nice – too much text puts people off, plus the more text you have, the more limited your design can be
  • Keep the text concise – to avoid waffle and to prevent ‘information overload’ for the visitors

Latest recipes, articles and blog posts

The aim of these lists were to:

  • Aid Search Engine Optimisation (SEO)
  • Encourage new visitors to see that the site had fresh content – and to encourage them to navigate around the site
  • Show regular users that content had been updated

We were going to make the recipe images larger, but hadn’t had time to do it (a couple of months before this screenshot, the text was to the right of the images – and it looked okay with that size image).

Review

We knew that this design wasn’t great because there was still too much text and too much going on. We wanted visitors to see the home page and understand what the site is about within 5 seconds and we felt that this didn’t provide that ‘5 second’ realisation process.

Second design

Then one day, I got a sudden wave of inspiration to redesign the home page, with a design which I thought would better describe the purpose of the site with a ‘5 second realisation’.

I wanted to strip away all of the ‘unnecessary’ elements and promote the 3 core features of the site, which were:

  • There are thousands of recipes on the website
  • All recipes are good quality, as they are added by food bloggers, via our recipe plugin for WordPress
  • Users can enter their allergy, intolerance and dietary requirements, in order to get personalised results

With the idea in my head, I sketched it on paper, then on Cacoo and then proceeded to turn it into a working web page.

Wireframe (using Cacoo)

GetMeCooking home page second design - Cacoo.

Draft page

GetMeCooking home page second design.

The elements we had removed from the original design were

Tagline

We wanted a tagline and maybe we would have added it after some editing, but at the time, we couldn’t see how to effectively add it to the page. Plus we didn’t know if it added any real value, or would have acted as a distraction.

User Features

Although we like to point out features which registered users would find useful, we decided that we didn’t want to be too intrusive either. e.g. car’s don’t have a big arrow to tell drivers how to turn on the headlights. Plus these items were already in the black bar at the top of the screen anyway.

Description of site features

This was far too much text. So we replaced the text with visual cues and defined, proposed actions.

Latest recipes, articles and blog posts

Most people visiting the site probably aren’t interested in all this. Those who are, would seek it out anyway.

The elements we kept or added were:

Title

We have thousands of great recipes

This described the core focus of the site – and we do have thousands of great recipes, but this is a bit of an ambiguous statement because the word ‘great’ isn’t specific, it doesn’t mean much.

Find Recipes Now

This image would have been replaced with a better image – possibly a collage or recipes, or a random image of a recipe.

WordPress Section

We really wanted to show that the recipes came from food bloggers, because we think that this helps promote quality and trust. It also promotes that they used our recipe plugin for WordPress, which in turn further promotes us as a company with a good software product.

Recipes we know you’ll like

I liked this section because it shows that we base recipe recommendations on personal information, including ingredient likes/dislikes, allergies, intolerances and dietary requirements.

Review

However, once the design was on the page, it quickly dawned on me that the concept was still too messy and confusing. Visitors might click on the check-boxes thinking that they would do something.

So we decided to scrap this design. We wanted something that was even leaner, yet still promoted these core values.

Final design

So we came up with this:

GetMeCooking final home page design.

This design is very focused on just three features – and presents three actions, one of which is recommended via the use of the colour orange on the button (the other two buttons are blue).

This page has far fewer elements than the previous 2 designs, plus there is repetition (which makes it easier to read):

Title

More than just a recipe site

This tells visitors that this is a recipe site, but there is more to it than this. Some of the additional properties of the site are clearly described below.

Image

The first two images show different devices (iPad and laptop) which can be used to view the website. This is a subtle way of showing that the website can be viewed on these devices.

The first image shows a screenshot of the recipe plugin and the second screenshot shows an image of a recipe on the website. Only visitors who are familiar with our products would realise this – and the images are too small to show any detail anyway, but I think it’s nice to show this.

The third image is a recipe in a plastic container, with a ribbon on it, as if the recipe is a gift.

Sub-title

The subtitle is intended to be very short and to grab the visitor’s attention. It gives an overview of what the text below it will discuss.

Descriptive Text

This is a very short summary, which promotes and describes a feature of the website.

Action Button

The working on the action buttons makes it very clear what will happen if the visitor presses them.

Each of the 3 features are very different, so visitors should be able to skim these descriptions and then decide very quickly if the website is what they want and how they should progress.

In summary

Even though the page has very little text, it explains:

  • This website has recipes
  • It is more than just a recipe site
  • Recipes are added by food bloggers
  • We have a recipe plugin for food bloggers
  • People can search the website for recipes
  • Every recipe has a photograph, overview and steps
  • People can update their food preferences (tastes, allergies, intolerances and dietary requirements) to get personalised recipe results

Next Steps

Our next steps will be to:

  • Use Google Analytics to monitor the visitor engagement for the home page (time spent on the page, bounce rate, etc.)
  • Use CrazyEgg for heatmapping, to see which parts of the page visitors click on
  • Use Optimizely to A/B test what happens to the user engagement when we change elements of the page, such as the colour of the buttons, wording of the title and descriptive text and images
  • Experiment with adding items (such as announcement of new or important features) in the light-grey section, below the buttons

What do you think of the design? Is it easier and clearer to read than before? What would you change?

Post a comment

  1. Select the number 2 to prove that you are a cook, not a robot