Designing for Ecommerce: The First Impression (Part 2)

Design a killer home page

A great home page equally caters to the power, recreational, and reluctant shopper (see Part 1).  Here’s how:

For the power shoppers

• The search bar should be large and visible and remain consistently placed throughout the rest of the site.
• The navigation should be clear and logical (we’ll get into how categories should be organized later on in this section)
• Because return customers tend to be power shoppers, this persona will be interested in new arrivals.
• For some types of products–like electronics or parts–power shoppers may need some assistance getting started in searching.  Consider including a “Getting Started” feature on the home page when a high level of knowledge is needed prior to even typing in a search query.

For the recreational shoppers

• Appeal to the bargain hunters with promoted sales.
• Include shopping guides that bring together items from separate categories.  For example, “Spring Trends” could include sandals, sundresses, cardigans, and accessories.  Or “Easter” could include decor, dinnerware, food, and gift baskets.
• Promote the best-selling items.  This is the ecommerce equivalent of the aisle endcap.  Because recreational shoppers are impulsive, they are attracted to popular trends.

For reluctant shoppers

• Place your contact information for customer service in a clearly visible area
• Clearly outline your shipping and return policy if it’s a unique selling proposition.  For example, Zappos includes their policy consistently across every page on their header.

Let’s look at some examples of home pages…

Zappos.com

Power shoppers have a multitude of options to begin their search: a search bar with a bright contrasting button, popular advanced search filters, a horizontal menu with the first level of categories, a vertical menu with subcategories listed, and an alphabetical listing of all the products’ corresponding brands. Return customers will like the New Arrivals box.

Recreational shoppers will be attracted to the “Sporty Chic” style guide and the “Swim Shop” collection.

Reluctant shoppers will go gaga over Zappos.  Note the blue bar promoting their free shipping and returns, 1-year return policy, and 24/7 customer service.  Also directly above the logo is a toll-free number for their customer service department and a link to the Live Help application.

YurBuds.com

This is a great example of a small ecommerce store with a big impression.  Because there are only 7 available items, this ecommerce site is not about the search process.  No search bar.  No categories.  No boxes with featured products, popular items, or shopping guides.  Yet, all 3 personas are appealed to:  Power shoppers can click on the item immediately to purchase.  Recreational shoppers can make their decision based on the “Technology” section.  Or if they’re not interested in purchasing now, opt to connect to the company via social networks.  Reviews from prominent trade publications and video testimonials appeal to reluctant shoppers.

Be wary of large image sliders on the home page

Select the appropriate layout on the home page.  Too often ecommerce home pages are dominated by large image sliders, pushing other important content below the fold of the page.  The large image slider is not for every online store.

Here’s how you decide: Answer the question “Do I have a large variety of products?”

Yes, we have a lot of products!

Search and categorization becomes your priority.  Shopping guides and collections of items should also be featured on the home page above the fold in separate boxes, reducing the screen width of your slider. If you opt to include a slideshow, feature specific collections of items relevant to the time of year or it should promote a seasonal sale.  Keep every item in the slideshow related; don’t skip around showing a sale on one slide, an upcoming event on another, and a branded image on the next.

No, we don't have that many products

It’s likely you are an ecommerce site selling one very specific niche group of items or manufacturer.  Your focus should be making your few products a​s alluring as possible to the potential buyer.  If you are a manufacturer, branding becomes more important because you are trying to establish a brand loyalty from the consumer.  Your image slider should include high quality, professionally shot photography.  You could even just have one, strong impactful static image like YurBuds to represent your brand image.  Include models similar to your target audience wearing or using the product.

Don’t be afraid to kill the slideshow altogether 

I’m of the personal opinion that the image slider is misused—a haphazard of unrelated, sometimes poorly conceived images whose motion distracts the eye.  Get rid of it all together and use that precious above-the-fold space for targeted content or one strong branded static image.  But don’t just take my word on the subject:  in test after test, the use of a slideshow has reduced conversion rates for ecommerce sites.

Overall, the design should never overpower the products.  The aesthetic of the design should match the products and the brand itself.

Maintain those first impression warm fuzzies. The initial impression of your home page as one that offers ease of use, updated content, and searchability should extend to the rest of the site experience.

Create a mobile optimized version of your site

It’s no secret I love to talk about mobile (4 Insights for Business about Mobile Devices from Google Analytics), (Designing Mobile Landing Pages).

Not only should your site be mobile-enabled (no Flash elements, users doesn’t need to pinch and zoom to see all your content), but your site should be mobile optimized.  Mobile users have different needs than desktop users.  They are power shoppers and go straight to the search bar when entering the site.  A mobile optimized site will include:

