August 14, 2012 by dannybishopcreative
Major League Baseball Advanced Media (MLBAM) are one of the true success stories of sports and digital. Their website and MLB TV subscription offerings are widely regarded as the gold standard for umbrella model digital sports properties.
Last week they launched a revamped version of their online shop, developed completely in house like virtually everything that you see on mlb.com.
As one of the most successful organisations at monetizing online activity, there’s little doubt MLBAM would have spent considerable time and energy reviewing what did and didn’t work in the previous incarnation of their online store, and testing the every step from wireframes to online staging versions of the new shop in order to provide the best possible experience for shoppers and the greatest income for the MLB and its teams.
With this in mind it’s worth reviewing some of the features of the redeveloped online shop to see what they’ve done, and what we can learn from their choices.
Many stores are plain. Not because people can’t be bothered having design for their shops, but because UI experts have often suggested that having a bold visual design detracts and distracts the shopper from the task the site owner wants them to complete: buying something.
shop.mlb.com breaks from this tradition and provides a clear visual design that anchors the site to the sport. From the clay base path background through to the scoreboard inspired cart count and search box the visual design has clearly been developed to reflect the game.
The menu system used by shop.mlb.com is three fold, but more clever that initially appears. There is a “Select Your Team” tab that dominates the menu section. Beyond this there are two competing menu sets; one for highlighted product categories and one for common categories. The term ‘highlighted’ and ‘common’ are mine, chosen due to the product categories they contain – highlighted included Specials and New Arrivals, common including Jerseys and Caps. Interestingly the ‘common’ menu is highlighted red – traditionally a colour that would be steered away from due to its connotations with errors, also it visually dominates the ‘highlighted’ menu that is a less visually prominent grey.
When you first visit shop.mlb.com the ‘common’ menu structure represents each category with a drop down that shows the list of clubs. If you select a club from any of these, such as Boston Red Sox under Caps, you are directed to a club portal shop showing your category of choice. Once inside a club shop the common menu drop downs act differently than a moment ago, displaying a list of further sub-categories such as Men’s Caps, Women’s Caps and Youth Caps.
This is an interesting UI choice, as normally UI/UX experts suggest that menus act identically throughout a site. Here MLBAM have chosen instead to make the menus more functional after a team portal has been selected. In retrospect it makes sense, why continue to offer what will be essentially redundant information in the drop-downs that may only be used by a small percentage of users when that space can improve the ease of navigation for the bulk of shoppers.
The category list page shows each product within a sub-category in a classic grid pattern. The ability to add a product to your cart without navigating to the product page has been included here, subtly hidden under the ‘Quick View’ button that appears when a user hovers their mouse over a product image.
Clicking the Quick View button provides a ‘light’ version of the product page, with reduced information and a medium sized image, and allows the visitor to add the product to their cart immediately. This functionality has been increasing in use across many websites, however I would be interested to know how many visitors who add a product this way complete their purchase funnel. As with many aspects of online shop design, there are many interlinked variables that can be hard to measure without large quantities of visitor behavior data and true A/B live testing.
Like much of the site, the changes to the product detail page are subtle, but run counter to many of the accepted norms. Big images have been in vogue for a while now with product detail pages, and certainly the mlb version underlines this. At 500 pixels by 500 pixels the product image dominates the page layout, taking up more almost 52% of the width of the 970 pixel wide content wrapper.
While the move to larger and larger product images is not unusual, the order of elements in the right hand pane is. In order a product on shop.mlb.com has; Facebook share, Promotion Alert (if required), Product title, Review results/call to action, Price (and “Bill me later” promotion), Size chart button (link), Size availability list (if required), Shipping information, Quantity input box, Add to cart button, Email share button, Wishlist button, Free shipping promotion (if applicable) and finally Product description.
While these information or form elements appear of virtually every online shop, the order of them is particularly of interest.
Most interestingly is the placement of the Add To Cart button. For the vast majority of users, this button will be below the fold. It’s not until you step up to a 24 inch or larger monitor that the button will be visible without the user being required to scroll the page down.
In times past the rule was to design a page to work with as little scrolling as possible, and certainly to attempt to have the most important information or functional elements on screen when the page loads. The inference here is that MLBAM have decided, either by testing or from gut feel, that the most important information on their product page is the price and the shipping information. It’s a significant difference to many product pages, and one which will no doubt be replicated by other, even if only in A/B testing initially.
Social media sharing:
Social media sharing of products on shop.mlb.com is noticeably limited. With just a Facebook “Like” button and an “email to a friend” button the calls to spread the message to your social networks are extremely short by modern standards. There is no twitter button, no tumblr option, and no pin this call to action. I find this very surprising.
The question that I would love to be able to ask the MLBAM team is “did you test different social media sharing options? Did you track the results? Do you know what a share is worth?”
There’s almost certainly a price to be paid for adding extra sharing buttons to a product page. That’s just common sense; adding one share button may have little impact on the amount of people who add a product to their cart, adding one hundred share buttons would certainly impact the people who add to cart, so each button added will most likely have some negative impact to the funnel of completion.
However, that’s not the only equation in play. If adding an extra social share button negatively impacts the funnel by 1% it’s simple to say “leave it off!” However if the act of sharing via Twitter (a button that is currently not available) leads to an extra 1% of orders then the negative impact has been cancelled out. Have the team at MLBAM tested each button? Do they know what a share is worth? I’d really love to know.
Is it for me?
Many of the changes implemented by MLBAM on shop.mlb.com would be reasonably simple for online shop providers to deliver to their clients without reworking their code, or can be implemented by store owners themselves. The question of should you is a much more difficult question to answer. If you are in charge of your own store code then my recommendation would be to trial a couple of the changes MLBAM have rolled out, but do so in such a way that out can test the results. That might be with an A/B code serving solution or just using Google Analytics (you do have Google Analytics set up on your store, right!?)
Beyond the cosmetic changes, I’d be very careful about jumping into making wholesale layout movements or functionality revamps. Not unless you’ve got the ability to do controlled user testing and A/B testing that will provide you an understanding of what impact the changes are having.
Online shopping is still a moving target, and the best operators understand that constant improvement is viral for maximizing returns in this space. The key word there is “improvement”, and change for change’s sake is likely to more harm than good.
I highly doubt that MLBAM rolled out a new shop without investing significant resources in understanding the probable outcome, but that doesn’t mean you need to follow their lead and it certainly doesn’t mean their results will be good for everyone.