His take was that utilizing the PowerReviews branded “star system” gave customers a greater sense of trust because they recognized this review feature across sites.  From a design perspective, we maintained our point of view.  However, the bigger conversation prompted the questions what is the purpose of reviews and how much does it matter that they maintain their own identity in order to provide better reassurance versus fitting well within the site design.

Fast forward to this week and Google’s announcement regarding their deal with PowerReviews and the option for users to now select Ratings and Reviews as a filter when searching for products.  Internet Retailer estimates that PowerReviews currently works with approximately 1,000 online retailers and almost 3,500 websites.  With this type of adoption and now with everyone’s favorite search engine giant jumping on board, the question becomes should retailers stick with the “star system” PowerReviews provides and maintain a slightly separate identity from their site, or continue to try and brand these product review systems as their own?

Now take this back to the client we were discussing.  Does his average customer find this review system more credible because they recognize the PowerReview system on his site from other online stores and therefore finds these reviews more credible?  How does this help or hurt the overall branding of the site?  Does the online shopper really care?

As we have seen, eCommerce remains a constantly evolving experience.  But, despite the nature of change in this business, maintaining some familiarity is the key to adoption.  Just as we would never encourage someone to change the colors of some of the top assurance badges (because users recognize them), maybe there’s an argument to setting aside brand with Product Reviews and Ratings as well.

Sounds like a great testing opportunity if you ask me…

For this month’s Design 1, 2, 3, let’s take a look at a popular amusement park’s eCommerce Shopping Cart and see if it makes for a spectacularly speedy checkout.

1. Visual Heirarchy: What stands out on this page the most? A quick blur test (below) might help you.

Even though the company has managed to keep this page simple without a lot of distractions, the red, top navigation is drawing all the attention. It has a nice, subtle gradient on it that adds some depth. The rest of the page is mainly blue and black on white. No gradient, no shadows, no depth. The page feels very flat and my eye isn’t getting pulled anywhere. It lazily floats around the page. This is important because as a result, the “Checkout” button gets lost.

The Checkout button is the exact same size, styling and coloring as the “update,” “apply” and “continue shopping” buttons. When a user arrives on the shopping cart, it should be very obvious what the next step is, but on this page it’s not. This could be remedied by applying a subtle gradient (like the one used in the nav) to the checkout button and making it larger. It’d still fit the color scheme, but it would stand out as the more important button that it is.

2. User Confusion: As mentioned before, during the checkout process, the user should always know what the next step is. Well, if you’re buying a season pass from this site, you might be perplexed to realize that “continue” isn’t the next step. After tapping on the button several times, I thought it must be a dead link and I reloaded the page. Click, click, click, nope I still couldn’t continue. My confusion increased. Until after a few seconds of scanning I saw in bold, red, starred text: *Enter Pass Information. Hmm… I wonder if this is what’s stopping me from proceeding.

Sure enough, when purchasing a a season pass, the user must enter in their personal information before moving from the shopping cart to the checkout. There are several ways to smoothly transition the user to this step:

1. The continue button could be grayed out, so users automatically know that something is wrong. Better yet, the button could be grayed out AND their could be an additional linked line of text (next to the button) that says, “Before continuing checkout, users buying season passes must provide their information.” While “Enter Pass Information” was a nice attempt at this, it’s location and language doesn’t tell me this is an immediate and required step before checking out.
2. The best solution? When users are adding the season pass on the previous page, why not pull up a lightbox and have them fill out the information right then as a half-way step before they arrive on the shopping cart? Then no modifications would be needed on the shopping cart at all.

3. Usability: While I was writing this, my shopping cart session timed out. Okay, no big deal, this happens all the time. However, I was not expecting to arrive at this page (below). If you can’t read it, it says “Your session has timed out.”

I had no way to get back to the amusement park site, let alone my order or shopping cart. The page didn’t automatically redirect me or even provide a link back to the homepage. The page wasn’t even branded to the company, which only heightened my frazzledness about what had just happened and the security of everything. When I clicked the back button, I got back to my cart in tact, but whatever link I clicked still took me to this session timed out page. Being web saavy that I am, I played around with the URL, cutting off the timeout.htm extension, and going back to the root domain, and nope neither of those worked at getting me back to the amusement park site.

