'Net Features : checkout

Ecommerce Design: Dickies Goes to Work on Online Store

Amberly Dressler — Mon, 06 May 2013 14:45:00 GMT

Simple navigation, clear communication, comprehensive product information and easier checkout are among the new and improved features and functionality of DickiesStore.co.uk, which go lives May 7.

As the exclusive provider of Dickies Branded Clothing, DickiesStore.co.uk upgrades are a solid benchmark for other online merchants to be measured by:

Simple Navigation

With a strong focus on intuitive navigation, DickiesStore.co.uk has ensured that the path toward finding that perfect product is clearly marked. In addition, a substantially improved search feature allows an even more precise shopping experience for visitors.

Clear Communication

DickiesStore.co.uk has placed a lot of emphasis on keeping visitors informed and for this reason notifications about changes in stock will be much more prevalent. Another new feature on the re-launched site is a live chat function where visitors’ queries can be more directly addressed.

Comprehensive Product Information

In addition to improved functionality, the look and feel of the site has been given increased attention and has undergone a more modern makeover. Informational product videos have also been included to facilitate a much more comprehensive understanding of each product.

Easier Checkout

Completing the payment process has been considerably simplified on the new website. Making a purchase is more fluid with PayPal and Google Checkout enabled and now the DickiesStore.co.uk shopping experience can be completed anywhere, as the site has been fully optimized for mobile use.

Recently DickiesStore.co.uk uncovered an archive of Dickies advertising material dated as far back as the 1930s, demonstrating the history of its marketing communications. At the same time DickiesStore.co.uk is very much looking to the future after consulting customer response in order to constantly improve the functioning of its online store.

Use Progress Indicators for a Standout, Multi-Page Checkout

Pete Prestipino — Mon, 03 Dec 2012 20:50:00 GMT

As you read this, consumers are filling their virtual shopping carts and the industry, as a whole, is on pace to shatter all previous e-commerce records this holiday season. Even so, there are merchants that won’t benefit at all from the increased seasonal buying activity. The reason is their checkout process, of course. It’s been proven time and again to either influence (negatively or positively) the success of retailers depending on how well it is thought out, monitored and measured.

Website Magazine has written extensively in previous issues on the essential elements of the checkout process – those elements that every e-merchant must address in order to stand out in the hyper-competitive retail landscape. But the checkout process, at each and every online store is unique.

For retailers using multi-page checkout or single-page checkout, there is simply no right or wrong, just what results in a conversion for your online retail enterprise. That being said, if you’re using a multi-page checkout, progress indicators can save the day. It seems like such a basic approach – let users know just how many steps remain until their order is completed - but is widely underused.

Progress Indicators for Multi-Page Checkout
Progress indicators often have a bad reputation. They can be seen as an incentive for users not to complete what they set out to do (e.g. “there are too many steps in the checkout process – forget it!”). In reality, including progress indicators within a multi-step checkout process is important to implement because the mind (that of the consumer) automatically breaks down complex purchase process into smaller, simpler parts for understanding and comprehension. When merchants opt to visually lay out the multi-step process, users are as likely to complete their order as they would be on a single-page checkout.

Another interesting consideration to make is a retailer's audience. In the case of a retailer selling higher-priced items, or items designed for an audience that does not buy online regularly, multi-page checkouts make more sense. The consumer may feel safer in a slower process, where it's possible to double-check their order before completing it. This may also prevent the checkout process from seeming overwhelming. For this audience specifically, this is often the case when they are forced to interact with longer, one-page checkouts. These pages typically require address and billing information immediately for order completion.

Progress Indicator Best Practices
There are several things to keep in mind when developing a progress bar. An Internet retailer should number the steps, provide action visuals, such as arrows to suggest a sense of action is possible, should always highlight the user's current page and should include a “review order” step in the process.

A merchant’s responsibility also extends to the form functionality itself, regardless of whether it is a single- or multi-page checkout. Online retailers should make every effort to “carry” information, such as billing address to shipping address fields to reduce repetition by users. They’ll also need to remove distractions so the user can focus exclusively on the transaction – although there is something said for introducing a last-minute offer or product suggestion.

Progress Indicator Showcase
There are myriad uses of progress indicators on websites – and it’s not necessarily exclusive to retailers. Progress indicators can be used for multi-step forms, product tours, and, of course (and for our purposes here), online ordering. Let’s showcase a few progress indicators in action during this holiday 2012 shopping season:

Amazon.com: Amazon takes a rather minimalist approach to its checkout process. It includes a progress indicator, but deemphasizing it by placing it at the top of the page, nearly out of direct view of the shopper.

DrugStore.com: The point of including a progress indicator is so users can see in a near instant where they are in the checkout process. Drugstore.com does this well by using bright colors in its checkout progress indicator.

Macys.com: The use of color is an important consideration in relation to progress indicators, but not so important that retailers should sacrifice brand recognition. Macy’s does a good job by highlighting the active step by using its familiar red color and greying out the other steps.

