Wednesday, 20 October 2010

Rakesh's Interactive Visual Feast for Tesco Groceries

I'd like you to meet another of our R&D team and introduce to you his pursuit of making searching for products on our website rather more interesting - indeed exciting to use - than it is right now.

So here is Rakesh Ravuri. Say hello!

We're going to get you to experience this proof of concept right now on your computer if you like - but first a little background from Rakesh himself:
This proof of concept explores a new way of searching on This is based on Microsoft's Seadragon and Deep Zoom technologies. The demo highlights a new way of searching using a series of linked data and demonstrates going from many things in a search, down to a few things using the filtering and being able to see clear patterns amongst that data. The demo uses Pivot's main feature "Collections", they combine large groups of similar items in product catalogue, so you can view the relationships between individual pieces of information in a new way. By visualizing hidden patterns, Pivot allows users to interact with thousands of pieces of data in a unique way with multiple page refreshes and minimum server round trips.

Before you delve in, read through the instructions below so you are clear about what to do and what to expect. You'll need to have the latest version of Microsoft Silverlight installed on your computer to make it work - and we're finding the Mac version doesn't work as well as the PC version for this demo (no images appear) so get thee to a Windows XP/Vista/7/Server2008 computer before continuing:
  1. When you have read these instructions, head to this web address: where you should see an outline of our grocery service and you appear to be logged in as Rakesh.
  2. Now type in a grocery search word into the text box on the right and press the Return key (for example, enter apples or chocolate - or anything else you think we sell):
  3. Next the screen will change and load a Silverlight control. If you don't have the most up to date version of Silverlight installed, you will be prompted to download and install it. If you have to install Silverlight you will need to close the browser and open it again, then go back to and start again. This time after pressing Enter, you should see an explosion of products appearing in squares on the screen, and a set of filter boxes on the left (click any image below to see a larger version):
  4. Use your mouse to drag the squares around, and use the mouse's zoom wheel to scroll in and out of this landscape of squares:
  5. Zoom right in and you will see the product's description fade in. Zoom out and the description fades away:
  6. Now click on some of the filters and sort options on the left. These filters are derived from the various attributes of the set of products that were initially returned from your search. Note how some product squares zoom away if they are not in the filtered list, and soar back in if you change the filter and they are now relevant again:
  7. Type in more search words in the box at the top left (above the filters) and note how products are being suggested to you (just the same as Google and Bing searches now offer suggestions as soon as you type in a character). Note how you can get to your wanted products with far fewer keystrokes than before.
The interface is completely absorbing (indeed mildly additive) to use and you will soon find yourself adept at whirling through the various products searching and sorting filters. I showed this proof of concept a couple of weeks ago to a mesmerised audience at an IT showcase, some of who were wanting to grab hold of the mouse and try it themselves.

Rakesh's quest to make grocery searching more of an interactive visual feast has certainly worked, so go and try for yourself (it's running on a powerful but lone lab server so not too many of you all at once please). Just don't forget that this is proof of concept - R&D are here to excite the business and prove the point that this is all technically possible. Job done spectacularly well, Rakesh!

1 comment:

  1. Hi, I am wondering which Tesco API Rakesh is using, I am trying out Tesco Grocery API Beta 1 Edition - REST Reference Guide from the API URL you have provided
    however, I could not find that many information from the PDF. I am very interest to develop on this API development.


As this blog grows in readership - and because it carries the Tesco brand - I have had to become more careful about the sort of comments that are acceptable. The good news is that I'm a champion of free speech so please be as praising or as critical as you wish! The only comments I DON'T allow through are:

1. Comments which criticise an individual other than myself, or are critical of an organisation other than Tesco. This is simply because they cannot defend themselves so is unfair and possibly libellous. Comments about some aspect of Tesco being better/worse than another equivalent organisation are allowed as long as you start by saying "in my personal opinion.." or "I think that...". ... followed by a "...because.." and some reasoned argument.

2. Comments which are totally unrelated to the context of the original article. If I have written about a mobile app and you start complaining about the price of potatoes then your comment isn't going stay for long!

3. Advertising / web links / spam.

4. Insulting / obscene messages.

Ok, rules done - now it's your go: