Vitacost: Web Usability Analysis

I think the biggest improvement that Vitacost can do to improve on customer experience is invest more into A/B testing and usability tests; as I am one person and not everybody. Having data to back up experiences is also essential.

 

My experience and analysis on Vitacost.com points to improve on enabling shopping through better visibility of products. I would advise greater emphasis on empowering the user to be able to find what they are looking for with as few clicks as possible and solve for scan reading. One of the biggest components that is hindering shopping is the visibility of the top-level navigation (and the search bar to varying degrees). Secondly my experience points to more uniform and consistent naming conventions for categories—visibility of categories is also impacted by the poor visibility of the top-level navigation. I feel the promotional ads needs to be re-examined as they are adding to visibility issues:

1. Placement
2. Above the fold VS. below the fold
3. Conversion focus: Conversion is done by the product pages not the home page & the category pages.
4. Actionable: some promotional ads don’t do anything such as take you to a product—they just take up valuable space and impede visibility to navigate the site.
5. Usability: some promotional ads are actionable, but it is hard to know that they are actionable.

Vitacost has some good winnowing and comparison tools; it would be good to invest in reducing the learning curve in how to use them.

Enable shopping through better visibility of products:

• Focus on empowering the user to be able to find what they are looking for with as few clicks as possible.
• Top-level navigation: Minimize visibility issues and maximize usability
• Uniform and consistent naming conventions for categories
• Promotional Ads that are actionable and clear in its usability
• Make better decisions on what goes above the fold and below the fold.
• Make links apparent that they are links
• Reduce the learning curve in how to use its search tools.
• Improve the site’s internal linking to the following pages:
  • Sell & Deliver Pages: return policy
  • Trust Building Pages: privacy policy and company background

• Improve the product information quality
• Improve the checkout process by reducing the number of steps from 4 to 3 and be clear on how many steps there are from the very start of checkout.
• More A/B Testing and Usability tests
  • Click Density Analysis
  • Segmentation
  • Key Metrics
  • Search

Top Level Navigation

This is a lot of information to digest and my eyes don’t like looking at it. If you squint your eyes and look at the head section, the gray promotional bar should jump out at you, so much so that it dwarfs the visibility of all the other elements—such as the top-level navigation system.

Figure 2 illustrates a simple method of increasing visual communication by adding more negative space to competing elements.

Removing the promotional bar further increases the top-level navigation visibility; we can even see the search bar better (fig 3). If you look at figure 3 again, you will notice that the font color choice is nearly the same as the color of the promotional bar.

 

Looking at the top-level navigation by itself (fig 4), we still have a lot of information to weed through with 15 menu objects. One of the most highly cited papers in psychology was published in 1956: “The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information“. Short-term memory can only hold about seven items, which fade from your brain in about 20 seconds. It is fine to have a longer menu as memorization is not the goal, though shorter menus are faster to scan. Recognition is the goal rather than recall. The response time of recognition must be fast. Fast recognition opens menu-objects to becoming actionable and visible. Each menu object has a long name, which is stacked on top of each other making it harder to read. Our eyes are not able to easily scan from left to right, because it has to stop and go from each menu object (word stacking). See figure 5, Walmart’s navigation system lets the eye flow easily from top to bottom and back again.

There are six categories for the site, but it doesn’t become clear to what they are until you go to the Vitacost Brands page where they list the categories, but the naming convention isn’t the same as in the top-level navigation; better recognition and consistency will help user experience. When a customer shops for categories it becomes unclear what the shopping categories are when looking at the top-level navigation.

The search bar size isn’t too bad, but the high amount of density of elements within the head space makes it a little hard to see. If users can’t see it, then it doesn’t exist and thus become useless. We want to minimize visibility issues and maximize usability. Usability empowers shoppers to browse and purchase.

 

Home page

A home page is a special type of category page—a high-level category page. A successful home page must make it clear to users what products they can buy from the site and what their purpose is. Successful home pages enable shopping from the home page and not hide it.

The home page’s above the fold does not do a good job in the following:

• Show merchandise
• Enable shopping: the navigation system is dwarfed by the promotional images.

 

The home page (especially above the fold) is similar to the first paragraph of a news story. The five journalistic “W”s (who, what, when, where, and why) provided in the first paragraph, gives the reader enough information to decide if reading the rest is of interest. This holds the same online, because online shoppers want to know the following before shopping on any site:

1. What does this site have?
2. Who is this site for?
3. At first glance, might this site have what I need?