My point is — don’t do this to your customers. Online shoppers, web saavy or not, are bound to cause errors and go off the beaten path every now and then. Your site has to be there to hold their hand and get them back on task. A session time out in the eCommerce part of the site, should have redirected me to the general, buying tickets page. Even a simply branded Error Page with the top visited links on the site would probably be enough to get someone back on track.

Amusement parks might think they have a lock on consumers because trips usually rely on location. But don’t think that means you can provide a poor experience and expect a repeat visit. Make the best impression possible by providing them with an easy way to skip the lines at the gates by buying their tickets online. If you do, those single day passes might turn into season passes.

Mentioned in this Post
Homepage :: Hersheypark
(NOTE: I can’t link to the shopping cart because of the security, but do check it out.)

The Simple Desktop Background

You have undoubtedly come across some of the thousands of websites devoted to distributing desktop wallpaper images.  Visitors will find images ranging from scenic photos to unicorns in flight to abstract designs and everything in between.  After using many background images over the years I have come to find a trend among the ones that I particularly like: the simpler the better.  Backgrounds that have less visual clutter allow icons to stand out more and are easier to navigate.  They also make it easier to distinguish between layered windows and applications.  So what, you ask?  Well, the same holds true for web design.

Making Your Content Pop

When designing an interface that is meant to move the users eye from message to message, contrast is of primary importance.  Contrast can be achieved in many ways, with changes in size, line, hue, value, color intensity and so on.  To draw attention to the focal points of your design they must stand out against their background.  In keeping your site’s main background elements in the background by keeping them uncluttered and relatively subdued, you give your content a better opportunity to stand out.

Notice how elements such as the navigation, buttons, and text when placed on a subtle background stand out and draw the users eye in the eFootWear shopping cart:

On the flip side, the following site features a busy background which only serves to distract the user from the content rather than focus on it.  While this design is certainly over the top it illustrates the point well:

Of course there are exceptions to the rule here.  A busy background can serve to accentuate an uncluttered element that rests above it.  Such is the case with My Mascot where the content resides in a white container on top of a detailed wooden texture background.  This works because the contrast between the highly textured background and the flat white background makes the content rise to the foreground:

Remove the white container and the content fades into the background and the texture become the main focus.  Here you can see just how important the background can be to a design:

If you are a Designer this concept should come as no surprise, but it is helpful to see it in action outside of web design using your own desktop wallpaper as an example.  Even if you aren’t a designer you can experiment with this concept by playing around with a few desktop wallpaper images, both busy and subtle, and see how much of a difference it can make in usability.  Afterwords you might think twice before choosing that Jackson Pollock painting to “Set as background image.”

For this back-to-basics adventure, we’re going to Japan (figuratively.) Morphica is a stylish, minimalist home furnishings company. For the most part, their site is completely in Japanese. No, I do not read Japanese, and yet this language barrier doesn’t hinder my ability to shop their website. Why not? Because Morphica uses eCommerce best practices, and the beautiful thing about standards is that they translate across cultures and languages to focus on user behavior and expectation.

Take a look at their “Furniture” category page (above the fold):

1. The Product
All of the products are lined up in a uniform grid making them easily approachable. The image is a link and so is the blue text. Sure enough these links continue on to that image’s product page, exactly what I would expect to happen. The price is clearly displayed. On other pages, discounts are clearly labeled with pricing done in red and/or crossed out. Granted there is a line of plain text (not-linked) in Japanese that I don’t know what it is, but that is more or less irrelevant to me. All of the necessary information is available to me – 1. I know what the product is (image), 2. I know how to find more information about the product (link), 3. I know how much the product costs (price displayed). One point for best practices.

2. The Header Links
On nearly all eCommerce sites, there are a cluster of links in the top right corner of the site of the usual suspects: Sign-up/Register/Log-in, My Account, Shopping Cart, Contact/Customer Service etc. Morphica sticks to this best practices and has all the expected links in the top right corner. After a few clicks back and forth, I can decipher how to get to my shopping cart, log-in, search and get help. Again, there is an expectation of what those links should be from a user standpoint, and it’s good to meet expectation. The one thing I think they err on is the blue button in this corner. What page do you think it would take you to? To really adhere to eCommerce best practices, this button should go to the Shopping Cart/Checkout as that is what you (the business) really want to drive the user to do. On the Morphica site, the button actually leads to an account sign-up/log-in.

