Website makeover – YumYum.com (Part 1: Planning)
[To avoid potential misunderstandings: this project is for educational purposes only, not a real commission]
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
I looked at the site stats on Alexa.com 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.