AIAIO: Our Blog

AIAIO: Our Blog

The pulse and reviews of Alexander Interactive

Archive for the ‘UX’ Category

Top 10 Strategies for Next-Gen Ecommerce

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.

    steiner_like_button.png

  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.

    wrangler.png

  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.

    lowes_sunnyville.png

  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 TypeKitga.png

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.

Design

The (immediate) demand for evolving your website strategy

prada-site-on-the-ipad-525x393.jpg

PSFK has published a report (disconcerting, damning or riotous, depending on your station) showing that many top luxury brand websites don’t function on the iPad. (That image above is the Prada home page.) Given that Apple buyers are often luxury product consumers, this is a glaring omission for some of the world’s strongest brands.

The iPad is a reminder that the web is now rapidly moving away from the “build a website, let it run” strategy. A growing diversity of web-enabled devices is going to force companies to build websites that make usability the prime directive. The direct problem is the use of Flash, but the real issue is the lack of universal accessibility.

The growth in broadband mobile networks has led to rapid adoption of web access by consumers. Smartphones are nearing 20% of the American cellular marketplace and are expected to reach 30% soon. Ai clients saw growth in mobile traffic as high as 600% over 2009 alone.

The iPad is the latest and most profound bellwether in this usage shift. Contemplating how to service users with 1.5″ BlackBerry screens was one thing; dealing with iPad users, with their 1024×768 screens and just-like-a-laptop-only-better expectations, is entirely another. And while the iPad may be just a first step in an evolution, a million unit sales in a month suggests someone found the keys to the steamroller.

Computers are not going away; manufacturers shipped 68 million of them in 2008 alone. More important is the fragmentation of the marketplace, which, years after homogenizing almost entirely in Internet Explorer for Windows, is now an open landscape. Four different browsers have substantial (greater than 3%) market share. And dozens of devices are now displaying web pages in displays ranging from 320 to 1920 pixels in width, both with and without Flash.

The requirement for 2010, then, is to adapt to the fragments. Good websites need to actively identify visitors’ platforms and deliver user-centric results–not just the Amazons and Facebooks of the web, but the many small- and medium-size sites that encourage exploration and engagement. As platforms continue to diversify, creating flexible, accessible sites is a must.

Reblog this post [with Zemanta]
Gadgets

Facebook Goes Distributable

On Wednesday, Facebook CEO and President Mark Zuckerberg unveiled the next step towards a more socially integrated web at Facebook’s f8 developer conference in San Francisco. Facebook’s latest release includes open APIs and a suite of plugins aimed at making third party web sites more personalized and social.

With very little coding effort, sites will now be able to import experiences and interactions once limited to within the confines of facebook.com. Examples of these distributable features include a web-wide “Like” button and contextual activity feeds. These feeds will show which of the user’s Facebook friends have viewed an article or product, and offer recommendations based on friend activities. Sites like Yelp, CNN, BuzzFeed and Pandora have already integrated the new Facebook functionality.

facebook_1.pngFacebook’s “Like” button integrated with an article page on Buzzfeed. Clicking the button automatically updates the user’s Facebook Wall and their friends’ activity feed.

The implications are astounding and limitless. And the importance to business owners is multifold: users will be more likely to treat sites as destinations if they can accomplish socially-oriented tasks without leaving the site. This will translate into longer visits; more exposure to content and products; and an overall richer experience for the user. Furthermore, from a business perspective, the new functionality is so easy to implement that it will save countless programming hours.

Ai immediately incorporated the “Like” button feature onto the product pages of one of their premier clients, Steiner Sports. Now, sports-fan Joe Smith in New York can browse steinersports.com and click “Like” on everything that catches his eye-from a Derek Jeter Autographed Baseball to a World Series Autographed Locker Room Hat-and his cousin in Talkeetna, Alaska will get a real-time idea of what Joe might like for his birthday in two weeks.