3. The Purchase
The image above shows a lower section of Morphica’s product page. Again, without being able to read the Japanese, it’s still very easy for me to get a grasp on what is happening on this page. The product is available in different colors. I can see the corresponding price for each color. There is also a drop down which is surely to select the quantity of items. I know this because the numbers run from 1 to 10. Had the numbers been 100 to 1,000 then I might become confused, but because the drop down was in the range that I expected, I can keep moving along and buy this product. After all of the product colors, there is one single black button for me to click. Sure enough this adds the product to my cart which is exactly what I would expect it to do. I expect it because of 1. It’s alignment with the price and quantity and 2. because best practices say to remove all distracting buttons (clear, reset, continue shopping, delivery etc.) from the “add to cart” button.

Hopefully, this month’s Design 1, 2, 3 helped you focus in on some eCommerce best practices and more importantly, why there are such. By following best practices, you’re putting your site in the best position to convert by meeting user expectation.

Mentioned in this Post
Category Page :: Morphica
Product Page :: Morphica

My guess? The marketing team, because they have charts and data and “direct consumer feedback” (i.e. conversion rate) on what sells. Unfortunately, it’s an unjust world, and rarely do shoppers ever contact a company to say, “I really loved that size chart diagram. It made it very clear what size I should purchase, so I did. You have a really great designer on staff.” (Unjust, it really is.) The creative team doesn’t get to take the same credit for success that the marketing team does. And sometimes, it can lead to turf wars, and the customer is the one who suffers. Usability and common sense are sacrificed.

Let’s take a look at a few missteps of a Home Furnishing website, and make believe some conversations that went on between the designers and marketers. And let’s see if we can’t propose a better
solution.

1. Call to Action
The original reason I went to this website was because I had gift card and wanted to check the balance. After three clicks I got to the right page where I could enter the card number and pin. Three clicks, because I took an accidental turn clicking on “Gift Cards” in the header, which took me to the Buy a Gift Card page. Interestingly, “Gift Cards” in the footer, is the correct path to redeem/check balances. Same verbiage arriving at different pages? Misstep #1.

But the bigger misstep, which I can testify to in my own frustration, is the image above. After looking from the card to my keyboard repeatedly to enter 16 digits and then 8 more, I put my hand on the mouse, glanced at the screen and clicked. And sure enough, I clicked on the wrong button. I got sent to the homepage, and all my hard work to enter 24 digits correctly was gone. Back through the process I went.

And here’s how I imagine the buttons got this way:
Marketer: We want to make sure they know they can continue shopping.
Designer: They can use any of the side or top navigation to continue shopping. The button is unnecessary.
Marketer: But we need buttons to give direction.
Designer: On this page, what they should do next is check the balance.
Marketer: And then what? They’ll get their balance and not know what to do. Just add a button, you can put it to the side if you want.
Designer: Fine.

Solution: For starters, this page really doesn’t need the continue shopping button as the designer pointed out. It’s like a reset or cancel button, adding little value to the form, while adding a lot of potential frustration. The designer did everything right: the button is placed in the right position aligned with the text fields, it’s bigger than the other button. But the colors really throw it all off. If the “Check Gift Card Balance” was blue, and the “Continue Shopping” button was brown, I don’t think I would have clicked on the wrong one. Try the blur test on this one, if you don’t believe me. I understand the blue “matches” more with the site’s color scheme, but nonetheless, it’s so much more vibrant and it calls attention to itself.

2. Navigation Usability
My second frustration came once I actually started shopping on the site. This site has thousands of products as a result they have a very long side navigation with a three tier pullout menu. A very sensitive pullout menu. As I was browsing them, they’d disappear too quickly, they wouldn’t respond to my mouse, they cut off text, they don’t show what the original hover choice was, etc. And this isn’t a problem of my dexterity; the store even recognized a problem as they offer a “Turn Menus Off” link at the top. Rather than fix the problem, which would involve serious rethinking of the homepage and category page hierarchy and refinements, they just slapped a band-aid on it and said good enough.

The possible company conversation:
Marketer: We want people to see everything before they even have to click. Lots of hover action.
Designer: Well, lets talk about how to use all the real estate on the homepa—
Marketer: No. We just want some fly out menus that let people choose. And then we can use the homepage for seasonal banners.
Designer: The functionality exists to do fly out menus, but they can be troublesome from a development and customer perspective.
Marketer: If it’s possible, why are we even having this conversation? Do it.
–In the future–
Marketer: So people are complaining about the fly outs in the navigation. It’s too tricky.
Designer: Okay, let’s talk about changing up our navigation and homepage content . And the category page refinements—
Marketer: That’s going to involve too much time and money. Let’s just add a link allowing users to “turn off” the fly outs. Then everyone’s happy, right?

