AIAIO: Our Blog

AIAIO: Our Blog

The pulse and reviews of Alexander Interactive

Archive for the ‘UX’ Category

Redefining the Post-Mortem Meeting

Thinking back to my first time seeing the meeting subject title ‘Post Mortem for (insert project name that went horribly awry)’ pop up in my Inbox …I remember hitting ‘Accept’ somewhat reluctantly. My mind quickly concocted a visual of a mock funeral for said project, the people there didn’t really like the project, but they attended anyway…out of respect. Afterward they talked about a few good qualities, but mostly complained about it before going back to business as usual.

Yes, a little strange maybe, but that odd visual story in my head proved to be accurate for most Post-Mortem meetings attended in the years that followed. Different agencies, different projects, but they all usually played out in the same way. Typically, one of these meetings would be scheduled only after a project that was riddled with issues, blown budgets & missed deadlines. As for projects that went tremendously well? No need for a Post-Mortem, we’re awesome, go team!

Changing the Perception

Unfortunately, these after-the-fact meetings usually have a negative connotation attached to them. People attend with their backs up, ready to defend their role on the project, air grievances, and place blame elsewhere. Luckily, it doesn’t have to be this way. When it comes down to it, team members want the projects they take part in to be successful. Changing the perception of how a Post-Mortem is perceived is crucial to future success on projects with that specific client, and your company’s process as a whole. Enacting this change is done by focusing on the holistic view of how your company evolves its process over time, not just what they should have done in hindsight on that one project.

Below are the tenants that should always be top of mind for anyone planning on conducting a Post-Mortem successfully. If you stay true to these items, your team will start to view these meetings as a beneficial aspect of the project and you will see the improvements in future endeavors.

1) Keep the meeting structure simple

There are quite a few meeting outlines that exist out there, but they all really break down into five main components. At Ai, the following structure for Post-Mortem meetings has proven very successful.

• What has been working?
• What has not been working?
• What was painful but necessary?
• What did you learn about working with this particular client?
• Any recommendations that we should implement into future processes?

This breakdown requires the team to begin with positive aspects of the project, and end with forward-thinking process improvement ideas to help set an optimistic tone and shift the perception away from the negative. It’s tempting to gloss over everything but that pesky second bullet, but it is so important to make sure all aspects – good and bad – are discussed.

2) Ensure the attendees are prepared ahead of time

By nature, Project & Account Managers are organized. Keeping the client happy, the projects successful, and the team working efficiently is par for the course. This includes getting your Post-Mortem meeting outline in order. But these goals are not always the main focus of the team members executing the deliverables. They are focused on their daily tasks at hand, whether it involves getting a Strategy Recommendation out the door, or the third revision of creative done in time to hand off to Technology. Basically, people are busy and this could fall low on their list of things to get done.

To sidestep any probable delay in receiving feedback, send out a list of questions to the staff at least one week before the meeting. Put a reminder on their calendar, asking them to send responses by a specific date. This forces team members to really think about the answers. If you ask people to physically type out their feedback, you will find the content will be more pointed & specific. People will instinctively recognize in their bulleted list what is legitimate, and what is just whiny.

3) Time It!

The recommended time for a Post-Mortem is no longer than 1.5 hours. Sometimes this can be difficult, especially if there are too many missteps to count. The organizer can sidestep this by identifying overlapping problem areas received in the initial feedback and integrating them into one focus point. Each bullet point has a specified time allotted and, once you reach the maximum time for that item, assess whether it is necessary to schedule a follow-up meeting.

4) Introduce the Mini-Mortem

A few months ago, a PM was trying to see what she could do to correct a list of growing issues on a hectic project…then a light bulb went off. Why wait until after a project has come to an end to course correct issues and highlight achievements? By placing a ‘Mini-Mortem’ at the halfway point of the project, the team as a whole was able to identify problem areas and pain points before the project is over. By providing them a means to voice these concerns and call out things they feel are working well, it allows the Account Managers ample time to refocus efforts where needed. Again, it’s important not to ignore the positive aspects, this is a great time to leverage what has been working well and build upon it.

