The pulse of Alexander Interactive

Apple recently launched a nifty DHTML comparison grid to help customers find the best Mac for them. The comparison grid features drag-n-drop capability, so that you can compare items you might be thinking about side by side, as depicted below:

Let’s take things up a notch, using some comparison features Ai has implemented for our clients.

The first thing to deal with is the large amount of text describing the product specs. While detailed specs are great, quick scannability suffers with the way Apple has implemented them.  In order to make things more scannable, Ai would:

1. Move to a model where the spec definition is listed in the lefthand column, and checkmarks are used to indicate whether a specific model (column) has the spec or not.
2. Show more detailed information about a spec using DHTML expand/collapse widgets.

This quick addition of progressive disclosure of detailed information in the grid enables quick scanning of specs while still allowing users to get detailed information if they so desire. Check out the videos below to see how Ai implemented just this approach two different ways for Bizfilings:

View the live Bizfilings Comparison Grid and Product Comparison Screen

Next, let’s take Apple’s concept of DHTML drag-n-drop one step further. Several years ago, Ai implemented a sophisticated course comparison grid for Kaplan Test Prep & Admissions. This grid allowed the user to drag-n-drop to reorder, and also to add/remove items from the comparison grid. Check it out here:

One thing we could change now – the x’s to remove items from the grid can be presented on mouseover, eliminating some visual cruft.

Voila! Apple’s Mac comparison grid, Ai’ified.

Many sites have been doing some form of personalization for years. This often includes relatively “wide” customer segments like new vs repeat visitors, and relatively static discount or product promotions. Now imagine doing promotions that are customized with every page view, to the specifics of each individual visitor. That’s dynamic personalization. It’s the next killer app in ecommerce.

Dynamic Personalization

In a blog post a few weeks back, I wrote about dynamic personalization as one of the top strategies for next-generation ecommerce. Dynamic personalization is a hot topic at Ai, and our clients are leveraging it with great results.

Many sites have been doing some form of personalization for years. This often includes relatively “wide” customer segments like new vs repeat visitors, and relatively static discount or product promotions. Now imagine doing promotions that are customized with every page view, to the specifics of each individual visitor. That’s dynamic personalization.

What It Is

Have you ever been on Amazon and seen “customers who bought X also bought Y” after you added an item to your shopping cart?

That’s dynamic personalization. Specific product (or content) recommendations based on your unique behaviors. These behaviors include what you have browsed and searched for, the products you’ve viewed, your ratings and reviews (if any), and your purchase history.

How it Works

All these behaviors are compared in real-time with the behaviors of other shoppers.  The result is a match between things you’ve implicitly expressed an interest in, and the interests others have expressed. This type of dynamic personalization uses collaborative filtering, a fancy way of saying that it uses the wisdom of the crowd, and represents the most common method by which dynamic personalization works.

The D in Dynamic

As customers continue to visit a web site, browse and search, view products, and purchase, this data is fed into the personalization database. As the site owner adds products, content, and promotion, this information is fed in as well. In this way, the dynamic personalization system continues to evolve as it learns more about what is popular and relevant right now.

If a hot new toy is released, this product will come to the fore in recommendations as a result of customer interest. As it fades in popularity, it will be replaced by something more popular.

This adaptive learning and re-adjustment happens thousands of times per day without any explicit setup or maintenance. Additionally, the type of recommendation presented can be dynamically customized to the type of product displayed. Quantity discounts might be appropriate for cleaning supplies, but not for dvd players. Feature-based upsells and accessory cross-sells might work for a TV, but not for a book.

Why It Matters

A very small percentage of what you have available on your site is relevant to any one customer at any one time. Getting users to view what is relevant to them–making them aware that you have what they need, that they are in the right place and (by the way) there are other options they may not have thought of that are also relevant to them–is a sure way to greater sales and customer retention. Traditional methods of updating and optimizing your site through analytics and testing are great, but rely to a certain extent on guesswork and can be too slow to react to a trend.

Dynamic personalization relies on what your customers are actually telling you about what they prefer. If you don’t have the time to update your site thousands of times per day and provide live customer service chat to every customer, you should probably look into it.

Does this sound like you? Two or three generations into your ecommerce site, your business is decent but flatlining. You’re on top of your metrics; you know your RPV, conversion, AOV, and dropoff at each step in your funnel. But conversion and average order have stopped growing, and you’re ready to evolve.

