Shopachu – Incogna’s new visual product browser

Tuesday 5th January, 2010

In the back half of last year visual search outfit Incogna released their visual shopping browser Shopachu. I’ve followed some of Incogna’s previous releases so I thought I’d share some thoughts on this one too.

What does it do?

This site has a very similar model to our own consumer-facing MAST app; Empora. It makes money by sending consumers to retailer sites, who for obvious reasons are willing to pay for suitable traffic. The main forces that influence the design of a site like this are retention, and the clickthrough and conversion rates of your traffic:

Retention – you need to impress people, then ideally remind them to come back to you

Clickthrough – you need to send a good proportion of visitors to retailers in order to make money

Conversion – if the visitors you send aren’t interested in buying the clicked product then the retailers won’t want to pay for that traffic on a per-click basis (although they might be interested in the CPA model, which doesn’t pay until someone buys)

First Impressions

People’s first impressions are usually determined by a combination of design and how well a site conforms to their expectations. I’ve probably got distorted expectations considering my experience working with this type of application, but in that respect I was pleasantly surprised; Shopachu has some good features and makes them known. In terms of design I was less impressed, the icons and gel effects don’t seem to fit and I think there are whitespace and emphasis issues (sorry guys, trying to be constructive).

Finding stuff

It’s fairly easy to find things on Shopachu. The filters are easy to use (although I could get the brand filter to work, could be a glitch). The navigation is pretty easy, although it doesn’t currently provide second generation retail search features like facet counts (i.e. showing the number of products in a category before you click on it).

The biggest interesting technological problem I’ve noticed with their navigation is the colour definitions. There’s a big difference between a colour being present in an image, and the eye interpreting that colour as being present in an image. I think there are some improvements to be made in the way colours are attributed to images (e.g. here I’ve applied a pink filter but am seeing products with no pink returned). Similarly there’ll be another marked improvement with better background removal (e.g. here I’d applied a light blue filter and am seeing products with blue backgrounds).

Similarity search