5) Apply Lessons Learned To the Next Project

When Post-Mortem meetings occur after a project, often times whatever learnings are captured tend to be quickly forgotten. The information shared between coworkers during these meetings is on some level remembered, and corrections of previous issues happen organically, but this isn’t enough. At some point people will roll off and new members will transition onto a piece of client business. If tangible steps aren’t taken to capture the valuable information shared during a Post-Mortem, the ever important ‘Next Steps’ will never be implemented. When mistakes aren’t corrected, these meetings tend to be viewed as a time-suck. Why bother meeting if management isn’t going to fix it the next time around?

When a new piece of work gets underway, make sure there is time allotted to review the previous Post-Mortem notes along with the Next Steps from that meeting. Below is an example of one item that showed up on the whiteboard of a Post-Mortem, and it’s Next Step:

Issue:
“ Having multiple work-in-progress meetings scheduled with the client each week was great in that we got buy in on our ideas throughout the process, but towards the end of the project we needed less meetings and more time to focus.”

Next Step:
PM to check in with the creative team each Monday, at this time we will assess what WIP’s are needed that week. We will also shift the 9:00am scheduled time to 5:30pm to allow creative to be ready.

A Happier Team

By implementing the steps above, you will begin to shift the overall attitude around how the Post-Mortem meeting is perceived by your coworkers. So start changing the perception, assign next steps and hold the team accountable. Next time a new piece of work rolls around, reserve a slot of time to refer back to the items that came up in the last Post-Mortem. Make sure to highlight the good and bad, although correcting mistakes is crucial…touching upon what the team excelled at will boost morale and remind everyone that ‘it wasn’t all bad’.

And lastly…can we please change the name of this meeting?

Business

UX Critic: Highrise and LinkedIn

I am an unabashed fan of 37 Signals’ Highrise contact management tool. For concentrated, straightforward sales and CRM, it’s an ideal web app. Between notes, contact information and useful task reminders, it’s a key part of how Canopy does business, and by and large it’s a delight to use.

Today Highrise rolled out LinkedIn profile integration, a nice idea that they say has been regularly requested. But the implementation is cumbersome and disappointing to the point where I’m probably not going to use it.

Here’s why:

It’s reactive. LinkedIn profiles are only added to Highrise profiles once the user has pasted the appropriate link from LinkedIn into a text field in the contact’s edit screen. There’s no dynamic list generation, no scanning the LinkedIn database, and more importantly, no recognition of post-login URLs. Which means…

It’s cumbersome. For each contact, I have to go to linkedin.com, find the right individual, click through to his or her full profile page, and copy the public link off the web page to add to Highrise. Grabbing URLs out of my status bar won’t work, because Highrise can’t reconcile them. (I suppose one could just find public profiles via Google, but that doesn’t seem practical at all.)

It's David! No, it's Reid!It’s account-reliant. Despite the need to use public profile links, Highrise and LinkedIn require users to log into both systems to coordinate data. But:

It’s not relational. Highrise doesn’t care if you have connected with the people whom you access on LinkedIn-via-Highrise. It also doesn’t care about your accuracy. I had no problem, for example, dropping LinkedIn CEO Reid Hoffman’s LinkedIn profile onto my own Highrise contact page. This doesn’t much matter when it’s being manually updated, assuming the user is careful, but it’d sure be nice to hit the right David Wertheimer by cross-referencing company, title and location data between the two services.

This seems like a great idea missing some key integration points that would make it as practical and useful as the rest of the system.

UX

Amazon Redesign: A Small Step Towards T-Commerce

When it comes to e-commerce there is no bigger name than Amazon.com. So when the world’s largest online retailer recently began rolling out a redesign to a small segment of its users, there was no doubt it would make waves.

A recent Wall Street Journal report speculated that the new site foreshadows the debut of a new Amazon tablet, citing the new site’s simplified feel and larger buttons. But when it comes down to it, the redesign still falls short on some t-commerce fundamentals.

Navigation

