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.
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.
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).
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.
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).
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.
That’s all for Part 1. More good stuff to come in Part 2.