Shopachu’s similarity search is quite different to Empora’s.  They’ve chosen to opt for maximum simplicity in the interface rather than user control, resulting in a single set of similarity search results. In contrast, Empora allows users to determine whether they’re interested in colour similarity, or shape similarity, or both. Simplicity often wins over functionality (iPod example #yawn) so it’ll be interesting to see how they do.

Another issue is the quality of the input data. This challenge is the same for Empora, or anyone else aggregating data from third parties, in that category information is inconsistent. One effect of this is that when looking at the similarity results for an often poorly-classified item like a belt you may also see jewellery or other items that have been classified as “accessories” or “miscellaneous” in the retailer’s data, another effect is that you often see duplicate items.

Keeping the traffic quality high

An interesting design decision for me is that the default image action on Shopachu is a similarity search, i.e when you click on the image it takes you to an internal page featuring more information and similar products. This is in contrast to the default action on Empora or Like.com, which is to send the visitor to the retailer’s product page.

The design trade-off here is between clickthrough and conversion rates. If you make it easy to get to the retailer your clickthrough rate goes up, but run the risk of a smaller proportion converting from a visit to a purchase. Here Shopachu are reducing that risk (and also the potential up-side) by keeping visitors on their site until they explicitly signal the intent to buy (the user has to click “buy” before they’re allowed through to the retailer).

Getting people hooked

There are a few features on Shopachu aimed at retention, namely Price Alerts and the ability to save outfits (Polyvore style). These features seem pretty usable, although I think they’re still lacking that level of polish that inspires passionate users. I’d be interested to know what the uptake statistics look like.

In summary

I think this implementation shows that Incogna have thought about all the right problems, and I think have clearly got the capability to solve the technological issues. On the down-side; cleaning up retailer’s data is a tough business which will be time-consuming, and I think they need to find a little inspiration on the visual design side.

Advertisements

New Home for the London Search Social

Wednesday 16th December, 2009

To avoid the somewhat annoying (and hopefully temporary) problem that not everyone in the world reads my blog, I’ve created a new home for our search social meet-ups over on Meetup.com.

Sign up on the London Search Social page to get notifications of events.


Grails Exchange in December

Monday 23rd November, 2009

It’s great to see fellow Pixstanaut Tomás Lin talking at the forthcoming Grails Exchange conference in December. He’ll be talking about building rich GUI apps with Flex and Grails. There are still a few tickets left if you can make it.


Open Source Search Social

Thursday 5th November, 2009

It’s been a little while since the last Open Source Search Social, so we’re getting really imaginative and holding another one, this time on Wednesday the 18th of November. As usual the event is in the Pelican pub just off London’s face-bleedingly trendy Portobello Road.

The format is staying roughly the same. No agenda, no attitude, just some geeks talking about search and related topics in the presence of intoxicating substances.

Please come along if you can, just get in touch or sign up on the Upcoming page.


Avoiding Underground Design Mistakes

Sunday 23rd August, 2009

One of the main challenges in industrial design is guiding people towards successful usage of your product (be it a web page or a transport system). People rely heavily on intuition, and communicating the ideal usage of your product into their subconscious is not a trivial exercise.

People have a habit of making decisions using the first gut feelings they get, rather than slowly and methodically evaluating all the information. Gary Klein published a great book full of fantastic case studies on this subject back in 1999. The consequence for product design is clear; not only do you have to make sure that the usage of your product is obvious, but that there are as few ways as possible the usage could be misinterpreted.

Misinterpretation

Misinterpreted usage is a common problem, you probably walk past examples of it every day. For example, on my journey to work I catch the District Line from East Putney to Notting Hill, (please say hello if you see me) and on the way I go through Earl’s Court.

At Earl’s Court the eastbound line splits and heads in two directions. Every day I see people get onto the wrong train, either jumping off when they realise or cursing when they realise the train isn’t going in their direction. Why? The departure board quite clearly shows the train destinations and these people evidently know their intended routes, and there are only two eastbound platforms.

Looking at the platform’s departure board it’s not clear why people get it wrong every day.

Departure board at Earl's Court

Departure board at Earl's Court

Things become much clearer when you realise that this departure board is not the first source of information everyone sees when they arrive on the platform. Close to the stairs at the Earl’s Court Road entrance is a map showing the destinations reachable on the eastbound platforms. See what you think (below).

Eastbound District Line platform map

Eastbound District Line platform map

I can see two possible interpretations of this map.

1) The intended meaning; both platforms serve eastbound trains and that the following destinations can be reached.

2) The alternate meaning; the platform on the left serves the line on the left of the map, and the platform on the right serves the line on the right-hand of the map.

This is an example of failure to communicate the successful usage of the train platform to travellers. A proportion of people are looking at the map and assuming it tells them which platform serves trains to which destinations. They then stop looking for further information because they think they’ve navigated successfully.

What to do about it

In the example of passengers at a train station simply watching people on the platform is enough to deduce that there’s something wrong, and possibly what to do about it. On the web things aren’t so simple, you can only track user behaviour at a distance through statistics. This makes problems much harder to track down.

Probably the best solution I’ve come across is to use a user experience lab (e.g. Creative Good in NY). These guys will simulate real world use of your product as closely as possible, and use that to uncover what’s going wrong, or right, for you.

For those on a budget, you can get people in your target demographic delivered to your door via companies like Independent Fieldwork. It’s then up to you to use those victims test users to discover as much as you can. This isn’t an easy job though, I’d recommend getting good help if you can, and dropping as many assumptions as you can.

However you do it, communicating the usage of your product is essential.


On the Subject of Web Browsers

Tuesday 11th August, 2009

Creative agency mogul and Javascript whizz-kid Phil Hawksworth has posted a defence of IE6, arguing that in fact IE6 isn’t really as awful as we sometimes make out, and that its entrenchment (which is the biggest annoyance) is caused by the web development community’s own pandering to the IE feature set after the first great Browser War (BW 1).