The new homepage has a much cleaner, more modern look. The new silver navigation and heavy use of white space definitely feel more up-to-date, taking cues from the Dieter Rams/Jonathon Ive school of desaturated minimalism.  This change emphasizes elements like promo images and the count of in-cart items, but raises an interesting challenge for the strength of Amazon’s brand as the formerly omnipresent blue and orange color scheme has been relegated to near nonexistence.

The majority of the redesign efforts seem concentrated in the top navigation, which has been simplified and improved with larger buttons. The biggest improvement UX-wise comes in the form of a navigational flyout that swoops out of the “Shop by Department” button. The menu’s bold black text on a white background look great on both monitors and tablets and the grey text blends in enough to not be obtrusive. The drop-down also includes the sexiest feature of the redesign with its new images hanging out of the menu itself over the page behind it.

Another nice touch on the new navigation bar is the shopping cart button that shows products (with images) in customer’s cart upon being clicked.  This is very UX and t-commerce friendly in that it lets users peek at their cart without interrupting the shopping experience.

Site Search

One of the biggest UX changes for the site as a whole is the new search bar, which takes center stage as the focal point of the improved top navigation. For a retailer with products as varied as Amazon, making the search the primary focus is in many ways ideal for a t-commerce interface. The first thing users will notice is the new drop-down that appears when clicked/tapped, displaying daily deals with accompanying images. This is a great use of an “Easter egg” to save space on the page below.

The search functionality has room for improvement in its predictive suggestions. The selectable terms on the type ahead search drop-down are still quite small, making this feature is among the least tablet friendly aspects of the new site. Not only are the search terms too small to tap (especially if you have big fingers), but there are too many of them. On an iPad the type ahead drop-down falls underneath the on-screen keyboard. A more user-friendly solution would be to give fewer options with larger clickable areas., not unlike the daily deals drop-down.

Hero Images

The redesign’s most drastic changes are immediately below the top navigation. With the former category navigation buttons on the left consolidated to the top navigation’s drop-down menu, the page takes on a two-column layout that is very thumb-friendly for tablet users.  Everything seems clearly and intuitively divided into buttons that can be easily pressed with thumb or the other.

The main hero image has been completely changed with the new look. The old Amazon has one hero image touting the latest Kindles. The new hero area has two stacked promos with slider navigations that allow for 13 total options. While one hero may not have been enough for Amazon’s merchandisers, 13 is a bit much to digest,  resulting is a sleek and navigable but unrefined hero scheme.

T-Commerce Shortcomings

When put into portrait orientation on a tablet, the new site is just as unusable as the old design. Throughout the site a vertical format yields pages too wide to be read or navigated without zooming in, resulting in minuscule pricing values, unreadable reviews, and effectively invisible calls to action. An ideal solution would be dynamically flexing this layout to pare down some of the horizontal elements when in a portrait orientation (e.g. dropping a row of five suggested products to three).

Another t-commerce question mark hanging over the new Amazon is speed. In Ai’s testing, page load time was significantly slower on the new site. This could be a real barrier to entry for some tablet users. The new promo images are undoubtedly pretty, but taking longer to load could end up hurting the bottom line.

To be truly tablet friendly, Amazon will also need improved product pages. Seemingly untouched by the redesign, the current product pages force tablet users to squint and swipe as they poke around for buttons taking them to some of their most desired links. A product page redesign (which could be just over the horizon) could solve this by corralling cluttered text into concise links and collapsing unnecessary information out of sight.

Improving T-Commerce UX

While the new design is definitely a welcome update, it definitely not a huge improvement in terms of optimizing the site for t-commerce. The minimalistic design makes for stronger visual cues in important areas of the site, but if users need to zoom in on areas they can’t see those cues can quickly end up out of view.

For true t-commerce optimization Amazon should revisit the site’s user-interface on a tablet device. Making sure that tappable areas can accommodate larger fingers by limiting the amount of options displayed.

Using CSS3 media queries to adjust the layout of the site’s product pages and increase the tappable area within faceted navigation or mega drop-downs would also vastly improve the user experience.

Complex pages also could be reworked by moving elements around the page to match Amazon’s business and merchandising requirements by, for example, move product reviews above the fold on a tablet to emphasize user-generated content.