Facebook’s latest effort to deepen the social experience on the web represents a significant step forward in creating a tighter internet, where users will be presented with recommendations from friends they know and trust on any site they visit. For customers and businesses alike, the new Facebook feature is an instant wishlist, registry, recommendation tool, and will become a powerful indicator of social and marketing trends.

Reblog this post [with Zemanta]
Business

The ROI of UX: Continental Airlines

I booked a flight to Austin for SXSW Interactive on Friday. Thanks to delays in planning and confirming my travel, I paid handsomely for the privilege: $674 for well-timed nonstop flights on JetBlue.

It didn’t have to be so pricey. For $419, I could have flown on Continental Airlines instead. But Continental’s booking system so frustrated me that I spent an extra $250 to fly another airline.

Some background: those who know me personally are aware that I don’t much care for Continental. But I’m also not one to splurge needlessly, so when I found out Continental’s EWR-AUS flight was a third cheaper than JetBlue’s JFK-AUS route–at similar times, on bigger planes–I figured I’d give Continental another shot.

I used Continental’s online reservations system to select my flights, then proceeded to the seat selector, which showed each flight at around 85% full. The return flight’s seat map (click to zoom):

roi-of-ux-continental.png
The situation was the same each way. The flight had 15 seats available. Continental had declared all of them Premium Seating, even several middle seats, which meant I couldn’t sit in them. But the plane had no other seats available, which meant I’d be booking without a seat assignment.

More background: I’ve traveled enough to know that the guy with no seat assignment is the first to get bumped in case of overbooking. Continental had seats but wasn’t offering them to me. Worse, Continental didn’t have an alternative, just blocked, empty seats.

I understood Continental’s desire to hold good seats for its good customers. I’ve had preferred status on and off in the past and I respect the privileges that come with frequent patronage. But with the rest of coach filled, I couldn’t figure out why Continental wouldn’t give me an empty seat and confirm my travel. Besides, the map confused me: is seat 7B really a top choice of elite frequent fliers?

So I called customer service for help. The friendly Southern woman who took my call confirmed what I was seeing: yes, there are premium seats available; no, you can’t have them. I asked if I could pay extra to reserve those seats: no. I asked if I could get a seat assignment, any seat assignment, so I knew I would make it on the plane: no.

I eventually gave up my attempts to cajole customer service into helping me, and after a few hours of deliberation, I took my business elsewhere.

The user-experience takeaways here are twofold. One is pure information design: don’t share information that’s not actionable. All Continental achieved with the seating chart above was to drive me crazy, showing me that it had seats–some of them rather mediocre seats I’d typically avoid–that I couldn’t reserve. Had they just shown them as unavailable, by having me log in with my (non-elite) OnePass account before selecting seats, I’d have been far less frustrated.

The other, of course, goes to the heart of customer service: sell your goods to shoppers who desire them. Continental lost my business because corporate policy dictates that the booking system has to be ready to accommodate a dozen Elite-status fliers who might want to fly between Newark and Austin on a pair of weekday flights that arrive close to midnight. Why not acknowledge the demand curve and give a paying customer the seat assignment he needs to book his flight?

Even better, why not implement a policy that generates both revenue and customer satisfaction? Many airlines charge for preferred seating. Continental could have levied a $100 fee on me for its premium seats, and I’d probably have paid it, because I’d still have saved money over my JetBlue option.

Instead, I’m back on JetBlue, where I’m willingly overpaying for peace of mind and a guaranteed seat. Oh, and satellite TV in a leather seat with good snacks. Happy jetting.

UX

Coming on too strong

GrokDotCom has a nice writeup of a too-eager lead-generation strategy on rent.com. Try too hard, ask for too much too soon, and instead of securing leads, a site just scares people away.

I like the post’s takeaway, which summarizes things well: “Remember, it’s not about you or your sales process. Your visitors are volunteers in the process and are coming to your site with motivations and intent.”