Solution: As mentioned before the best solution would be to rethink the homepage and category page hierarchy and refinements. Or go back into the code and rework the development so it works more smoothly—consider the benefits of click vs. hover. Or at the very least, reconsider how the products are grouped and displayed. There are some successful eCommerce sites that have multi-level navigation such as: Porsche, Mini Cooper, and The North Face.

3. Images vs. Information
While, I think this company almost got this right, it could still be approved upon. They sell three sizes of the same exact cutting board. They’ve displayed all three boards in a single product image. While this was a good start, they didn’t quite do it right. Notice the difference between the images below:

The original image shows the product, even if it’s a bit cramped with all those boards, without really conveying any information other than: there are three boards in this picture (which might mean there are three sizes.) While the image on the right (excuse my very quick rendering) clearly shows that this product has three distinct sizes, and gives the customer some perspective as to what those sizes are. The second image provides information in a way that is instantly recognizable.

Designer: Hey, I came up with this great new image to show off the product features.
Marketing: That looks good, but can it be done to all the products?
Designer: Well, not every product needs it, but we should do it for those that do.
Marketing: I’m worried this is going to make the products feel inconsistent. Plus, won’t it take a lot of time to make all those images?
Designer: Yes, but I think it’ll give the consumer the information in a more efficient and clearer way. It’s time well spent.
Marketing: Hmm… I’m not sure. No one’s ever complained about the images before… Let me get back to you on this.
:Radio silence:

Solution: I think this company’s mistake is mainly just having only one image for each product. You might think you don’t need more than one angle because your product is simple, but think again. If there are other ways to engage your customer visually, you should do so! Images greatly enhance the online shopping experience, we all know that, that’s why we have zoom features and color swatches etc. Don’t stop there. Customize those images to your company and products, and your consumers.

I apologize for the sweeping generalizations of marketing and designers teams that I’ve made. I’m just trying to poke a little fun at this. These missteps could easily be worked out if the two teams were on the same page about their end goal: increasing the conversion rate through good usability practices. No matter which side of the fence you’re on, remember that there’s always a good solution, a better solution and the best solution. Listen to both sides, and reach for that best solution every time. The time and money involved is usually worth it.

Mentioned in this article:
Homepage, Product Page, Gift Card Balance Page : Bed, Bath & Beyond

So, what is wrong with online shopping? According to Time’s writer, Brad Tuttle, there are seven main issues with online shopping and those are:

1. Price Inconsistency
2. Signage Inconsistency
3. Inventory Inconsistency
4. Coupons Game
5. Customer Service Inconsistency (seeing a pattern yet?)
6. Delayed Shipping Cost Information
7. Creepiness of Being Watched all the time

To sum up points 1, 2, 3, 5: there is a disconnect between a person’s shopping experience at a company (for example: Target) when going online and when going to the brick and mortar store. Things like not being able to return an item to a store that was bought online; or a store not knowing about an online promotion; or stores only carrying certain products online or only in-store. This disconnect leads to a shopper’s confusion and frustration. (And in this rapid, online tell-all world we live in, one unhappy customer can really add fuel to a PR fire.)

However, my nit picky problem with Tuttle’s article* is that points 1,2 3, and 5 that focus on this disconnect are not eCommerce specific problems. They are real life, company problems. And to some degree Tuttle acknowledges this because in the beginning of the article, he points out that “Many of the problems seem to arise because the retail and online divisions of major stores are run by entirely different groups… and they seem more like competitors rather than players working on the same team.”

(*Tuttle’s article references the WSJ article where Paco Underhill secretly shopped offline and online and found several customer service flaws during his shopping experience. The main problem being that the companies weren’t syncing the two divisions.)

I just wanted to strongly point this out, because I feel like it’s misguided to bring up these points of contention in an article titled “What’s Wrong with Online Shopping.” Because again, these are not problems with online shopping, but of the company themselves.

However, Tuttle’s remaining three points are valid drawbacks to online shopping. The “Coupons Game” is starting to become a game that the user always loses. And it’s not helping eTailers any either. If you’re going to provide discount codes, make them easily accessible on the site—you don’t want your user abandoning the cart or checkout to go look for a coupon code on another site. Some sites have even gone so far as to put the most recent promotional code next to the entry box (see the image on the left).