E-Commerce sites that are successful in usability focus on:

1. Empowering the user to be able to find what they are looking for with as few clicks as possible.
2. Focus on conversions when users find what they want.

Vitacost does the exact opposite from the home page. In the body of the home page (above the fold), it is dominated by promotional ads. “Now & Later”, “Get $5 off”, and “Save 12%” take up valuable information space—space that is not actionable. In this case, an image slider with actionable links would be better. You have to scroll below the fold to get an idea of what this site is about and find the Call-To-Actions (CTAs). Below the fold of the home page, it is still missing a clear and concise organization of merchandise. It would be better to design the home page as the front page of the catalog, because it enables and empowers the user to start shopping right away. Walmart does a good job in the following with its top-level navigation system (fig 5). Walmart is using a mega-menu drop down system. The menu is visible and placed in an area where menu systems such as this are commonly placed. The font size and color pop off the screen. The labels are familiar and recognizable. From this system we already understand:

1. What does this site have?
2. Who is this site for?
3. At first glance, might this site have what I need?

The home page needs to do a better job by providing information and/or links to information on purchasing options, return policy, shipping and delivery information. For instance, trying to find the return policy page I first went to the Company Information header in the footer menu to Terms and Conditions of Sale wasn’t straight forward and doesn’t go into details of what is a “5 STAR GUARANTEE” or link to it. Better information can be found in the Customer Service heading in the footer menu as Help, but there is no cross-linking between either—better internal linking, classification, and more familiar labels can resolve this. Building trust through links to customer service (Live Chat), privacy policy, and company background information was provided. The content information for the privacy policy page could be improved; it should solve for both scan and detailed reading. It should solve for scan-reading by using bullets and front-load the scan-reading on the page. It should also include:

• Who is collecting the information (possible 3^rd party)
• How is the collected information going to be used

The company background can gain better trust by linking to its purchasing options, return policy, shipping and delivery information, customer service (Live Chat), and privacy policy.

 

Category Landing Pages

The same issue of search that was addressed in the Header section also applies.

The big promotional ad that takes up a lot of valuable space does:

• Show products
• Something actionable like link out

Unfortunately the promotional ads isn’t intuitive in providing links as the “Save 20%” is hard to discern if it is indeed a link and the three categories (such as Shop all Argan) have small CTA buttons.

Skincare, Bath & Body, and Hair (fig 5) are helpful in helping the user in find what they are looking for, but the CTAs could be more intuitive as the links do not pop out as much as they should—at the very least a rollover should prompt a more noticeable color change and an underline to help clue in the user that this is indeed a link.

The Add to Cart elements (fig 6) are not as useful as they should be. It would be more helpful if each sub-category was listed in a form of a carousel and front-loaded the best sellers & products on sale. A Best seller carousel would better than this non-labeled element in terms of narrowing down the vast ambiguous selection.

Search Pages

Winnowing is separating the useful from the non-useful, but it should also let users expand the set again. The “Your Refinements” & “Refine your results by” is a good filtering system. Although the association of use between the two is not exactly clear. It is hard to add/reset the “Your Refinements” as the “X” buttons are hard to see, so it is not as clear that you can expand the filter. Better naming conventions could be improved on. An added tool tip function would help reduce the learning curve on the filtering tool. The tool tip on the compare function is necessary, but noticing the compare function took a while to notice. Understanding how to get the tool tip wasn’t straight forward; a hover effect may be a better experience. A “?” button might also help encourage the use of this helpful tool. The bread crumb would be more useful if it was consistently displayed as it jumps around from location on category pages, to search pages, and to product pages. Little inconsistencies take away trust. It would also be more useful if it was more visible as the font size is 12px and has to compete with the promotional ads that surround it.

Product Pages

The overall text information does not promote scan reading or detailed reading and could do more to focus on the features and the benefits of the features. The pricing does not include a total cost including the shipping fee. It does not include a shipping time. The product pages do not have an easy means of extracting manufacturer’s warranty or return policy. It does offer:

• A highly visible shopping cart
• Customer generated ratings and reviews
• Three recommendation tools

 

Checkout

A 3 step process would be better and improved if the number of steps was underlined and laid out from the start. It is good that account creation is asked for at the confirmation page.

The process as current:

1. Shipping information
2. Shipping speed
3. Payment information (option to create an account)
4. Order Receipt

Changed to:

1. Shipping information (and Shipping speed)
2. Payment information (option to create an account)
3. Order Receipt (Confirmation)