Whether on a home page, a product page, or deep into checkout, visitors have their own reasons for being on a website. The site can only do so much to steer those users into a set action. Don’t try so hard! Give people accessible options and let them do what works for them.

Ecommerce

Duane Reade, testing customer loyalty

Duane Reade introduced a new rewards program today. I happened to be in a Duane Reade this afternoon, where the cashier swiftly upgraded me to the new system and gave me a thick coupon book for my loyalty.

The pharmacy and quick-shop chain is promoting its new program, Flex Rewards, as a consumer-friendly upgrade. They cite the new system’s non-expiring reward points and paperless redemption as the main improvements.

Which is great, until the consumer finds out the real meat behind the change:

What Rewards will I receive?
You will receive a $5 Reward for every 500 FlexRewards points earned.

The old Duane Reade Dollar Rewards Club offered a one-point-per-dollar system that was blissfully simple: spend $100, earn 100 points, get $5 in store credit. It was simple and useful enough that I actually kept my rewards card handy, and I earned a handful of redemptions.

The new program is more confusing and far less valuable. Consumers now get two points per dollar spent and the same $5 reward now comes at 500 points. Or, in layman’s terms, after $250 spent rather than $100. Earning the five bucks just became two and a half times as difficult.

Flex Rewards also has a couple of gimmicks in the system, such as SuperSaver, which encourages customers to not redeem their points in exchange for bonus points back when they finally spend the credit. It’s a cash-back system that feeds itself.

If any of this has heads spinning, I suspect it’s by design. Duane Reade has devalued its loyalty program by a minimum of 60 percent. It cloaked the bad news in technical upgrades and new schemes that try to divert attention away from the devaluing.

With Flex Rewards, Duane Reade stands to give away a lot less value in 2010 than it did in 2009. If I had a stake in the company, I’d be pleased with the new program. As a regular Duane Reade customer, though, I’m probably just going to stop using my card.

Branding

UX Critic: Time Warner Cable DVR

Earlier this fall, Time Warner Cable introduced a grand new interface for its digital cable offering. But in its efforts to add features and visual flair, Time Warner Cable managed to worsen many of the features that previously made its system so easy to use.

TWC began by breaking some of the functionality. Not all of it, but enough of the essentials to drive one crazy.

Like the screensaver, for example: on my unit, at least, the blackout that kicks in after pausing for 15 minutes doesn’t actually black out the sidebars beyond the 4:3 screen width. Oops. Good thing I don’t have a burn-in-susceptible plasma TV.

Or the rewind, which, on higher speeds, snaps forward when play is pressed. Forward! Why? I find my self re-rewinding over and over again.

Worst of all is the 10-second back button, which used to be my single favorite feature on the old TWC remote. Missed a sentence? Pop! Hear it again. Click twice to create an at-home instant replay during a sports broadcast; click three times to watch a commercial from the beginning.

For some reason, this button, while still jumping backward, no longer does smooth 10-second increments. Often, the first click only runs back two or three seconds, which is basically useless. Press twice and the system picks what feels like an arbitrary jump-back interval. It’s now almost impossible to pinpoint a moment during playback without rewinding past it and waiting–not horrible in and of itself, but the system used to be perfect.

The list goes on. There’s no more “view this channel now” button in the program guide. No option to view extended program descriptions while in the DVR. Even the movie listings were rejiggered, so that the star ratings systems and year of release were moved to the end of the one-line summary, and directors are no longer mentioned.

Of course, TWC didn’t set out to break things; the company was trying to add features. But here, too, unnecessary problems were created. Introducing features into the current structure means rethinking the user interfaces, and not always for the better.

I was a huge fan of Time Warner’s old font face, which was narrow but easy to read (unlike, say, Adelphia’s narrow, non-anti-aliased displays). On the new TWC system, the fonts have been replaced with a more contemporary, wide font. It’s harder to read at a distance, and the increased width means program names cut off much sooner in lists.