Point 6: Delayed Shipping Cost information is actually a tricky one. It is always best to tell the user as soon as possible what the shipping cost is going to be. Because, although an eTailer may think the shipping is different from the order total, the customer does not. The customer just wants the bottom line: what is this order going to cost me. And you can’t expect them to go through the checkout thinking the order is $25, only to find out it’s actually going to be $31.99.

So, some solutions: Smaller eTailers can breathe a sigh of relief, usually having less products and flat rate shipping makes it very easy to calculate a shopper’s order as early as possible. But what if your business or products are shipped based on weight or shipping zones, and then add on the complexities and seemingly unlimited choices of expedited shipping. Many companies have added a shipping estimator to their shopping cart pages, so users can at least get an approximate answer to their order total.

However, sometimes the shipping, the price, the shipping time, the delivery dates, etc is just plain confusing no matter how much functionality is (or is not) included. And this is where a good designer comes into play. If you can’t provide the functionality for whatever reason to solve your shipping problems, at least make the problem very clear and identifiable to the user. This happens through good, clean, hierarchal information design. Don’t just throw paragraphs of text at the user to sort through (and don’t just copy the shipping policies/maps for USPS, Fedex or UPS.) Tailor your information and graphics to your products/business and to your users. Make sure the language used is clear: is the order being processed, shipped, delivered at any given time. For example, this speedy print website provides a shopper with clear instructions on when your order will be processed, printed, approved, shipped and delivered.

Tuttle’s last point, “Creepiness of Being Watched all the Time” relates to the NYT articles about how marketers are gathering information non-stop about a user’s online shopping experience. And generally speaking, it’s a little freaky. So much information is gained that, Don Batsford Jr. of Jackson Hewitt said in the NYT article, “It’s almost like being able to read their mind because they’re confessing to the search engine what they’re looking for.” Think about that the next time you Google. Information is gathered about: “identification about the customer, Internet address, Facebook page information and even search terms” all when you just use an online coupon.

The average online shopper doesn’t realize that someone (something) is recording all this information, and when they find out, their trust and privacy feels a little violated. I don’t know what the answer is to this, but would love to know what you think. Leave a comment below.

Your eCommerce team can only be strong if you’ve already aligned your business so that your brick and mortar and online stores work as one.

Mentioned in this post:
What’s Wrong with Online Shopping : Time

Shopping Scientist Paco Underhill Tackles Online Retail : The Wall Street Journal

Web Coupons Know Lots About You, and They Tell : New York Times

Shoppers Who Can’t Have Secrets : New York Times

Coupon Code : Macy’s

Shipping Estimator : My Mascot

Shipping Time Table : 48 Hour Print

1. Provide All the Information
I am impressed by how many websites don’t provide their menus or hours online. Checking a menu or checking the restaurant’s hours are the number one and two reasons why people visit a restaurant website. Oh, you managed to have a professional photographer take photos, upload them to the site, and write captions, but you can’t tell me if you’re open past 10pm on a Thursday night? Sure, I might call you to find out your hours, but not if I have a second or third choice for dinner whose websites I can skip on over to. And who really calls to ask about the menu? Do you really want your staff occupied taking these phone calls?

The point of your website is to give potential diners information. Yes, photos, history of the business and chef, etc. is all pertinent information, but it’s second tier when compared to the menu and the restaurant’s hours (and location). Don’t forgot to include this information, and don’t forget to make it easily accessible—hours on the homepage, and a link to the menu on the homepage. And if you must use a PDF for your menu–alert the visitor. Opening a PDF can crash browsers on older computers, and there’s nothing more frustrating than to click on a link and have a browser crash (a good reason to avoid PDF menus all together.)

2. Be Relevant
If there’s one thing the internet is good for, it’s up-to-the-minute updates on just about everything. This is why it is a cardinal sin to have a menu online that’s not in season. Okay, your menu changes daily, but you don’t have the time update the website daily, that’s forgivable. Just make a note that says, “Our menu changes daily, here is a sample of our typical menu. Please call us if you have any questions.” And don’t forget to date the menu with at least the season or the month. Don’t think because it’s not labeled, your visitor won’t know it’s old.