Truly committing to tablet UX also includes a commitment to gesture-based navigation where applicable, like giving users the ability to swipe and drag hero images to cycle through them.

The new Amazon.com is slightly more tablet friendly, but it is far from an optimal solution. The redesign is definitely a move in the right direction for t-commerce, but only a half-step.

For more on Ai’s approach to t-commerce, read Alex Schmelkin’s article “Make Way for T-Commerce”  in E-Commerce Times.

Written with contributors Ed Samour and Seth Whitton

Ecommerce

Make Way for T-Commerce

Originally published in E-Commerce Times.

Tablet commerce may be the new kid on the block when it comes to online retail, but as a recent Forrester research poll indicates, many online retailers are seeing that half of their mobile commerce transactions come from tablet devices.

Moreover, 7.6 percent of the U.S. population will be tablet users by the end of 2012, according to eMarketer estimates. So how should online retailers take advantage of tablet commerce? And should they do so right now?

It Starts With Your Existing Site

The key to implementing a successful tablet commerce (t-commerce) strategy starts with a retailer’s existing desktop site. Customers are already shopping with their tablets on traditional retail websites — but sites that were not designed for tablets may run into issues.

User interface elements that proved successful on the desktop may not work on a tablet. For example, mega-dropdowns and mouse “hover” behaviors do not translate well to a finger-based browsing experience: Users don’t generally drag their finger around the screen looking for hotspots.

Users Deserve a Tablet-Optimized Site

Tablets are different from mobile devices and should be treated accordingly. A troubling early development in t-commerce had a number of retailers redirecting tablet users to their mobile-optimized sites. This was a mistake, and is largely being replaced with retailers deploying tablet-optimized experiences.

There is a huge difference in screen real estate between tablets and mobile, and a t-commerce site should therefore have more in common with a traditional e-commerce site than an m-commerce one. The fact that many mobile sites were delivered first means that many retailers are not taking advantage of the larger screen real estate that is available on a tablet.

The t-commerce site should still maintain a sleek user interface while delivering substantially more information than an m-commerce site. As with mobile, the quality of content delivered must be commensurate with the quality of information on the company’s e-commerce site so that the user experience is consistent.

Moreover, the interface of a tablet is different than that of a desktop site. On a tablet, one doesn’t track clicks and mouse trails, but instead must focus on “smudges and swipes.” Multitouch functionality should be integrated into the site in appropriate areas, including 360-degree product photography spins and swiping through long product lists.

HTML5 Enables Rich Interactions

Technological developments have opened up possibilities that did not exist years ago. HTML5 offers site developers the ability to create superior, smooth user experiences, and it enables other must-haves for tablet sites, such as auto-suggest search bars and one-page checkouts.

At the same time, these technological advancements can pose significant challenges to retailers looking to develop a tablet initiative. For example, it is widely accepted that Apple(Nasdaq: AAPL) and its iPad are dominant in the tablet ecosystem.

As a number of retail sites still use Flash for certain interactions (which Apple does not support), the necessary migration toward the use of HTML5 technology can mean extra costs and delays.

It’s Not Just the iPad

Another factor to keep in mind for a tablet initiative is that even though the iPad is the dominant player in the industry, there are many other tablets, including the Samsung Galaxy, RIM PlayBook, Motorola (NYSE: MOT) Xoom, and others that run on Google’s (Nasdaq: GOOG) Android platform.

While they comprise a relatively small segment of the market, these other tablets certainly warrant additional cross-device testing of a retailer’s website to ensure compatibility.

Establish Goals and Watch the Analytics

As with all digital initiatives, analytics should be watched closely. Retailers must monitor the conversion success of their websites with tablet users, finding areas that under- or over-perform relative to their desktop-based shoppers.

Do your tablet users browse more then they search? Is this different behavior than desktop users? Just like on the desktop, testing is key. Retailers should experiment with multiple shopping experiences, allowing consumer usage patterns to shape the future of their tablet offerings.

It is also important to establish revenue goals for a tablet initiative. Tablets, despite the huge boom in recent popularity, may not yet be ubiquitous enough to warrant a huge initiative for all retailers.

