What is this series?
Welcome to a new series where I challenge myself to improve some of the more popular pages on the internet. Mostly focusing on user experience, I have 1 hour to try to redesign/realign some well-known web pages.
We’re not looking at a total makeover or anything, just a simple (hopefully) upgrade.
Now this isn’t me trying to be big-headed or anything. I’m just offering an alternative design to a web page, adding my thoughts and inviting comment. It helps me to do these exercises and I hope it may help others.
The page in question this time is a Tesco product page.
The Original
Here is the the original page. Click to see it in full size.
The Issues
Some issues I have with the page, with bold issues being the most important to me.
- Breadcrumbs feel lost on the page
- Prices and add to basket functions seem cluttered to me
- Product information seems to have low priority on the page despite being one of the most important features of the page.
- Although important, the ‘healthier alternative’ box has too much prominence for my liking.
- Legal info takes up a lot of space and is on every page. As far as I’m aware this isn’t necessary.
Given time I could think of more but these seem to be the most important to me. Feel free to chime in by submitting a comment below.
After 1 Hour: The Result
Here is my effort. Click to see it in full size.
Or view a side-by-side comparison.
So what’s different?
You deserve an explanation of my work. Here are the main changes based on the issues above:
Breadcrumbs
They have been given a background to make sure they aren’t lost within the product content.
Prices/Add to basket
Tidier to remove confusion and now with less vertical space. Prices and product title has more impact and prominence on the page.
Product information
Widened for better legibility. Bigger font and more legible typography. Better tabs with bigger hit-spots.
Popovers for alternatives and legal
Click for a bigger version:
I thought the healthy alternative took up too much space for a feature I don’t think many would use. I decided to make a new alternative products popover incorporating not just a healthier alternative but with tabs for size and price alternatives. The same treatment was used for the legal information.
Last few bits
Account navigation was designed to match rest of site. Just a pernickety thing. I also removed the print page button as I don’t tend to think it would be greatly used. Prove me wrong though!
Conclusions
Hopefully you will agree that the redesign offers some user experience improvements and also de-clutters the page leaving the most important features standing out and obvious. I’d love to hear your thoughts in the comments section below.