Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Shopping.com Redesign LAUNCH

22 Sep 2003 by Jason Fried

We’re thrilled to announce the launch of our latest total-redesign project: Shopping.com (which was previously known as DealTime, which recently acquired Epinions). Shopping.com is the web’s #1 comparison shopping site.

While the colors are bold, the layouts are clean, quick, and uncluttered. We worked closely with their sharp, highly-customer-focused internal team and key executives to remove all that wasn’t necessary. We used larger type sizes to help people focus on what’s really important, reduced the number of table columns by consolidating related data, centered the logo and tabs to help balance the stretchy layout, and incorporated “interstitial help/suggestion rows” (scroll down a bit on this page to see the “Want to compare products side-by-side?” row) to help inform people of useful features in an integrated, useful way. Oh, and plenty more ;)

There’s more work to be done, and more screens to improve/redesign/launch, but kudos to Shopping.com for seeing the value in simplicity, clarity, and utility. Any and all comments would be appreciated as we move into Phase 2 of the redesign. The big wigs at Shopping.com will be checking this post often so let them know what you think.

45 comments so far (Post a Comment)

22 Sep 2003 | Don Schenck said...

Very well done.

22 Sep 2003 | Matthew Oliphant (formerly fajalar) said...

Speaking of blank slates... I like the 1, 2, 3 at the top (under the top nav). It answers "What am I doing here," while providing nav to the specific info related to these tasks.

22 Sep 2003 | Matthew Oliphant (formerly fajalar) said...

Although the winking shopping bag (Shoppy) freaks me out a bit. ;)

22 Sep 2003 | Bill Brown said...

I like it. And I hated DealTime.com before.

22 Sep 2003 | Jacob said...

Although I like the small touchesemphasis through type sizes, product numbers vertically centered beside the images, for twothe design doesn't strike me as anything spectacular. It reminds me of an Amazon.com done on the cheap. Maybe it's the sharp rectangular tabs or the gaudy color sheme or the cheapish-looking logo...

On a more constructively critical note, the green of the visited links is hard to see in the purple footer banner, the purple links elsewhere give me a purple overdose when taken in conjunction with the purple trim. And couldn't you have tried to get rid of some of those tables and "font" tags? ;-)

I love the work you guys have done elsewhere, but this site doesn't show any of that trademark 37s style. Were you held back by artistic differences with the managment, or is this a low-fi first draft?

22 Sep 2003 | Brad Hurley said...

I like the 1, 2, and 3 as well, although I find it a little confusing that the checkboxes for 2 and 3 are checked while there's no checkmark in #1. The lack of a checkmark in #1 invites me to click in that box first, which is probably your intention, but the meaning of the checkmarks in the other two boxes isn't really evident to me. It's almost like the site is telling me I've already taken those two steps, so they're checked off.

Overall, though, the site looks great.

22 Sep 2003 | Jason said...

www.shopping.com != shopping.com ??

22 Sep 2003 | JF said...

Colors weren't our choice, we worked with what we were given. I agree, they are heavy, and we discussed this with the folks at Shopping.com, but they have their reasons. They do an enormous amout of user testing and all of their decisions are supported by real data. So, while I respect and understand their decision, I still think it's too much for my tastes ;)

RE: Tables and Font tags... We didn't deliver code with font tags, and we tried to use CSS instead of tables wherever possible, but this is a data heavy site and when they recoded it to fit into their systems, they had to make some changes. The real world is quite different than the theoritical one. I assue you, the folks at Shopping.com are very savvy, and they "get it" -- but, just like every other company, they have limited resources and have to make tradeoffs.

RE: The trademark 37s style... Let them answer that one ;)

22 Sep 2003 | Darrel said...

Shopping.com is the webs #1 comparison shopping site.

And that is the #1 cheesiest tag line. ;o)

Hehe...the logo winks. THE LOGO WINKS!

Nice site. Very clean. Clean is good.

My only complaint about sites like this is incomplete product data. It's a common problem making it hard to truly compare products.

As for the clean code layout, the real world is full of really crappy CMS systems that offer road blocks to truly flexible markup. It is rather sad that we can't develop tools to handle this very well. Even 'modern' systems like .NET are full of problems when it comes to spitting out clean, standard markup.

22 Sep 2003 | JF said...

My only complaint about sites like this is incomplete product data. It's a common problem making it hard to truly compare products.

I agree. This is the online comparison shopping industry's biggest promise, but biggest letdown. Good news though... The new, redesigned compare 2 or 3 products screen hasn't been launched yet -- we're still working on that one. We have some innovative ideas. Stay tuned.

22 Sep 2003 | ~bc said...