Ecommerce is changing rapidly. Consumers are expecting more of your site, and embracing modern techniques can invigorate your business. We’ve outlined ten strategies you can use to supercharging your ecommerce efforts below. Be sure to come back in the coming weeks, when we’ll describing methods of implementing each of these concepts.

1. Dynamic Personalization / Collective Intelligence – Your site is collecting analytics data from thousands of visitors every day, and has been for years. How much of this data are you utilizing? Dynamic personalization puts it to use, immediately and with surgical precision. When a customer visits your site, even without logging in, within a few interactions a shopper’s persona is defined and business rules are applied to surface relevant content and functionality. Dynamic personalization providers include Baynote and RichRelevance.
2. Social Network Integration – Social networking isn’t exactly new, but social shopping imperatives are constantly evolving, as we described in our posts detailing luxury brands and iPad usage and possibilities for the new Facebook API. At the most basic level, integrating a “Share” button that allows users to share your content to their favorite social networking destinations is a good first step, as is integrating Facebook “Like” button functionality. At a slightly higher level of customization and effort, there are login integration and review/ratings integration tools such as Facebook Connect. Sites like Social Commerce Today stay on top of social shopping trends and provide more robust examples of retailers leveraging social shopping integrations.

   

3. Mobile Sites – Over the past year, Ai has seen massive increases in traffic and transactions completed at client mobile sites. The age of the mobile site is truly upon us. Mobile consumers have different needs than users browsing on the desktop, and mobile devices have their own set of capabilities and limitations. A dedicated, designed mobile site experience is a must for progressive ecommerce retailers.

4. Location-Based Tie-Ins -The GPS capabilities of mobile devices usher in a new era of exciting location-based cross-channel promotion capabilities. Examples include promoting products that were shopped-for online when the shopper is in proximity to a physical store, pushing promotions available at nearby physical locations, and providing interactive directions and pickup/availability notifications for shopped for items.

   Apps like FourSquare allow you to extend your reach by pushing promotions and specials and rewarding repeat shopping, all while extending your reach to a new customer base.

5. Experiential UI – Beyond simply being easy-to-use, modern ecommerce sites for innovative brands can be experiential and immersive, transforming shoppers into brand loyalists by evoking an emotional reaction.

   The Wrangler Blue Bell Spring/Summer 2010 site (warning: music/audio) is a great example of an immersive/experiential UI where the interactions are fun and reinforce the brand message. Lowe’s Sunnyville (warning: music/audio) provides a game-based metaphor for shopping for lawn and garden products and project planning.

   

6. Contextual Visualization – Shoppers increasingly expect to visualize how a product will fit into their life and style. Retailers who allow shoppers to visualize how products look on them and match with other products they are shopping for and already own will have a significant leg up in the ecommerce marketplace. The aforementioned Lowe’s Sunnyville site (warning: music/audio) allows you to “create your own yard” and see how various products will match your custom needs. The Laudi Vidni website allows to shopper to see their products on a virtual model, and takes the concept one step further by allowing robust product customization to suit a product exactly to your lifestyle and needs.

   

