Breaking Down the New Detailed Image – Part 1 of 3

Now that the dust has settled a bit and everything seems to be going well with the new Detailed Image, I want to go back and dissect the project and discuss the major decisions we made and why we think they will help our business.  A ton of things go on behind the scenes on a large project like this.  When you’re on a tight time frame and a limited budget as we were, you’re forced to make some very creative choices that either may or may not work.  Nonetheless, it’s a very fun process that I think is worth sharing.

After outlining everything that I wanted to discuss, I realized that the information would be too much for one post.  I decided to break it up into three parts.  In the first, I’m going to go over the most important pages and the improvements we’ve made, with screenshots from both the old and new site.   I’ll discuss the overall design in one of the other posts, so for this post I’m going to stick to specific improvements on the particular page in question and leave the broad design improvements for later on.

Home Page

The goal here was to minimize the clutter, tighten up the page, and focus on the Daily Special, Monthly Specials, and the browsing/searching.   After all, the goal of the site is to convert sales.  Everything else is accessible, but not emphasized.  The contest and newsletter fill out nicely underneath the Monthly Specials, and we added a small rotating customer testimonial.  It only takes up a little bit of space, but testimonials do a wonder to relieve doubts of first time customers.  In time, we’ll add more of them in more places across the site.

Old:

Old Detailed Image Home Page

New:

New Detailed Image Home Page

Browsing & Searching

The first improvement was to the search engine.  We added autosuggest, which is a feature that I absolutely love on Google and Amazon.  We now carry so many products in so many categories, that having suggestions appear as you type helps you find the item you’re looking for without having to visit the search results page.  It’s populated with every brand, every category, and every item, with multiple spellings for each.  It re-populates nightly, but we’re able to add our own custom suggestions that are saved permanently.  If you do happen to do a search result where only one item appears, you’re automatically redirected to that item’s page, saving you a click.

When you browse a category or manufacturer from the left nav, there are a slew of new improvements.

  • We added the full product name and price.
  • All sizes are now displayed.
  • Packages are displayed alongside normal items (as opposed to being on a separate tab), with an auto-generated picture showing the highest priced item over a “DI Packages” background.
  • You can drill through products by manufacturer, sub-category, price range, and type (individual item or package), all without a page refresh.
  • You can change views:  there’s a standard view, an image view with larger photos, and -my personal favorite – a details view with bulleted information about the item (as seen in the picture below).
  • You can add an item to your cart and stay on the page.  A dropdown confirms the addition, displays the number of items in your cart and the total, and gives you the option to proceed to checkout (also shown in the picture below).

Old:

Old Detailed Image Browse Page

New:

New Detailed Image Browse Page

Item Page

Again, a slew of new improvements here.

  • More photos (on the old site we were only allowed one per item)
  • Sizes displayed alongside of each other, with the prices of each size clearly displayed.  On the old site, the size dropdown wasn’t very intuitive.  You can also switch sizes without a page refresh.
  • Quantity discounts displayed more prominently.  Before they were buried and pretty much no one found them.  We’ve seen immediate results on products that are great deals like our All Purpose Towel.
  • Bulleted product descriptions above the fold, with a link down to the full description displayed below.  We know that most people don’t read full text descriptions so we wanted a quick and easy way to convey the most important points of each product.
  • If the item is on sale, it is displayed prominently at the top of the page.
  • Packages and reviews were removed from tabs and instead placed below the bullets.  This was a judgment call, but we preferred scrolling to tabs (scrolling is more natural in my opinion).  This is in the mold of Amazon and the now-defunct Circuit City website.
  • Speaking of reviews, we show the two latest and then link to a specific review page for the product.  Many products already have 10-20 reviews, so it’s infeasible to think we’d be able to show them all on page.  We show the quick summary at the top that shows the percentage of reviewers who would buy the item again, and then the two recent reviews.
  • Upsells auto-generated based on the products that customers bought along with the item.  This is both easier to maintain and probably more accurate than the previous upsells, which we manually put in the database.

Old:

Old Detailed Image ONR

New (x3):

New Detailed Image ONR

New Detailed Image Leatherique

New Detailed Image All Purpose Towel

Packages Page

On the old site, package pages basically looked like regular items.  On the new site, we re-designed them to focus on the items included and how much the customer saves.  We also made the decision to again de-emphasize the product description, partially because we know it doesn’t get read, but also because we’ll be able to create packages in minutes if they don’t require a lengthy description.  Instead, the bullets for the individual items show.  We also don’t show the entire package in a photo, because the maintenance would be next to impossible (we’re constantly adding and removing packages and single items from packages, so photoing the items together would become overly tedious).

Old:

Old Detailed Image Porter Cable Starter Kit

New:

New Porter Cable Starter Kit

Registration

The only big change to our registration process was the inline form validation.  After you complete a field, we immediately show a green check or a red x.  We also check your email address to see if it is already registered, which saves time for people who forgot they already had an account.  Nothing worse than filling out the entire form only to find that out when you hit the submit button.  This is all done using javascript, but there is also server-side form validation for security reasons.

Detailed Image Registration Form

Checkout

Unfortunately I don’t have a screenshot of the old checkout page.  It’s a shame, because while it got the job done, it required a lot of scrolling and several steps.  We tightened it up so that every option is above the fold for most orders.  Address changes, shipping changes, coupon codes, and gift certificates are all done seamlessly using AJAX so that we don’t have to take the customer to a new page or do a page refresh.  We also allow customers to enter their credit card information right on the checkout page, as opposed to directing them to another page as we did previously.  Again, hopefully streamlining the shopping experience for the customer.

Detailed Image CheckoutThat’s all for Part 1.  More good stuff to come in Part 2.

5 comments on Breaking Down the New Detailed Image – Part 1 of 3

  1. nethy says:

    Adam,

    I am not a designer. I’m actually awful at design. Way below average. A few things I have picked up though that help me work with designers & managing design process.

    The most important is this: Emphasis is relative, not absolute. You cannot emphasise everything. You cannot emphasise a’ without de emphasising b’.

    That’s not a full story, but it’s not far. It is possible to increase the ‘total’ amount of attention a page commands. You can represent that ‘attention’ as “time on page” or “bounce rate” or “retention rates” (go measure that google) or whatever jumble of metrics want. But, to the unskilled, it’s not worth chasing that. You are too likely to do damage rather then good. Even to the skilled it’s a low return undertaking.

    Having items on a page that compete for attention tends to create noise which reduces total attention. There are tricks for doing better then average like taking into account the order which elements are noticed and read and creating flow. But most attempts will fail.

    The lowest hanging fruit is working out what is important, numbering it & creating a design (or in my case sending the number to a designer) based on that. Other then that, you may also need to send a ‘this site is a…’ message.

  2. nethy says:

    Adam,

    I just read that. Unskilled/skilled sounds really pretentious. Sorry about that. Just want to point out there is a trap there that you can fall into if you don’t know about it in advance.

  3. […] Part 1 I took a look at some of the more obvious improvements on the major pages of the site.  I think […]

  4. […] that I’ve outlined the majority of the improvements on Part 1 and Part 2, I want to take a step back and quickly talk about why I think this was a successful […]

  5. […] design and development process.  I think the new Detailed Image site is proof of that. I mean, we built a pretty awesome e-commerce platform from scratch in less than five months while still performing most of our day to day […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Commenting Rules

I'm honored that you found this post interesting enough to leave a comment. Before posting, I have a few ground rules:

  • Please keep your comments as relevant to the post as possible.
  • No personal attacks or any other nastiness.
  • Your first comment is subject to my approval.

Thanks!