I have to say, it certainly isn't as pretty as your usual sites. It's obvious that you weren't involved in the graphics. The usability is there, but I'm one of those people that (if i weren't playing with it to post here about it) that I would have skipped right by it. That somewhat "cheezy" if not garish design makes me think they aren't a top notch outfit. Research at Stanford confirms that customers assoicate good visual design with trustworthiness. I wish I had the link to post here to cite that, but I'm sure a little googling would produce that.

There are others who think sites that are low on design (ie, http://cheap-cds.com) give better values. But even CCDs has a sorta rebelous look to them in their "lack" of design.

Also, I searched for 512mb RAM and one of the pics of the Kensington sticks wasn't RAM at all, but a PCMCIA card.

22 Sep 2003 | Ben Langhinrichs said...

I like the site in general, but I think the 1 2 3 at the top with the 1 unchecked is very confusing.

22 Sep 2003 | cMcMahon said...

I feel like I just got sacked by the Denver Broncos, circa 1985.

22 Sep 2003 | Lance Osborne said...

I tried to validate a page using the W3C MarkUp Validation Service, but due to the missing DOCTYPE, it wouldn't attempt a validation.

Out of curiosity, why the lack of a DOCTYPE?

22 Sep 2003 | alice said...

Good job on the little touches that make a big difference (as noted above). I did have a few quibbles when browsing around, though...

I wanted to find a silver necklace, so I clicked on "jewelry." "Necklace" wasn't one of the category links, so I clicked on "view all jewelry types." That took me to a page that said "find by category," but it only listed five categories, and I had to click on the "more" link to get to "necklaces." The full list is only comprised of ten categories, so I'm not sure why "necklaces" (a pretty major category) couldn't have been on the previous page.

Once I was on the necklaces page, I could search by stone, material or price range. Good. I clicked on "silver." I could then search by stone, store or price range. At this point, it wasn't clear to me whether searching by price range would search within JUST silver necklaces, or all necklaces. The fact that one of the "search by" categories had changed (from stone/material/price to stone/store/price) wasn't a big enough indicator. I didn't even notice the change, actually.

Also, I tried searching for clothes by brand and when I clicked on "Coach," I got two adidas-brand coach shirts. I would've expected something from Coach, the company.

Sorry for the long-winded post!

22 Sep 2003 | birdman said...

That somewhat "cheezy" if not garish design makes me think they aren't a top notch outfit. Research at Stanford confirms that customers assoicate good visual design with trustworthiness.

Good point, ~bc. Although, it might be argued that cheeziness is in the eye of the beholder... and as difficult as it might be to believe, many web viewers are unable to resist the call of what I call the "train-wreck" effect.

I like the way product images on the homepage are nicely centered down the page. Overall structure of content if vastly improved over what I recall... and compared to many similar sites.

Now, if we could just do something about the glare of the color scheme! It's giving me a headache.

22 Sep 2003 | birdman said...

More on color:

Bottom line is... nobody's going or coming back to shopping.com because of their distinctive colors. Brand color is really IRRELEVANT for them, because there is no counterpart in any other medium.

I could see going completely "gray" if it interfered less with user "comfort" and provided a calmer field on which to communicate functional benefit via color. If it works better, then I come back... period.

I'm not guided by differentiating brand colors.

22 Sep 2003 | Noel D. Jackson said...

Setting aside the interface... font tags & yucky html

23 Sep 2003 | Ed said...

I think it's really sharp, but way too colorful. The loud color takes an edge off the simplicity and usability. I doubt 37 suggested these colors.

23 Sep 2003 | Ro said...

I've never been a fan of javascript as the value of the href attribute in an anchor. There are a few near the bottom of the document. As a habitual 'right-click, open-in-new-window' user, the browser does nothing except report an error. Looking at the code, it seems the function that you're trying to utilize does nothing more than redirect the browser. Just wondering what the reason might be?

23 Sep 2003 | mini-d said...

I can't look at the colors... they've blinded me...

23 Sep 2003 | Steve said...

I can't figure out how to compare a Sony Cyber-Shot DSC-F828 Digital Camerato a Canon Digital Rebel.

First I found the Digital Rebel and clicked the check box.

Then I went up to the top of the page and clicked Sony and found my way to the DSC-F828, check it's box, and clicked 'Compare Products'.

All I got as a result was hte DSC-F828.

It forgot that I had checked the Digital Rebel.

How can you compare products from two different vendors?

23 Sep 2003 | dmr said...

I was very surprised to not find the Ipod on the first page of "MP3 and Digital Media Players;" it would seem to me that better organization could be had on the initial page of categories — featured products, top 5 rated, top 3 lowest priced, etc. and perhaps slightly smaller area given to each product, the page is comprehensive but there are dimminishing returns on that, there's too much thrown at me without any due consideration.

The 5gig mac Ipod has almost 60 reviews and 5 stars but doesn't make it to the top 5 for mp3 players, that just seems strange — it's the most-talked about mp3 player out!

Inconsistent usage of "&" and "and". Tab states "Home & Garden" but initial page heading states "Home and Garden"; it's minor I know, but remains inconsistent.

Similarly, the menu dropdown "Jewelry & Watches", but on the page it's "back to Jewelry and Watches".


Overall the site is clean, but it's not a refreshing experience browsing; Apple is so damn hard to beat for that. I hope shopping.com see's our comments and rethinks some subtle nuances of typography and color (the letters, especially the "e" in the orange "compare prices" button are not well defined)

The B&H watermark does not serve this thumbnail well: http://www.shopping.com/xPO-La_Cie_PocketDrive_UandI_60_GB_300190

The "sorry, image not available" box seems a bit large and obtrusive.

"See next 20 results" seems far away from the page numbers. I would much rather click "next" than target those small page 1 2 3 4... (37signals posted something about css padding for the ahref; that would be a great solution here!)

I hope shopping.com doesn't get discouraged, I think the site is functioning very well and is intuitive and clutter-free; I really don't know that I will use it over pricewatch.com tho, I don't know I feel like I can trust the search results as it feels kinda like cnet.com (and I don't trust their corp. anymore) or amazon. It has a 37 intuition, but the tight visual organization isn't quite there yet.

I can't wait till the 2nd and 3rd iterations. They should be great!

23 Sep 2003 | dmr said...

The above should read "I feel like I *can't* trust the search results; perhaps a sentence upfront could clarify how the search process works, that top position isn't bought or influenced in any way by corps or something.

The search is core to the site here, how do I know I can trust the results of a new site I'm not really familiar with? What's so great about this site over pricewatch, cnet, sharkeyextreme's price comparison or anyone else's?

23 Sep 2003 | Charbel said...

Colors are too strong
I think the layout of the front page is very well done from a usability stand point.

However, when I click on the "Flowers" category for example, and I get a listing of products, the price is all the way at the left hand side of the page whereas the picture of the product is on the right hand side. The description in the middle. It makes the potential customer have to scroll their eyes the whole screen just to find the price, and it's hard to correlate it sometimes to the right product if the list is long.

I agree with earlier posts that the color scheme is too strong, and it takes away from the importance of the products and product images. But I realize that this was a requirement of the client.

All in all, the hints of 37s are there, it's very easy to use and navigate.

23 Sep 2003 | Charbel said...

Forgive my last comment...I always mix right and left...I meant to say that the products are on the left and price is on the right :)