It’s nearly May, and on a nice day it’s almost 80 degrees F, I don’t want to be reading about pumpkin gnocchi in some heavy, cream sauce. Every chef and restaurateur spends hours, days planning a menu. Don’t let your menu do a disservice to your business online. Update it at least seasonally or whenever any major change takes place – including any change in price! No diner appreciates that little surprise, and it could even be viewed legally as false advertising.

3. Build Your Brand
Some restaurant websites go off the deep end when it comes to recreating the restaurant’s atmosphere online. While other restaurant websites look as though the owner’s nephew hacked together something in Microsoft Office. A restaurant website should absolutely reflect its company and branding through and through. And that usually means having it professionally designed. Do you want the owner’s nephew making your dinner? Do you want your online visitor to think he did? A fine dining establishment should have a refined and sophisticated website design. Even a low-key bar can create a cool web presence with a grunge design. The internet is your opportunity to reach an audience who might not normally step foot in your restaurant.

I’ve visited many restaurant websites, and granted I haven’t visited them all in real life, but at least I have noticed them. They are present in the back of my head as potential places to go for certain occasions. Or when someone else mentions how good the restaurant was, I can reply how good (or bad!) their website is! Your online presence stretches much further than just your patrons. Make sure it’s a positive one.

4. Keep Distractions Minimal
Oh the music. Restaurant websites love music and they love Flash. I like to think that when I walk into a restaurant your hostess isn’t going to scream at me. That’s essentially the equivalent of playing music when a site loads when I haven’t requested that music start playing. If you absolutely MUST have music on your restaurant site follow these rules:

Short music clips or sounds work much better than full songs on repeat. Eventually, what was a pleasant surprise (hopefully) becomes tiresome to the user as they browse your site for what they’re really looking for—information. Woodberry Kitchen is a site that chooses to play background sounds/music. I think the site would be lovely without it, but they chose smartly using background music – just as it would be in real life – to enhance not overshadow the website.

5. You Must Socialize
You’d have to be living under a rock to not realize that there is a food revolution going on in America. From eating healthier to eating local, from dressing up the simplest foods to simplifying the most expensive, from picking out a farm to picking a chemical reaction, from televisions shows to movies to books, the average American restaurant diner loves food. And not just the food itself but everything that it means. And almost more than anything, food represents coming together, socializing. If it’s appropriate to your brand (and it probably is) you need to be interacting with your loyal diners and potential diners online. You have to constantly remind them of your existence.

Through e-mail lists, Facebook, Twitter, Four Square and Yelp, you should be telling your customers about happy hour specials, giving loyal customers discounts and generally creating buzz about your food! Not to mention it’s an excellent way to monitor the good and the bad about your restaurant. I’ve tweeted about how much I enjoyed my entree at a certain restaurant during Baltimore’s restaurant week (as well as the great service I got!), I’ve also tweeted how I wish restaurants would have more/better vegetarian options. That was a direct opportunity for a watchful business to tweet me directly and suggest their vegetarian dishes. The other great thing about all this online socializing? Virtually all of it is available for free.

I hope this helps you avoid some potential pitfalls when creating a restaurant website. These are basic, but can easily get overlooked when the owner wants more “wow” factor or when the owner doesn’t give the site a second thought. Your restaurant website is a powerful tool to keep your afloat in any economy. Use it!

Mentioned in this post:
Meli : Provide All the Information
Joe Squared : Be Relevant
Clementines : Build Your Brand
Talara : Keep Distractions Minimal
Woodberry Kitchen : Keep Distractions Minimal
Miss Shirley’s : You Must Socialize

Below is the homepage for an autism education and support organization right here in Maryland. (NOTE: The logo has been removed for the purpose of making the critique more objective.)

And below are my 1, 2, 3 call outs.