7. Dynamic Grid Expansion / Liquid Layouts -Ecommerce sites are typically designed to work in 1024 x 768 resolution in order to support users with older technology. Trapping your product display in this “fixed width” doesn’t cater well to the increasingly larger percentage of users browser your site at resolutions of 1280, 1440, 1600, yet most current e-commerce sites employ fixed width layouts. Utilize liquid layouts to dynamically size your product display based on the shoppers’ resolution. Alternatives include showing more images/product at once, and dynamically scaling to larger images on both category listing and product detail pages.As a corollary, Ai has found that the “view all” link is the most clicked link on the most ecommerce category listing pages. Shoppers don’t want to page through screens of products – they want to see all of it at once. Consider an infinite scroll metaphor in order to display large sets of products in a scrollable list, rather than asking shoppers to jump page-to-page. Ai implemented an infinite scroll on the PexSupply.com category listing pages. As you scroll down, you’ll notice the number of products on the page automatically increases, with no performance penalty.
8. Minimize UI Cruft – Shoppers come to your site to see your products, not your fancy navigation systems. Yet most ecommerce sites spend a majority of screen real estate dedicated to navigation and ancillary functionality, and a minority of real estate dedicated to product. Modern ecommerce websites will reverse the trend and dedicate 75% of screen real estate to show product, with 25% for supporting navigation, not the other way around.
9. Rich DHTML and AJAX - Dynamic HTML and AJAX technologies have been a boon to shoppers the world over. Instead of having to reload a page every time the shopper clicks, these technologies enable a world of rich interactions that are nearly instantaneous. While not new, most sites are still just scratching the surface of how to use these technologies in a robust manner. Here are some examples of how to take your DHTML into the modern era:
   • Mega Drop Downs – Mega dropdowns offer large panels that are easy to access, break navigation choices into logical groupings, and can feature dynamic or interactive content. Check out the Jakob Nielsen mega drop down article, featuring Ai-designed mega-drop pioneer Action Envelope. Also check out Ai-designed PexSupply.com and BizFilings websites.
   • Robust Wizards & Comparison Tools – Guiding shoppers to products that are relevant to them based on their needs and providing detailed, interactive comparisons between products can be taken to the next level using DHTML and AJAX. Check out Ai-designed Bizfilings Incorporation Wizard and Comparison Guide.
   • One Page Checkout – Why make your shopper click through multiple page reloads, when you can let them complete their purchase all on one page? Ai-designed Steiner Sports and Cache.com websites feature one page checkout.
   • Product Option Selection – Showing product availability in different option combinations (for example colors and sizes) is a common UI problem. Check out how Ai used DHTML and imagery on the Chelsea Clock website to display options availability by clicking change product options from the page linked above.
   • DHTML Kung Fu – Individually, DHTML techniques like promo carousels, tabs, scrollers, and other DHTML widgets can be powerful merchandising tools individually. Combined, they can allow you to take your site to new heights. Check out the Action Envelope home page
10. Get Textual - Designers have been limited to a handful of “web-safe” fonts since the dawn of the web, and have had to hardcode anything else into images, slowing downloads and making custom messaging and personalization difficult and time-consuming. Not any more. With the advent of HTML 5 and font serving technologies such as TypeKit, the web designers’ typographic palette has been opened up as never before. This isn’t just a design nicety, but rather a critical innovation that will allow savvy companies to deliver targeted, personalized message in brand-consistent ways for the first time. The impact doesn’t stop there – not having to use images for any custom fonts leads to faster page downloads and great accessibility of type to search engines and disabled users. Ai has used these technologies on sites such as General Atlantic and Internet Retailer (not yet launched). Alternatives include sifr, cufon, and TypeKit

Our focus thus far has been on strategies that are modern, or next generation. These assume you are building on a solid foundation of ecommerce best practices and test-based user interfaces. Consider the two “bonus” strategies below as necessary pre-cursors to the items listed above.

“Boring” Best Practices - Ecommerce best practices are a hot topic for a reason – they work. Ai has evolved a custom set of best practices for ecommerce over our past 8 years of experience, and applies these as the baseline of every site we work on. Yet some clients we’ve spoken to consider them “boring” and would rather skip right over to the sexier stuff. Our message is this: best practices work. We’ve seen far too many sites where the focus was too heavily on brand innovation or winning awards, and where conversion tanked. Make sure your design efforts are based off well-articulated and understood best practices for the site as a whole, and for each discrete stage in your funnel, from home page down to the checkout receipt.

A quick Google search will reveal an abundance of ecommerce best practices. Some good places to start looking are Jakob Nielsen’s Ecommerce User Experience book, and the Marketing Sherpa and Marketing Experiments web sites.

Test, test, test – Designing a best practices-based web site based on a deep knowledge of your customers and products is a great start. Integrating A/B and multivariate (MVT) testing into your process can take your site to the next level. At Ai, we have integrated testing into all of our design projects for the past few years, and have always seen measurable lifts in conversion and AOV. The kicker is that testing actually saves time and money by short-circuiting lengthy debate and review cycles.

If you are just starting out with testing, try Google Website Optimizer, which is a free tool with limited functionality. For the more ambitious, Omniture Test & Target provides a robust suite of MVT testing and reporting capabilities.

Integrating the ideas above into your ecommerce strategy will take your site to the next level. But how? Let Ai do it for you, or come back in the coming weeks as we delve into each topic above in more detail.