There are usually two sides to every company’s eCommerce website team: the marketing team who have done research and set metrics of success, and the creative team who have also done research and applied usability standards. Because this team is still fairly new and undeveloped for most online businesses, their respective goals often misalign. Marketing wants to see that conversion rate number get higher and higher, the creative team wants to guarantee an enjoyable shopping experience for the customer to build loyalty and brand. However, when push comes to shove, which I’m sure it does between numbers-oriented people and images-oriented people, who has the final say?

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