LLBean.com: The best progress indicators leave no doubt about the reason for their presence and can quickly indicate to users through a variety of means (e.g. color, highlighting, etc.) where the user is in the checkout process. LLBean does well to present its checkout progress indicator predominantly and forcefully.

Check Out This Customized Checkout from 2Checkout

Allison Howen — Mon, 11 Jun 2012 14:30:00 GMT

Merchants can now create a customized checkout with a new feature from payment processing solution 2Checkout.

The Custom Checkout feature provides online retailers with the ability to tailor their checkout pages without giving up payment security. This can help merchants decrease cart abandonment rates, raise conversion rates and increase revenue because it creates a cohesive brand experience.

The feature also enables merchants to brand their checkout pages with desired colors, logo, font, custom background and contact information. This ensures that the checkout page matches the rest of the website, and also creates a more seamless buyer experience.

“Our customers have been asking for this feature and we are excited to provide the ability to extend their brand into their checkout page,” says Tom Dailey, CEO of 2Checkout. “This is the first of many improvements our customers will experience. We will continue to seek their feedback, uncover needs and prioritize our projects accordingly.”

Check Out These Add-To-Cart Buttons

Allison Howen — Mon, 26 Sep 2011 21:00:00 GMT

Riddle me this: We all do the same thing; however, some of us do it better than others — this could be due to our attractiveness, efficiency or placement. But whatever it is, the aspects that make us successful also make us desirable amongst Internet shoppers. What are we?

If you guessed “add to cart” buttons, you are correct. These buttons are among the most important design elements on an e-commerce site. A successful button impacts conversion rate, but also reinforces brand identity.

Testing different add-to-cart options is the only way to know for sure what button/icon style works the best for your site. However, taking some pointers from some of the biggest and most successful e-commerce companies on the Web can prove to be very valuable.

Here are some examples of successful brand's add-to-cart buttons:

Best Buy

This add-to-cart button is featured in the middle of the right side of the checkout page. Although the button could be larger, it is highlighted by a Best Buy-yellow rectangle. The button features a clean and simple design of a gray cart, with the common verbiage “Add To Cart” within it. In the space around the cart, Best Buy provides the price, discounted price, and “add to wish list” option. Additionally, for qualified products, Best Buy provides a “protect your product” option as well as promotional free shipping if available. Although it is not the flashiest checkout button, it provides unification across the site by simply being the same color as the brand’s famous logo.

Victoria's Secret

Instead of a cart icon, Victoria’s Secret uses a pink shopping bag, which is similar in design to the bags used in the retailer's brick-and-mortar stores. This call-to-action button is featured in the lower right corner of the page and is directly under options such as size and colors of the item to be purchased, and directly beside a wish list button. The button is simple in design, which meshes well with the rest of the site and the brand. The text on the button simply says “Add to Bag”, and the button's larger size makes it difficult to miss — which is ideal for merchants.

Target

Target also keeps its call-to-action button simple. However, because of its red and white color, it still strongly reinforces the brand's identity. Unlike the other buttons mentioned, it is featured in the middle-left side of the page. The text inside the button says, “add to cart”, and although the button is only medium in size, the space around it is appropriately utilized by providing reviews, the ability to like the item on Facebook, add the item to a registry, add the item to a list, share it or print out an image of the item.

Bloomingdales

Similar to Victoria's Secret, Bloomingdales uses its signature “Little Brown Bag” as its call-to-action button, which is displayed in the lower-right corner of the page. The text on the button says “Add to Brown Bag.” Similar to Target, Bloomingdales makes good use of the space around the button by providing an option to find the selected item in stores, email the item to a friend, add it to a wish list or share it through social media. After a consumer chooses an item, text appears that tells the consumer how long the item will take to ship. One criticism is that the color doesn't pop out on the page, especially since the rest of the website is also primarily black and gray.

OfficeMax

This button is brighter than the others mentioned above. The design consists of a bright green rectangular box with white text in the middle that, again, simply says “add to cart.” Once an item is chosen, a big yellow box appears in the upper right-hand corner that shows how many items are in the cart, how much the total of the purchase is, and how much needs to be added for free shipping. Although this button definitely stands out, it is small and doesn't do anything to reinforce the brand's identity. Things that could be improved upon include the addition of more social options, increasing the size of the button and its overall cohesiveness with the rest of the site.

Checkout Time

As previously stated, call-to-action buttons are very important, yet what makes for an effective button will always be an ongoing debate. The previous examples show us that buttons should be simple and contain simple verbiage. The right side of a Web page is the usual spot for add-to-cart buttons, yet making sure the button is unified with the site and brand is key. Another important strategy is to provide social options next to the checkout button, such as for user reviews or the ability to share an item via email or social media.

While size, color, text and shapes of these buttons will vary, they are all aspects that every merchant should consider (and test) when choosing the most effective add-to-cart button.