MyVoucherCodes unsolicited redesign

October 10, 2011

This is the first in a series of redesigns I plan to do over the next few months. It is also the first post on my blog which is not photography related. I have seen a few unsolicited redesigns on the web which I was very impressed with (e.g: The 6 examples over at Speckyboy.com which showcases redesigns of The New York Times, American Airlines, IMDB (love this), Facebook, Google search, the impressive multiple search engine by frenchlabs and Instapaper IPAD app.) and I thought I’d have a go myself.

I chose MyVoucherCodes purely because it is a very text driven website and in my opinion not particularly easy on the eye. The main problem on the current website is that there is far too much information crammed on to the homepage. I can imagine the meeting at Marko Media (the company behind MyVoucherCodes) when they were discussing the structure of the homepage, every department wanted to make sure that they’re codes/retailers/offers were getting the most exposure. That’s generally a major problem in most companies I’ve worked for but then it’s down to us designers and information architects to convince those of higher powers that this is not always the best idea.

There are so many other websites out there these days offering voucher codes, promo codes, great deals and cashback. The main competition MyVoucherCodes have to compete with are Vouchercodes.co.uk, Voucherhub, Vouchercodes.com, Promotional codes and Voucher Cloud. It’s a very competitive market and all the better for the consumer.

The current website
Here’s a screengrab of the top section of the current website. I couldn’t insert a full page screengrab of the website because frankly it’s way too long so head over to the website yourself and check it out.

It’s obvious the website works because it has been so successful over the last few years, but it can work better. People are still able to find what they’re looking for but how long does it take to find that voucher code and would it be easier to find if the website looked a lot easier to use. Are people more likely to register and come back to a website that structurely works better? Are you more likely to trust a website with a better design? I’d like to think so.

The solution
- Establish the most important links/buttons and elements of the top section of the current website, and make these more prominent.
- Organise and structure content on the homepage
- Encourage users to search and browse the website longer
- Make it quicker and easier for users to find what they’re looking for
- Encourage users to follow, download and subscribe on their social media platforms, email newsletter and RSS feeds (which they currently have but gets lost at the bottom of the page)
- Cleaner more structured tabbed list of the most popular/exclusive/featured voucher codes for consumers to use
- Colours help to create an identity and seperate different items of interest throughout the homepage.
- Overall more colourful, easier-on-the-eye (compared to the old site) and user-friendly.

Check out a full size version of the above homepage redesign.

The new logo
The current MyVoucherCodes logo doesn’t really have an identity. If you look at their other websites (links at the bottom of their website), all the logos are almost exactly the same. There is no character to the logo and people cannot really identify with it. When you see a small snippet of a well known logo, you can usually tell what it is. Remember those types of emails forwarded to you by your colleagues: “Identify these 20 logos”. I’d like to think I was pretty good at those games.

I wanted to create a logo that people will recognise. If you think about location based apps, they usually have a pointer where the place of interest is referred to. This ties in nicely to the idea of My Voucher Codes because stores/shops/restaurants are where these codes are used. I’ve used red as the main colour because it is a strong colour. Most important elements on an e-commerce site for example are in red to make them stand out from the page. People tend to relate the colour red to warmth, fire, energy, love, passion etc. I wanted the logo to stand out from the page. Red is also the colour that most of their users recognise from their website and social media platforms (e.g. their facebook account).

I’ve used the colours in the logo to present the main links on the site as identifiers. I created simple icons for people to recognise commonly clicked main navigation links. I tried to use shapes/objects which people would easily recognise even if the link text was not showing.

The search & browse sections
I made a bold decision to make the search and browse sections a lot more prominent. Currently the search box is right at the top of the page, which is great but it just looked a bit lost in my opinion. I’ve moved it down and widened it, while presenting the abillity to search particular categories which is most common in busy websites. I think it’s a great feature because it will then allow users to be more specific with their searches. A user will also have the ability use the advanced search facility which could in theory allow the user to search by percentage off discounts, for a particular brand or retail shop for a particular type of product. Each voucher code could be tagged in detail which would then allow the search facility to be more accurate. I’ve included a “Top searches” link for users to see the most commonly searched brand/retailer/code on the website.

The browse section has been changed from a dropdown menu to a link list of about 15 of the most popular categories with the option to view all categories. In my opinion users are more likely to view and click links if they are right infront of them as oppose to viewing a dropdown list and scrolling through the long (I counted 90 links in the dropdown) list of brands/retailers. Most of the time people head to a voucher codes website knowing the voucher code they are looking for so they’re unlikely to trawl through a dropdown list of 90 links let alone 30 links to find what they’re looking for. I certainly wouldn’t bother. I guess it’s good to have the option hence why I have included a link to A-Z and All categories.

Mobile website
I created a couple of mock up’s of a mobile website which will simply be a stripped down version of the main website. I designed the first version below (left) and this is quite simple and some people might prefer this. I created a second version a week later which is straight to the point listing the top 10 voucher codes for those users who are just randomly looking for a discount.

Conclusion
This has been a good experience to redesign a website like MyVoucherCodes. I hope that you agree that this is a more elegent and efficient design. It’s important to note that MyVoucherCodes currently do have mobile apps for the iPhone and android devices. The apps are very popular and if I did this redesign again I would put more emphasis on encouraging users to download the apps and make use of the mobile website. More use of the mobile apps/website will come with the listings of consistently good voucher codes. Much more integration with social media, more so on the pages below the homepage where there are lists of voucher codes which users can share/talk about with their friends and family.

What are your thoughts on this? If you had a go at redesigning this website, what would you do differently? What would you keep? If you have some free time, post a version of your own and include the link in your comment below. Thank you.