1. Clutter. I quite like the three little people logo that they incorporate as part of their brand/identity. But I do not like how they have managed to throw these guys onto every piece of the website (see the red circles.) It’s as if their website is a waiter’s vest at TGIF. Hello, flair! Unfortunately, the website with the most flair does not win. In fact, they’ll lose in usability and design. My suggestions? Bring it in a notch. I think the little people next to the left side navigation is a fantastic way to integrate the brand into the site. But the people on the “Autism Society Chapters” or “Sign-up for e-newsletter” are purely decorative. Sure, they might be calling attention to various calls to actions, but because there are so many of people in so many places, there’s no visual direction. My eyes bounce from one to the next and as a result, I never stop long enough to take an action.
2. User Confusion. My guess is that those boxes are for an account log-in, the left box is for the user name or e-mail and the second box is for the password. The important part of that sentence is “my guess.” I shouldn’t have to guess, I should be told what those boxes are. When working within the online medium, it’s easy to forget that website visitors aren’t always tech-saavy. We shouldn’t expect them to know what something is/what to do with something, and we shouldn’t make them think to figure it out. This has a rather quick solution, place the words Username and Password within their respective fields. When a user clicks in the box, the place holder text will disappear.

   I’d also consider positioning it elsewhere on the page. It’s smack in the center and has bright white entry fields on a solid blue bar. A lot of attention is being drawn to it and that may be a bad thing. It’s taking much of the focus off the top navigation, which includes the donate link, so nothing should be taking away from that. The typical position for account log-in is the upper right hand corner of the page. It might not be as prominent, but it’s the standard location for it, and so visitors will still be able to find it.

3. Layout. The current homepage has a 3-column layout. With all the call outs on the left and right side of the page, the primary content is being overwhelmed. How can visitors really gain any of the information being provided if they’re constantly being pulled into the side bars. My suggestion would be to condense the two sidebars and change the layout to one navigation column on the left and one large content column. Figure out what needs to stay and what can be used as call outs on interior pages. Or consider using some type of flash/jQuery trick where the side bar call out rotates.

It’s unfortunate, that for all the good work nonprofits and not-for-profits do that they’re not rolling in the green. But because this is common knowledge they have the benefit of being able to find agencies that are willing to partner with them for a low cost or for pro-bono work. My suggestion to nonprofit agencies is to look for community partners to help you work on your online materials. The importance of a professional website is essential when asking for donations, providing a service and building/enhancing a reputation.

Mentioned in this post:
Homepage :: Autism Society

There were many great things in Montgomery’s presentation, but there were also many things missing (which is to be expected in a 30 minute overview). But I think it’s important to address what was missing from her presentation, what is missing from many discussions about building and testing websites, and that is the cost.

What Is Said
It’s funny how no one has a problem addressing the bottom-line of an eCommerce website (conversions), or the goal of redesigning/testing an eCommerce website (increasing conversions). But when it comes to discussing the cost of a redesign, cost of testing, cost of PPC, etc. everyone’s hush-hush. And people have their reasons for glossing over these details, but I still think it is our collective duty (as in-house creators or outside collaborators) to discuss redesigns, upgrades, etc. within a certain feasible framework, rather than in a vacuum where anything is possible.

For example, Montgomery mentions the numerous things her company did to improve the website: (among them)

• Implement Bill Me Later
• Improve Placement for e-Newsletter sign-up
• Improve Store Locator prominence
• Improve on-site search placement and functionality
• Improve cross-sell/up-sell placement
• Improve personalization
• Improve the checkout process
• Improve product content
• Improve technology & functionality on color swatches, product images, videos, live chat, social media, etc.
• Analysis of what isn’t working on current website
• Analysis of competitors
• Customer research

What Is Not Said
And I assure you, Montgomery’s list was even more comprehensive than this, and it is a great list. Everything they did to improve their website, are things we recommend to our clients. My concern isn’t with their upgrades, it’s with the presentation of these upgrades. Montgomery’s primary audience was other eTailers, owners or marketers. Did they scribble down her bullet points and run to their in-house team or out-side agency and demand these changes be implemented ASAP? It’s possible. Then it becomes the in-house team or out-side agency’s job to gently tell the eTailer how this is outside of the budget, scope, time line or capabilities.

And that’s my problem. Montgomery didn’t relay to the audience the budget for the upgrade, nor a time line. (Although, someone else must have been reading my mind because during the Q&A, he asked her how long this project took. Unfortunately, my memory is fuzzy, but I think she said somewhere between 6 months to a year.) All of the items Montgomery talked about need time and money to make happen. One of the difficult challenges facing an eCommerce website is making the eTailer understand the potential value of their eCommerce website. We all know the mantra: got to spend money to make money. So, why be afraid to say, we had a $500 budget to improve x, y, and z in three months. The final cost was $750. After x amount of time, we increased our profits by $5,000. No one would fault, question or undermine the decisions that led to a bottom-line increase.