Adoption of tablets is expected to increase 400 percent by 2012, based on eMarketer estimates, but it is important to keep in mind that this is a global statistic for a niche market.

Some may feel the need to be there first, others may want to wait and see. What is certain is that t-commerce is rapidly growing, and it must be considered an important piece of any online retailer’s digital strategy.

Happy swiping!

UX

The Evolving Web: Multi-Screen Patterns

At 7:15 the alarm on my iPhone goes off, notifying me that it’s time to wake up. I briefly check my email, waiting a bit for my mind to snap out of its drowsiness, and then pull myself out of bed. Today the TV in my bedroom stays off, but I flip on the set in the living room to catch the headlines and weather while I make some coffee. Next, I sit down at my computer to fire off a quick email I forgot to send out the night before, sync up the news articles on my Kindle for the commute and head out the door to work. I see seven different screens in my first hour; three more are waiting for me at my desk at work. This is my typical device-filled morning.

Our current technological environment plays host to thousands of digital devices. People move from one screen to another, increasingly expecting their gadgets to integrate into a consistent experience across all platforms. Because of this it’s becoming more important that businesses, app creators, information architects, designers, and code slingers take responsibility for providing their clients with strategies for a multi-screen playing field– thinking beyond the smartphone to other devices. But solely creating several applications and scenarios for each device won’t cut for much longer. It’s time for us to start thinking about the relationships between different devices and how people utilize and interact with each of them.

I recently had the opportunity to attend the BrandPerfect Tour NYC. Design consultancy Precious hosted a workshop exploring several multi-screen patterns, the context of the user, and connections between devices. Their documentation of these relationships gives us a clear picture of current possibilities between devices and provide some great solutions on your next multi-platform project.

Gadgets

Cuttin’ Through the Clutta Like A Knife Through Butta

As the economy slowly pulls itself out of the recession, retailers are trying to connect with consumers in different ways.  Reuters reports that Best Buy is scaling back its trademark “big box” stores, focusing instead on “mobile” retail locations and bolstering their online presence.  However, The New York Times reported last week that many brick-and-mortar stores are back to embracing size and clutter.  While piling up the goods may be great for B&Ms, this strategy usually fails to translate in the expanding ecommerce world.

Online there exist far better strategies for engaging consumers than drowning them in a sea of digital clutter. We advise our clients to embrace simplicity, proven behavioral strategies and technology like dynamic personalization. Few if any brick-and-mortar stores can make quick, store-wide changes like what can be done online.  Digital optimization strategies allow our clients to take risks and experiment with their online offering, to adjust quickly based on real-time feedback, and then to experiment some more.

We have empowered many clients with this strategy, and it works.  For example, our de-cluttering redesign of PexSupply resulted in a 33% jump in conversions, and 45% increase in total orders.  Take a look at the difference after the break.

Business

Amping Up Apple’s Compare Grid

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.

UX

Building for present vs. future usage

We often state internally that “this year is the year of mobile.” We’ve been saying it since 2007–“2008 will be the year of mobile!”–and with the continued insurgence of Apple’s devices, 2011 may be the year we’re finally not ahead of the curve.

Part of predicting mobile, though, is in properly forecasting and anticipating use. In just over a year, our clients’ sites have seen mobile traffic trend from 1-2% of visits to 5-10% or more. (One colleague I’ve spoken with has a remarkable 32% mobile share on his informational website.) How well could that have been foreseen, and at what level is mobile adjustment important?

I’m on the record as saying mobile accessibility has become crucial, not unlike supporting legacy systems on the trailing edge of site traffic. I rallied for Mac support when Apple had 2.5% of the market; I insisted on supporting Netscape 4.7 until Netscape itself stopped supporting it; I forced Ai’s developers to accommodate IE 6 as recently as last year. With mobile traffic surging toward and past 10% of total online usage, having a site not load in iOS or Android is simply not an option.