• A large, finger-friendly search bar first and foremost.
• A prominent “Find a store” button on the home screen if there is a brick-and-mortar store.
• A “Track my order” button on the home screen.
• Click to call for telephone numbers.
• Finger-friendly buttons.  UXMovement recommends a minimum 72 pixels wide by 44 pixels tall based on the average man’s thumb.
• Minimal amount of columns. With a small amount of screen space, you can’t fit that much across the horizontal space and still remain touch-friendly.
• Reduced image size.  Mobile users dislike waiting for giant images to load.  Use smaller versions of your product images on your mobile site.
• Touch-friendly image galleries.  Fully utilize the ability to swipe left to right as a means of navigating a slider.
• At-a-glance product pages.  Since mobile power users know what they want, lengthy information on the product page is cumbersome to the mobile user experience.  Keep info abbreviated and place additional photos, product description, reviews, and related products in collapsed accordion tabs.  Focus instead on making it easy to add the item to the cart.
• Finally, be sure that you include clear, explicit links from the full site to the mobile site and from the mobile site to the full site.

For large, popular ecommerce sites, many companies are developing mobile apps which include a more robust UI, added features, text alerts, and the ability to upload media from one’s phones (such as for product reviews or as a barcode scanner feature).  In one recent study, Jakob Nielsen measured a success rate of 76% when people used mobile apps, which is much higher than the 64% recorded for mobile-specific websites.

Keep your sales and specials fresh

Your sales should be fresh and applicable to the season.  Appeal to users buying:

• Right now (daily/weekly deals),
• In the near future (seasonal offers), and
• At any time (always free shipping).

To encourage return customers, offer a reward program.  Members accumulate points for bigger discounts and periodically receive exclusive deals.  With a members-only coupon program, you can also deliver personalized specials based on items they’ve purchased in the past.

Offer stellar customer service

First and foremost, your contact information should be clearly visible on every page, as should your policies for returns, refunds, shipping, and privacy.  Generally those are listed in the footer.  Keep each policy separate instead of bundling them as a general “Terms and Conditions.”

Include a variety of ways to contact customer service.  Live Chat functionality is a growing trend, but be fully prepared to properly implement it.  Avoid using Live Chats that auto-open on unsuspecting users.

Only having customer service available 8 – 5 EST is a huge hinderance to reluctant buyers; always consider contact options for customers in different time zones or those needing to contact you outside normal business hours.

Offer stellar customer service

First and foremost, your contact information should be clearly visible on every page, as should your policies for returns, refunds, shipping, and privacy.  Generally those are listed in the footer.  Keep each policy separate instead of bundling them as a general “Terms and Conditions.”

Include a variety of ways to contact customer service.  Live Chat functionality is a growing trend, but be fully prepared to properly implement it.  Avoid using Live Chats that auto-open on unsuspecting users.

Only having customer service available 8 – 5 EST is a huge hinderance to reluctant buyers; always consider contact options for customers in different time zones or those needing to contact you outside normal business hours.

If you can’t be around 24/7, reduce the need for users to pick up the phone call.  Include a comprehensive FAQ section that is periodically updated with common questions.

More and more ecommerce sites are finding innovative ways to offer instant customer service.  IKEA implemented Anna as an automated online assistant.  She’s basically an advanced search engine but with a perky smile.  She’s also programmed to hold simple conversations, like responding to “How are you?” or directing the conversation elsewhere if you are feeling mischievous.

Sometimes you can turn to your customer base to provide instant customer service.  Have you ever skimmed reviews looking for specific information, like “Is this air purifier good for removing pet odors?” or “Can I assemble this myself?” Enter the “Ask & Answer” feature.  Users submit questions specific to the product and other customers reply.  Sephora also has an active staff that monitor these questions and reply.

Create a personalized shopping experience

Recreational shoppers love this feature on ecommerce site, often resulting in the user returning at a later point as a power shopper.  Personalized functionality can include:

RECENTLY VIEWED ITEMS

Help customers keep track of what they’ve browsed through.  Last viewed items allow customers to compare items or return to a previous line of search if they’ve steer off their original shopping intent.

BEST-SELLING LOCAL ITEMS

This feature works best for when you have products that are very specific to a certain region or climate.  For instance, in January you may want to show Boston customers ice melters and snow boots, but Portland customers umbrellas and rain coats.

MY ACCOUNT

Allow registered users an ability to manage their orders and personal information, including the ability to:

• Change / retrieve their password
• Update and set contact preferences
• Manage payment options
• View past orders and have the option to reorder previously bought items
• Track order shipping
• Access information about return and refund policies