Canadian-based Babyplanetboutique.com strives to provide parents with unique, useful baby products at affordable prices. The site’s owner Danielle Burgi is a nominee for Savvymom Mompreneur of the Year. An impending upgrade to the site, coupled with a new shopping cart system, which will offer customers new features such as a gift registry, inspired her to put the site forward for this Usability Report Card.
Home Page Clarity
Baby Planet Boutique’s home page suffers from having no products visible “above the fold.” Instead, the top of the body of the page is currently devoted to information about the Mompreneur of the Year Award website (including a link). Below this is a large area devoted to the possibility of the customer winning a $25 gift certificate, as well as the guarantee of receiving a coupon code for five percent off their next order if they sign up for the site’s newsletter. Unfortunately, increasing the chance of winning the award through customer nominations, in addition to signing up customers to the newsletter, comes at the expense of not making it immediately obvious what the website is about and promoting the quality of the products that it sells.
The home page also has a continuously cycling flashing link for the Mompreneur award, which is distracting. If website owners insist on having a spinning or otherwise animated icon or advertisement, they should consider just letting it flash or spin for a few seconds, or one rotation before making it static. Otherwise, at best, customers will be distracted, and at worst may be annoyed enough to leave the site.
The home page also features a “View Cart/Checkout” link in the banner’s top level navigation. Next to this link, instead of a shopping cart, is a drawing of a baby carriage. Due to its positioning on the page, and its proximity to the link, many users will assume the carriage is a cute replacement for a shopping cart. Others may not understand it, thinking it is a link to a product page of carriages, or worse dismiss it as decoration. Do not to get cute and use new terms or icons if users are familiar with established ones. If you insist on using new terms, at least test them first to see just how many customers you will potentially lose (or possibly gain) by doing so. Finally, the shopping carriage is replaced by an icon of the traditional shopping cart everywhere else on the site, which goes against a cardinal rule of usability — keeping elements of the site consistent.
Ease of Browsing
The categories listed down the left hand side of the page are placed beneath an underlined, bold title named “Departments.” Unfortunately, the title is not in fact a hyperlink, and customers may attempt to click on this, which will not result in a new page opening. They may then be wary of what will, or will not, happen if they click other underlined words. A safe general rule of thumb is to reserve underlined words exclusively for hyperlinks.
Another issue is the possibility for confusion among top level and secondary level navigation. For example, “Accessories” is a top level category, as is “Diaper bags & Accessories.” However, “Accessories” is also a secondary level category beneath “Developmental Aids.” If at all possible, unique names should be used for each category level. In addition, the choice of names for all categories should ideally represent mutually exclusive categories, and the name chosen should be the best match for what the customer might be looking for. For example, there is a category called “Fun In The Sun” that only features sunglasses. Shoppers who know what they are after may choose to leave the site if they can’t find sunglasses under a title such as sunglasses or eyewear.
Ease of browsing is assisted by a well-implemented breadcrumb navigation. However, general browsing would be assisted by ensuring that visited links are displayed in a different color than links that have not been clicked. Traditionally, blue links represent unclicked links, and purple represents clicked links. However, a change in color, or at the least shade of color, appears to be sufficient these days. Clicked links should not though, be colored blue.
Baby Planet Boutique almost didn’t receive a rating for search as the search area wasn’t even noticed until just before this article was completed. Customers may have as much trouble as this author finding the site’s search as it is buried in the bottom left hand corner of each web page under the category listings. Aside from its unhelpful placement, it also has the same appearance as the “Currencies” functionality directly above it, which makes it further blend into the page.
The search appears to give good quality, relevant results, but does not state the search terms used at the top of the page, and it removes the search terms from the search box at the bottom of the page. It is important to leave the search terms in the search box so that users can see whether they spelt their search terms correctly (ideally a spell checking function like Google’s “Did you mean…” would also be featured).
Category listing pages feature good sized images above the name of each product and a brief explanation about the product and its price. The text, however, is center justified, which gives it a less professional ragged look and is harder to read or scan than left aligned text.
The spacing between products could also be improved, as the “…more info” links that end each listing are very close to the listing directly below it. Customers could accidentally click this link and be confused when they are taken to the wrong product page.
Category listings do feature a “Sold Out” button for products that are out of stock, which is good. However, the button is not clickable. Unless “Sold Out” links have additional information beside them, they should at least be hyperlinked so customers can get more information about if and when products will be in stock.
Product pages feature an “add this to my cart button,” which is below the fold. As Greg Laptevsky, a Prime Visibility Senior Pay-Per-Click Strategist, rightly points out in his useful article “Lowering Shopping Cart Abandonment,” if you want customers to use cart buttons as a primary action you have to visually communicate this to your customers.
The product pages also feature a larger graphic of the item being considered than the category pages. There is also a clickable “larger image” link and a plus sign graphic link beneath each image. Clicking either of these links, unsurprisingly, brings up a larger image of the product. What is surprising is the manner in which this is done. First, a dynamically resizing white box appears on the screen, and almost simultaneously, a very dark grey background appears, which all but obscures the web page that it now sits in front of. Then the product image loads, and then additional functions, if any, load. For example, for some products there are additional product images that can be accessed by a “next” link in the top right hand corner of the white box. However, customers may attempt to click the “next” link multiple times to move through the additional images before the “next” link actually reloads. Unfortunately, the whole image, aside from the currently still loading additional functions, treats a click as if the customer wants to close the image, and the image shuts down. If this dynamic displaying of images is retained in the website overhaul, the designers should have the image only close by using the “close” button or clicking on the dark grey background, as users would not expect that just clicking on an image would close it. Additionally, many other images on product pages display enlarged images differently. If the “larger image” link is clicked a new window loads with a very large image. Choosing one method over the other would be useful for consistency and satisfying users’ expectations.
One nice feature in the checkout process is the “estimate shipping” button. Customers often have to go through a checkout process to find out how much shipping is going to cost, which, incidentally, is one distorting reason behind the reportedly very high rates of shopping cart abandonment. It is not always that the customer is having difficulty completing a transaction due to poor design. Sometimes they are just getting shipping pricing and information so they can comparison shop.
If customers click on “View Cart/Checkout” before they have placed any items in the cart they receive the message “Your Shopping Cart is empty.” This is a wasted opportunity to inform and engage customers. For example, at Amazon.com (which, generally, has nicely implemented features well worth borrowing) the equivalent page has relevant information, such as instructions on how to put items into the shopping cart, how long they will remain in the shopping cart for (90 days), and a link to more information about the shopping cart and how to buy from Amazon.com.
Baby Planet Boutique prides itself on excellent customer service. The site prominently features a “Contact Us” link in the banner at the top of the page. The “Contact Us” page features a physical address, a toll free number, a direct email link and an email form. The toll free customer service and phone orders number is also placed on most other pages at the bottom of the page. Yet, there is potential for the customer service number to be placed higher on the page so that customers can access it more easily. On the other hand, there is always the issue of making it so easy for customers to complete their transaction via the phone that they tend to use that method instead of completing the online checkout, which is a cheaper transaction for the business.
There is also a “Currencies” dropdown menu so customers can choose between seeing prices in Canadian or U.S. dollars, which customers will appreciate.
If products are ordered from Baby Planet Boutique but there are not enough of the items in stock to fill the order, a message appears explaining that the items are out of stock, likely back in stock within 2-3 weeks and that the items in stock will be shipped now and others will ship later. This is a useful error message explaining the situation and how it will be resolved. However, customers may initially be blind to the error message as it is written in the same blue coloring as the rest of the page, while the three asterisks that are placed beside the product to alert users to the error message are red, but the asterisks in the error message are blue. It is important to make error messages themselves stand out from the page, and equally important to identify the field, or area that the error message relates to in a similar manner.
Baby Planet Boutique gets an overall grade of a B+. Fortunately, they are reworking the site soon. Relocating the site search, making features of the site look and behave consistently, and a general clean up of positioning of text and alignments of other screen elements will go a good way towards improving the site. Best wishes to Danielle in your bid to become the Savvymom Mompreneur of the year.
Usability Report Card
Home Page Clarity C+
Ease of Browsing B-
Category Pages B+
Product Pages B+
Checkout Process B
Customer Service A-
Error Recognition B
OVERALL GPA B+
Want your site graded? Email firstname.lastname@example.org.