It’s important to understand that improved search, improved functionality in the product images, or testing and analysis research all cost time and money, be it in custom development, third-party plug-ins and extensions, or just plain old time. No matter how simple a feature on a website is–sending the product to a friend via e-mail, allowing users to customize a product, moving the placement of the newsletter sign-up–work had to be done to get it there. And work costs money. And good work should cost even more money.

What Should Be Getting Said
But this is where a good eCommerce company outshines a mediocre one. A good company will explain to the eTailer that what they want is exactly what they should want. All of their suggestions most definitely will improve their website and bottom line. Then, the company should let them know what each improvement would cost. The eTailer is probably going to feel sticker shock, because he had no idea and no one ever told him how much these changes cost nor why. The benefit of discussing a website’s cost is that it helps set realistic expectations and goals. On the other hand, giving a roomful of eTailers a bullet list of ways to improve their website with no context to support them, sets no expectations.

After the sticker shock subsides, the company needs to explain that the eTailer has options (something else the Montgomery presentation didn’t elaborate on.) The company could tear the whole house apart and rebuild starting from scratch, or they could set up a plan to do renovations in increments—improve the search, then work on the products page, then trying testing pages, etc. The final results should be the same whether they overhaul everything at once or in pieces, the only difference is that breaking down the work into mini-projects mean you’ll see incremental changes to your bottom-line, but it also means incremental (and more manageable) costs to the eTailer.

To sum up my bottom-line: The eCommerce industry needs to discuss building, maintaining and upgrading a website in a context that isn’t void of budget and time constrictions and in a way that educates eTailers as to the work behind each piece of the project. This will help eTailers better understand their wants and possibilities, and help eCommerce agencies fulfill those wants.

Mentioned in this post:
Performance Bicycle Website :: Performance Bicycle
Internet Retailer Website :: Internet Retailer

Their page (along with my 1, 2, 3 markup) is below:

1. Waste of Space
Roughly 350 pixels are used for the Gift guide call out, including top bread crumb, main banner and tabs. By now, you might know that it’s a pet peeve of mine to have larger banners with no calls to action and that aren’t clickable. I have two suggestions. One, remove the tabs (photo, in store, intimate elements) and place those on the main banner to drive traffic to them. Especially, considering that the tabs are a bit redundant with text links also in the side bar and in the content area below. Or two, resize the whole section (breadcrumb, banner) to be about 150 pixels high; thus, moving up the content and driving traffic through those buckets. It’s strange that a web page could be both too simple and overkill at the same time.

2. User Expectation
Visually, there’s nothing wrong with this content or layout. (I’m looking at my blue square around the “For Him” section.) My problem actually lies with how I got to this Gift Guide web page. I did a Google search for valentine’s day gifts for him. And this pharmacy was a sponsored link. I clicked it and arrived on this page. Granted it is Valentine’s Day oriented, but why not link it right to the For Him page? It would have saved me a few seconds of thinking and a click. And it would have taken me to a page with a direct headline that corresponded with my search: Gift Guide for Him. Additionally, and most importantly, it would have led me directly to viewing products, not navigation filters. If you’re going to run keyword campaigns, make sure they’re directed to the correct page.

3. Clutter
This is nitpicky, but hey this series is all about suggestions for improvement. And if improvement means fixing some ridiculous thing in the corner, then hey, goal met. This isn’t completely irrelevant, at least not in my head. Anyway… The magenta-esque call out in the right upper hand corner includes a link to access my profile, to register, to get help and entry fields and a submit button to log-in right on the spot. Somewhere, somehow I think this could all be condensed. Again, it’s overkill right now. I like the instant log-in option, by why not remove the your profile link? Apparently the help isn’t even specific to the log-in/profile account information. It’s a help link for the entire website; maybe it should be placed some where outside of the profile call out.

I’d also suggest, just for the valentine edition pages, which are going to be overloaded with shades of red, why not make the call out box blue? It’s still in the same location and the contrast will help visitors to easily find it.

Here’s my quick re-visioning:

To sum up this month: I think the most important marked they missed was not having a paid link direct traffic to the specific page with those keywords on it. (I’ve been reminded by my SEO/PPC colleague that it’s possible the company did testing and the gift guide page proved higher conversions than the gift guide for him page, and that’s why the link is directed as it is. But after he looked at the two pages, he conceded that while possible, highly unlikely and that this is just a (possibly costly) goof by the part of the company.)

Mentioned in this post:
Valentine’s Day :: Walgreens
For Him | Valentine’s Day :: Walgreens