It sounds weird to hear it now, but as someone who wrote DHTML in the bad old days when the big guns were Netscape 4 and IE 4 and backward compatability demanded IE3 and Netscape 3, I can tell you that IE6 is a dream come true, just like IE5 was when that came out. Yes, I complain about it too, and I know there’s non-standard behaviour, but there are ways of ironing out those inconsistencies without resorting to browser-specific hacks, or except in specific circumstances separate codepaths (the prime exceptions being XmlHttpRequest, vector graphics, and events).

The required attributes for a web browser these days are:

  1. Standards compliance (implemented forgivingly)
  2. Performance
  3. A decent debugging tool
  4. Distribution deals

With the advent of Chrome and the Iphone it’s clear that although IE still holds dominance in corporate applications, in the open web the two competing layout engines are Gecko and WebKit, with Trident a distant and somewhat lame third place. Sorry IE, any browser that doesn’t include a decent dev tool is really going to suffer.


Guest post – Similarity search: The Two Shoe Problem

Thursday 30th July, 2009

Today I’m introducing my first ever guest post, written by Pixsta‘s own Rohit Patange about some great work he’s been doing with the guidance of Tuncer Aysal. You’ll be able to see the results of their work shortly on our consumer-facing site Empora. – RM

We at Pixsta are interested in understanding what is in an image (recognise and extract) and do so in an automated way that involves a minimum amount of human input.

Our raw data (images and associated textual information) come from a variety of retailers with considerable variation in terms of data formats and quality. Some retailer images are squeaky clean with white backgrounds and a clear product depiction while others have multiple views of the product, very noisy backgrounds, models, mannequins and other such distracting objects. Since we only care about the product, an essential processing step involves identification of all image parts and the isolation of individual products, if several are present in the retailer image.

The n-shoe case:

Let’s take the case of retailer images with multiple product views. This is most commonly encountered in shoe images.  Let us call each of the product views a ‘sub-image’.

When we talk about similar shoes we talk about a shoe being similar to the other (note the singular). We have to disregard how the shoe is presented in the image, the position of the sub-images, the orientation and other noise. If we do not do so, image matching technology tends to pick out images with similar presentation rather than similar shoes. Typically a retailer image (a shoe they are trying to sell) will have a pair of sub-images of shoes in different viewing angles. Pictorially with standard image matching we get the following results for a query image on the left:

Visual similarity query showing product presentation affecting results

Even though the image database contains images like:

Two shoes pointing to the right

These are not in the result set despite them being much closer matches, because of the presentation and varying number of sub-images.  To overcome this drawback, we have to extract the sub-image which best represents the product for each of the images and then compare these sub-images. For the sub-image to be extracted, the image will need to go through the following processing steps:

  • Determine which of the sub-images is the best represents the shoe.
  • Extract that sub-image.
  • Determine the shoe orientation in that sub-image.
  • Standardise the image by rotation, flipping and scaling.

All the product images (shoes in this case) go through this process of standardisation, resulting in a uniform set of images. Pictorially the input and the output image of the standardisation process are:

Shoes segmented and standardised to point right

Let’s look at the procedure in more detail assuming that the image has been segmented into background and foreground.

  • The first step is to identify all the sub-images on the foreground. The foreground pixels of the images are labelled in such a way that different sub-images have different label to mark them as distinct.
  • After the first iteration of labelling there is a high possibility that a sub-image is marked with 2 or more labels. Therefore all connected labels have to be merged.
    Segmented shoe images
  • The third step is to determine which of the sub-images is of interest; that is picking the right label.
    Choosing an image segment
  • Once the right sub-image is extracted the orientation of this sub-image is corrected to match a predefined standard to remove the differences in the terms of size of the product image, orientation (the direction the shoe is pointing towards) and the position of the shoe (sub-image) within the image.
    Single shoe pointing to the right

All product images (shoes in this case) go through this process before the representative information from the image is extracted for comparison. Now the results for the query image will look like:

Resulting query showing standardised similarity

Generally there are two shoes in an image. But the method can be extended to ‘n’ shoes.