The BarbLog

Design, front-end dev and other random thoughts

Website makeover – (Part 1: Planning)

December 27, 2013 | Comment

[To avoid potential misunderstandings: this project is for educational purposes only, not a real commission]

The site

To start off with, I looked at the existing homepage and its content and thought about how I could group/lay it out more effectively, as at the moment it’s largely just plain text which is too much to read for a front page and is not at all visually stimulating for the user. Marked up a couple of things for reference.


Home page

The main problem, having looked at other sites, is that there is little imagery which is a problem as with food it’s important for viewers to see what it will look like, and if it’s appetising they will choose to cook it (if they’re just browsing). If they arrive via a search engine, having searched for a particular recipe, they will not see the home page but on the recipe page itself it will still be important to immediately get an idea of what they will be cooking.

Recipe page

Recipe page

This page is, no offence Yumyum, but terrible. An intrusive yellow Create Your Account sign greets you as you click onto one of the many banana bread recipe links in the search results (at random, as there is nothing to differentiate them except the titles) and the instructions are actually hidden in an accordion. At first I thought I’d have to sign up to even see them but then realised I have to click on the little chevron to expand that section. Why can’t it be open by default? Looks like the site is trying to ‘trick’ users into signing up to see the results. I don’t think many people would bother – they would just move on to another website that doesn’t require this. Also, the first thing they see below the yellow banner, based on the F-shaped eye movement that has been determined as the most common for people reading websites, is another prompt to register. I actually found this so offensive and annoying that I actually did some entirely empirical and statistically completely valid UX testing, in that I asked my other half  to narrate his thoughts as he viewed the page (without any explanation as to what he should expect) and he was really annoyed as well. Not just me then!
Oh and he loves cooking and is someone who would use a recipe website to actually browse recipes, unlike me… ahhem.

The competition

Then I looked at other recipe websites to see how they present their information. Google actually didn’t provide good results on its homepage (most were TV chefs’ sites, not ‘independent’ ones like YumYum is) and I’ve wanted to break away from Google for a while now so used DuckDuckGo and Ecosia to find more relevant examples. First impressions are important so below are mine.

FireShot Screen Capture #034 - 'BBC - Food - Recipes' - www_bbc_co_uk_food_recipes

Search box and recipe collections box on RH side stand out immediately. Easy to read and not cluttered. Colour scheme a bit bland though and don’t see good reason for clickable carousel as I’m lazy to click on the small thumbnails just to find out what the dish is, since it doesn’t tell you on hover.

FireShot Screen Capture #036 - 'MyRecipes_com - Recipes, Dinner Ideas and Menus' - www_myrecipes_com

A very positive first impression: vibrant and warm colour scheme which fits in with cooking (heat/fire/oven/etc) and like the little bite out of the ‘i’ in the logo. Carousel on home page much better than BBC’s version: if you hover over the title the image comes up. Random recipe review, Most Popular box and Top searches boxes all useful, though too low down the page in my opinion, as these are likely the most important things for someone who is just browsing for recipe ideas.

FireShot Screen Capture #037 - 'Free Recipes_ Quality Family Recipes from Betty Crocker' - www_bettycrocker_com_recipes

Nice colours and texture here. A ‘Browse’ box is prominent at the top as is the Editor’s Pick which gives you good ideas, along with the Top Rated slider. Other categories lower down the page have large and nice photos included which is important for a food website. Not cluttered – I rather like this one. This was the first site I viewed that actually made me want to click on an appetising photo to see the recipe page.

FireShot Screen Capture #038 - 'Banana Bread recipe from Betty Crocker' - www_bettycrocker_com_recipes_banana-bread_51427396-6764-4b0a-a73a-78c683c703d2

The recipe page presents information very well; user ratings and reviews are right at the top, as is a save/print/email link. The summary (time, servings) is right under the main photo of the dish, typography is easy to read and pleasant to look at. Overall this is a good example of a recipe page.

FireShot Screen Capture #036 - 'Food Network - Easy Recipes, Healthy Eating Ideas and Chef Recipe Videos' - www_foodnetwork_com

Colours are vibrant and top nav design looks nice, search box easy to see. However, rest of the page looks very cluttered with all the text which looks like ads with that font and the blue links, and too much information in general. If I was a visitor just browsing, I’d be overwhelmed. If I was looking for something specific I’d likely use the top nav or search box, and not bother reading all that information anyway to find what I wanted.

Initial ideas

I decided I would like to use a warm colour for the brand colour, but orange and red was already taken in my examples (besides, I’ve done red a lot already) so I settled on a rich purple. I’ll play around with the palette during implementation though, this is not final.

Palette idea

Design-wise the aim is to be modern, clean and functional, so a flat style is what I have in mind – no 3D buttons and gradients if possible.

I also wanted to update the logo as it looked a bit dated.  I liked the idea of the big fish eating a smaller fish but in a smaller size it would look too detailed so I came up with a different mascot for the site, making it friendlier.

Site statistics

Stats as of 30/12/13

Stats as of 30/12/13

I looked at the site stats on to see if there was any information I could use when considering the new layout and code. I was looking for information about what visitors search for, the bounce rate, what pages they visit and revenue from the Google ads. It is clear from this that the ads are important in generating revenue and probably cover monthly hosting costs but not much more, so reducing the prominence of ads would likely be refused by the client.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>