We’ve redesigned our home page
Posted 30 August 2013 18:12
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:
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
- 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.
- 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.
- 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).
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.
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)
The elements we had removed from the original design were
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.
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:
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.
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.
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.
So we came up with this:
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):
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.
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.
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.
This is a very short summary, which promotes and describes a feature of the website.
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.
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
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?