Mobile access chart, souce: eMarketerHowever, that doesn’t mean the world is flocking in its entirety to mobile. Today eMarketer shared great mobile usage statistics that pegged 30% of Americans logging on via mobile more than once a week. Yet that same graph also noted that the majority of respondents, 58%, don’t use the mobile Internet at all. And two-fifths of that group doesn’t even have a web-enabled mobile device.

While we all push toward a mobile world, taking the late majority into account is just as important as embracing the early adopters. The greatest retail app in the world won’t make a difference if its target demographic won’t download it. Planning for the future, however, will.

Give the leading segment the access and utility it craves while maintaining a more traditional presence for everyone else. That will ensure across-the-board customer satisfaction–and position a site for the inevitable shift to a mobile majority.

UX

12 Tips on Creating a Safe Online Customer Shopping Experience

Black Friday, Cyber Monday, and the following Thursday are just days away… Holidays are right around the corner. We’re not looking to change the world here at Ai, but we do want to play our part in making this upcoming year a safe, secure and profitable one. That being said, have a look at an article I recently wrote which was published in the B2C Marketing Insider.

12 Tips on Creating a Safe Online Customer Shopping Experience

“84% of polled Internet shoppers don’t think that online retailers are putting enough effort into protecting customers” (Forrester Research, Inc)

The E-commerce holiday shopping season is upon us and online retailers are busy implementing new shopping features, social campaigns, analyzing their test results, and redesigning their funnels from browsing to checkout.

The experts are out in force: Focus on usability! Optimize your product page! Come up with brilliant holiday promotions! Study the shopping trends! Yeah! Yeah?

No. Don’t waste your precious and ever-dwindling time focusing solely on usability and Ui improvements. Bottom line: If you don’t have your customers‘ trust and confidence, you won’t convert–regardless of all the improvements that your testing results indicated you should make.

This holiday season, make it a priority to ensure that your site is providing your customers with the sense of safety and security they are longing for in their shopping experience. Use our tips below to ensure your customers spend their precious time deciding which product to buy from your site, rather than then if they should even buy from you at all.

Prominent Contact Information

Contact information should be prominent and in a consistent place within your header and footer so that your customer knows where to go when they have questions or encounter issues. Display both phone number and email address so that your customers can contact you in the manner of their choosing.

Privacy Policy

Include links to your privacy policy on all transactional pages. The ubiquitous footer link is a good place to start, but too often overlooked. On transactional pages, make sure you have it prominently called out in the body of the page, above the fold. Spell out pieces of your policy as needed. For example, when asking for an email address, state your email usage policy right next to the field. Best Buy says this perfectly “Best Buy does not sell, rent, or trade your personal information to third parties”. Clear, blunt and to the point. As it should be.

Don’t Hide Costs

Transparency in shipping costs and delivery times is key – especially come holiday season. Be sure to provide all of the actual costs up front, including shipping, handling, and sales tax. These can have an enormous impact on the final price. According to OneUpWeb, 95% of customers want to know the exact cost of the order before proceeding into checkout. There is no better way to put the kibosh on a potential sale than to withhold additional costs until later in funnel.

When the user can expect to receive their package is enormously important as well, especially to shoppers cutting it tight during the holiday season. Show this information as early as possible as well. This is actually a deciding factor when it comes down to those final few days. Shoppers are willing to pay a premium as long as you can provide them with the security that it will arrive on time, as promised.

Return Policy and Shopping Guarantee

Shoppers want to know what their recourse is if their item arrives and is damaged, the wrong item, or just simply not what they wanted. Be sure to clearly spell out your return policy so there won’t be any surprises later. Do you have a shopper satisfaction guarantee? Nice! Again, place this prominently above the fold, and inspire your shoppers with confidence that they can’t make a wrong or irreversible decision.

Anticipate Their Concerns