On-screen cues that used to be straightforward have gotten more confusing, not less. TWC’s progressive rewind and fast-forward used to show an increasing number of arrows: >> >>> >>>>. Now, they’ve decided a number count is more useful. Only the number doesn’t appear until two clicks in, when it says “2,” not “3.” So >>> now renders as “>>2″ and >>>> now says “>>3.”
My TWC system uses a Scientific Atlanta remote that has three color- and shape-differentiated buttons: yellow triangle A, blue squre B, red circle C. And TWC’s old software made the most of them. Some examples:

  • In the program guide: A for show grid, B to sort by genre, C to search
  • In the DVR: A for saved shows, B for upcoming shows, C for series management

For this new release, TWC introduced features that pushed the number of options in the program guide and DVR past three. Rather than find ways to nest them, the entire functionality moved into a horizontal scrolling list, which is accessed with a series of arrow keys and a Select button. To find a show by title, I used to click Guide, then C; now I have to click Guide, then scroll right several times to Find Shows, click

Select, then scroll right to chose Search. The effort has been doubled, or worse, for many functions.

The new UI also has fade-in, fade-out transitions, which are a huge mistake. The system used to have zippy little central wipes that made screens feel like they were snapping to attention. In contrast, the fades make the system feel slow–the opposite of what I want when I’m channel-surfing.

I still like my Time Warner Cable digital television and DVR. But I enjoy it a whole lot less.

UX

Reclaiming Google search results

Give Me Back My Google (GMBMG) is a Google search gateway that strips out product comparison and affiliate sites from Google’s search results. (I think it’s old, but thanks to Daring Fireball it’s going to become a meme, so here we are.)

I’m wondering if this isn’t an easy way to clean up some of the content farm clutter in Google of late. The GMBMG site uses a pretty straightforward inurl Google parser that can be replicated for other searches.

For the record, these are the sites GMBMG filters out:

Kelkoo
Bizrate
Pixmania
Dealtime
Pricerunner
Dooyoo
Pricegrabber
Pricewatch
Resellerratings
Ebay
Shopbot
Comparestoreprices
Ciao
Unbeatable
Shopping
Epinions
Nextag
Buy
Bestwebbuys

UX

UX Critic: in-store returns

Here’s some smart CRM: Staples tracks in-store purchase history by credit card.

I recently found myself with a (rather expensive) box of printer ink for a printer I no longer use. The ink was not a terribly recent purchase, and I had no receipt for it. But I didn’t need it, and I knew it came from Staples.

So off to Staples I went, ready with my best pained eyebrows and apologies. Which were swiftly interrupted by the cashier, who asked, “Do you have the credit card you purchased it with?”

“I assume this is the card,” I said, handing over my American Express. She swiped it into her register, confirmed my name, found the ink in my purchase history and promptly processed my refund. No signature required.

This system must have taken much effort and expense on Staples’ part. But it’s so simple and rewarding, it deserves to be implemented elsewhere.

Business

Automobiles, personas and UX

The New York Times ran an article in its weekly automobiles section this weekend on Ford’s use of personas in designing the new Fiesta.
“ANTONELLA is an attractive 28-year old woman who lives in Rome. Her life is focused on friends and fun, clubbing and parties,” the article begins. “She is also completely imaginary. But her influence is definitely real.”
I read this with a smirk, because Ai, and many of our wise peers, use personas in web design all the time. Whether formal or informal, it’s part of the user-centric design process that defines our work.
Personas (a word the Times didn’t use) are depictions of typical users of a product or, for us, a website. They provide a brief but defining sketch of a hypothetical individual whose needs and opinions are crucial to a project’s success.
On complex projects, Ai crafts a robust personas brief. It defines the main demographic and psychographic users of a website, and allows our teams to think as our targets think as we do our work.
Personas are just as important on smaller projects. While we might not formalize our personas work, we place the users front and center in our discovery research, asking: who is this site targeting? And how do these people achieve success?
Ford’s use of personas is not remarkable–it’s sensible, and a promising sign for America’s last major automaker.

UX