23 Sep 2003 | Randy said...

All the 37s hints are there, I agree, but the colors are just way too strong. I will not use this site because of the colors. They are too distracting. I feel like they are trying to sell me COLORS and not PRODUCTS.

23 Sep 2003 | Matthew Oliphant (formerly fajalar) said...

Colors again...

Blue and orange go really well together in general, but there's something about this particular combination. The blue looks too red (even though I know there is no red in it).

I bet this is a constraint of corporate identity, but is there a wat to soften the blend from blue to orange? A lighter blue? This would also distinguish the backgrounds from the color of the hyperlinks.

I don't think the color detracts from usability. You follow light text on a dark background (or vice versa) so readability should be there for most users.

23 Sep 2003 | Matthew Oliphant (formerly fajalar) said...

Looks like a lot of shopping sites are being redesigned.

23 Sep 2003 | Mike said...

I think its a good start to what will be, in the end, a fantastic resource for comparing prices for consumer devices (say it three times fast).

Just a couple of things:

1) I went to the site to find the best price for a new Palm Tungsten T2 PDA. I first searched for the string "Tungsten T2", then clicked on "PDA" results, then "Compare prices from X stores", then "Sort by Base Price" to finally get the lowest price and a "Buy It" button. 4 steps.

The site that I would normally use to search for a product price is Froogle (by Google), and to find the lowest price for the same PDA there, I followed these steps: 1) Searched for the string "Tungsten T2" 2) Clicked on the "Price Low to High" link on the left. After only those two steps I found the lowest price for a T2 ($11 higher than shopping.com). 2 steps.

If you managed to reduce the number of clicks it takes to find the lowest price for a given search query, you've not only got a satisfied customer, but a loyal one too.

2) I like the logo ;)

23 Sep 2003 | Kristen said...