Be mindful of the various sensitive touch points throughout the purchasing process.  Address concerns before they even arise. If you expect your customers to share private and personal information with you, you need to address the reasons why you need the information at the appropriate times.

  • A “We 100% guarantee your safety” link right next to the checkout button, and in checkout header that leads to a DHTML popup with your 100% satisfaction guarantee inspires confidence and keeps the user in the funnel.
  • “We will not share your email with anyone.” next to email field lets user know you aren’t going to sell their email address.
  • “Shipping details” tied with product, in cart and checkout, makes user aware of costs and availability early and often.
  • You can always change your order later” when tied to a call-to-action removes some of the hesitation associated with doubts on whether to commit at that exact moment.
  • Don’t be afraid to invite phone calls. A sale is a sale. Including “Prefer to checkout over the phone? No Problem. Call us at…” at the top of your checkout give shoppers a sense of security even if they don’t plan on calling you.

Apply the Human Touch

Ten other sites may sell the same product, at the same discounted price, and have the same safety features in place. Differentiate yourself by emphasizing a personal touch and telling your shoppers that you completely understand their concerns. Give them that warm and fuzzy feeling that they are in good hands by hitting the emotional aspects of shopping.

Using the right tone and personality makes a difference. It is comforting for a customer to see “Please don’t hesitate to call us with any concerns or questions. Your security is our sole priority.” compared to a simple link to the Help Section. Instill confidence in your customers by speaking to them like human beings, rather than unique visitors, throughout the shopping process.

Your “About Page” and Value Proposition

Part of converting the customer is making them feel confident that they are in good hands. The ‘about page” is an often overlooked part of creating a secure shopping experience.

Are you family owned? Are you quirky? Are you a huge company that started off with two people in a garage? Do you donate a certain portion of profits to charity? Don’t let “About Us” be one paragraph of fluff about commitment to selling great products. Shoppers will see right through this. Be yourself. Shoppers have a greater sense of confidence knowing that they are at a real store run by real people.

Make a Good First Impression

Visual design has a huge impact on new customers feeling safe. Shoppers will form an opinion of your company within five seconds of seeing your home page. Want them to feel safe, and not think you are a fly-by-night outfit? Invest in design. And it doesn’t necessarily need to be award-winning, gorgeous visual experience. The site’s design need to give an instant sense of credibility and trust to visitors. Even though customers may not be entirely conscious of it, good design inspires confidence.

Performance & Stability

A slowly loading page, a site that’s down, or obscure programming error messages can raise instant doubts in the shopper’s mind. It is likely they are in comparison shopping mode, so if they were to leave one site and arrive at a site that loads slowly, or not at all, then the experience comes to a quick end. If they see errors and messages they don’t recognize, they will doubt your professionalism and whether their information is safe on your site. A solid technical implementation is as important as a great design.

Badges, Tigers and Seals Oh My

Seals of approval from TRUSTe or Better Business Bureau Online are widely recognized, but remember that a seal is only a graphic; it can be counterfeited. To be sure, make sure you link to the certifying agency’s site that profiles the merchant information. Also, avoid the Times Square approach putting eight different seals on your site. It diminishes the effectiveness. If you really feel the need to bombard 8 seals on there, all I ask is that you use the animated graphics. At least your savvy visitors can get a laugh.

Sweat the Small Stuff

Be sure your site has been thoroughly reviewed and that there are no misspellings or grammatical mistakes. They may seem tiny, but they will immediately cast your professionalism in doubt.

Security Through Social Validation

Social validation is a proven factor in influencing how people purchase products, and it’s no different when it comes to influencing why they should shop at your site for these products. Customer dialogue, reviews and interactions (regardless of what is being discussed) brings instant credibility to your site. People want to know that other people shop at your store. They want to see activity and not just take your word for it.

Now more than ever, privacy is a huge customer concern. Between Facebook privacy issues, Google ego-searching, and countless ads aggressively targeting hackers and screaming identity theft shoppers are only getting increasingly more sensitive and aware of the how, why, and when their sensitive personal information is used.

As online retailers, it is our responsibility to provide a safe and comfortable shopping environment for the customer, both online or off. The most successful businesses are able to instill confidence in their customers, and adding a relatable human touch. They develop a trusting, ongoing relationship with their customers to ensure repeat purchases and loyalty.Look folks, lets not forget – it’s the holidays! Do your customer and your bottom line a favor by letting them focus on giving rather than worrying. So you better be good for goodness sake.

Ecommerce

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