Designing for Magento – Best Practices for Ecommerce Performance

By Marc Osofsky on 02 Jul 2010

Don’t let the out of the box Magento templates fool you.  In the right hands, an ecommerce site built on Magento can be as compelling as any other.  Here are some examples of what is possible.

Home Page

Often the home page will be the first place consumers have a true interaction with your brand online.  For example, for one client, 36Boutiques, we customized the standard Magento homepage layout with a large background graphic, which was written into the administrative controls. This way, depending upon the season, upcoming events or designers to be featured, the company can easily change the graphic — keeping the site fresh, and giving visitors an appropriate welcome.

Category Pages & Navigation

Making minor tweaks to the existing Magento framework for category pages — those listing different options for a particular kind of item — can make your site stand out from the crowd due to its unique layout.  This kind of development doesn’t require heavy coding; rather you need a creative design team, and the ability to restructure and stylize  elements of the page.  For example, again looking at 36Boutiques, we can see the difference between a standard page layout in Magento, and that which we created for this private-event retailer to make current sale events more prominent, while still outlining the upcoming events as well.

Comparison of Magento Category Pages

Product Detail Pages

Product pages are no longer the end of a navigation process throughout your site — they are self-sufficient, optimized units that must portray your brand ideal immediately.  Some current best practices for giving visitors a more meaningful experience with products online include: featuring video, consumer reviews and blog posts, and offering multiple pictures, zoom and 360-degree rotation.  The screenshot here shows a product detail page from 36Boutiques, showcasing multiple product photos that can be scrolled across. This is an update to standard Magento processes, which load a new page to view additional product photos.

Custom magento product detail page

One-Page Checkout

Out of the box, Magento offers a standard two-page checkout process:  page one – cart information, page two – checkout information.  By reengineering this process to create a one-page, two-column checkout — with cart information on one side and billing/shipping information on the other — retailers can decrease cart abandonment significantly.  For example, one-page checkouts, like the one below, see an abandonment rate of only 40-45% (20% less than the industry average of 60-65%).

Magento Custom Checkout

Quick-View Modals

Using quick-view modals — rather than loading new pages — when customers are looking to perform a simple task such as inviting a friend to the site, sharing an item on Facebook, or see product details, helps keep site visitors in their shopping experience, rather than navigating them across the site.

Magento Custom Quick View Modals

Magento does not support quick-view modals out of the box.  We generate quick-view modals for our clients via AJAX requests.

blog comments powered by Disqus

© 2012 Optaros, Inc. All Right Reserved | Terms of Use | Privacy Policy