I agree that the colors are too strong. But as a web designer for govt. public health sites I've probably seen user testing data similar to those that shopping.com collected-- that is to say; every age group, every physical ability level, every gender, every income bracket, every race and cultural orientation. When dealing with a persona that vague, the design always seems to lose its subtlety. Mostly it goes to hell altogether.

That said, I'd definitely like to see "next" and "back" buttons for the results listing -- the tiny numbers are a pain in the butt to target and click. I'm surprised that wasn't covered in shopping.com's user testing; can visitors with less-than-perfect eyesight target the number links?

I also agree that the row of checkboxes at the top are mildly confusing. If they were all checked a visitor could interpret them as "these are the things shopping.com does for you." If none were checked the visitor could interpret them as "these are the things I'm going to do at Shopping.com." With them checked out-of-sequence at the outset it's a bit confusing, i.e.; "Can I compare and buy, but not FIND what I want?"

And Jason, can't you convince Shopping.com to embrace that "context and perspective" philosophy you highlighted not long ago [ May 23, 2003] to press manufacturers for better photos of tiny gadgets? ;-)

23 Sep 2003 | RS said...

I think these dissections of the 1. 2. 3. checkboxes may go too far. Do visitors really think "what does that empty checkbox by 'Find' mean?" or do they just read "Find, Compare, Buy" and get on with it? I'm pretty confident it's the latter.

23 Sep 2003 | Kristen said...

I agree with you completely, RS. I don't think anyone would ever get so hung up on the checkboxes that they wouldn't dive into the site and start clicking away.

I think the point is more of an aesthetic one; that the "oddness" of the solution is a clue that there's probably a better solution.

23 Sep 2003 | Brad Hurley said...

The checkboxes did throw me a little, though -- to me the check in the box implies that I've already taken that step, which didn't make sense because I'd never been to that site before. So I thought, maybe my brower's been fed a defective cookie that is misleading the site into thinking I've already been there. Granted, most users don't even know about cookies so that thought would never occur to them.

It only caused me perhaps half a minute of hesitation, and then I dove right in. Nothing serious, but as Kristen says, there might be a better solution.

24 Sep 2003 | Ed said...

The more I look, the more I like. This is a good example of colorful minimalism. Minimalism and simplicity doesn't have to be white.

24 Sep 2003 | ak said...

a friendly critique - i think the design (or non-design) is a little dreadful - it would be great to see what would have happened if a designer with a great sense of color combined their talents with those of 37signals .

24 Sep 2003 | Mike said...

ak-
The guys at 37s already said that they wanted to change the colors, however due to circumstances out of their control the colors were a no-change issue.

24 Sep 2003 | Are Halland said...

By the looks of the newly revamped Yahoo! Shopping, it seems like the yahoo-folks have been doing some homework on comparison shopping as well.

Informationdesign-wise I'd say this is the beste yahoo-service I've seen so far.

24 Sep 2003 | Ed said...

I don't know. The new Yahoo Shopping home page is nice and clean, but the data tables and product pages feel really cluttered to me. They seem to be missing structure.

24 Sep 2003 | Mal Ross said...

Am I the only person who doesn't mind the colours? I think they actually suit this type of site quite well. I suspect they're going for the average-Joe-with-limited-dough market rather than the sensibilities of your typical graphic designer. As such, these colours are bold, confident, and quite friendly. Besides, it's not as if the page background is blue or orange. Once you're in the main body of comparisons, most things are white. Even the hint rows have a much subtler orange background.

Overall, I reckon the site's really quite well executed. Certainly, the digital camera page linked above is a good one. However, when I tried to dig down into the tabbed categories, looking for a cheap Nokia 6310 cell phone, I ended up at a page that seemed quite different to the camera page. No links to epinions reviews (which I really wanted) and the "Read full description..." link took me to the vendor's page, not a generic (and therefore more trustworthy) page on shopping.com. That was a downer and, if repeated on many other comparison pages, would reflect possibly the biggest problem with the site - not enough product descriptions provided by shopping.com itself.

Of course, if I've just missed something important here, that could well be a load of old crap. :) Hey ho.

24 Sep 2003 | Eliot said...

I found "type your zip code in the orange box" confusing - given that there's an orange search box at the top of the page.

The Schoolbook font gives me the heebies.

The homepage has a blank top margin.

The square-cornered tabs look kind of dorky.

Otherwise, very usable and directed.

02 Dec 2003 | alicante said...

Cool site

02 Dec 2003 | lamparas said...

Hello from Spain

28 Nov 2004 | click said...

2049 Very well said chappy.

31 Jan 2005 | compatelius said...

bocigalingus must be something funny.

Comments on this post are closed

 
Back to Top ^