The anatomy of a Magento eCommerce site: a case-study

Posted in Information Architecture, User Experience, User interface design | 27 May 2015

Designing an e-commerce site is a complex challenge because of the cognitive and emotional variables related to buying habits, whose identification requires in many cases a careful analysis of the user profile. The end user’s web experience expectations must be aligned with the business requirements: e.g., to increase the conversion rate, to broaden customer’s base, to promote the product. There are several issues to which an interface designer must provide a valid answer: How to organize the information on the home page? Where to place the filters in the category or search pages? Which authentication to use for the checkout page? In this article I will try to illustrate the solutions I have proposed to answer these and other questions.

One of my recent and most challenging projects was the design of a custom theme for the Magento eCommerce platform. I lived this project both like a training experience – i.e., to learn how to use one of the most popular open source applications on the market – and like the chance to test my knowledge as front-end developer with the invaluable support of Magento and Stack Overflow developers community. An undoubtedly positive experience in terms of learning: I am now an experienced user of this full-bodied and somewhat feared e-commerce application and I have deepened my mastery of languages such as ​​PHP, XML, Javascript. Not so “nice” was to solve the many technical problems that regularly occurred: the modules compatibility, the cache management, etc.

Designing for Magento eCommerce

With so the many available e-commerce applications, the choice went to Magento for its diffusion on the market and for being the one with the largest developers community. I knew in advance I could find on the Internet the solution to many – if not all – my technical issues and to outsource the most critical ones to freelance programmers and certified agencies, if necessary. Once you understand the logic behind its architecture, Magento becomes a very valuable tool, with the benefit of being open source and, in my opinion, the most advanced e-commerce application. However, it is imperative for the developer to bear in mind certain considerations:

The css framework: Bootstrap

The first strategic choice to make when you design the GUI of a web application is whether to use a CSS framework: a pre-defined front-end code. For complex projects like an e-commerce site, the question is not even IF rather WHICH one to use. In my case, Magento already offers its own framework and the best practice requires that you customize – by overwriting it – the default theme. In doing so, I have incorporated the theme within the Bootstrap framework, with a careful cleaning and re-adaptation of the code. Among the benefits of using a css framework, there is the flexible grid that you can freely adapt to your pages by editing the style sheets and the additional javascript libraries that you can include, if necessary. There are many css frameworks, all equally valid and for different purposes: I will not argument here on which one is the best. My choice went to Bootstrap since it offered me the best compromise in terms of flexibility and functionality. For the e-commerce theme design, I needed a web layout that was easy to edit and with ready-to-use javascript components. Not least, I was convinced by the fact that Bootstrap is among the most used frameworks and the one with the largest developers community. Just like Magento :)

The navigation menu: a hassle-free user’s guide

When designing Bminimal eCommerce Theme, I tried to follow a mix of good practices and web standards in Information Architecture and User Experience, learning from previous projects and re-using the solutions adopted by popular e-commerce sites: since a template is supposed to be versatile, my goal was to find a balanced synthesis rather than to address single requirements. In detail:

  • The header is reduced to give more space to the content and it sticks to the viewport to facilitate the navigation.
  • Links have conventional names and are positioned in a hierarchical order: first the structural ones (login, cart, contact, etc.) then the catalog links. The icons appear only when necessary and with an alternate text.
  • The site administrator can choose between a drop-down multicolumn menu – in case a many categories and rich content – or the simplest drop-down menu.
  • The mobile version is identified by the “hamburger” icon and is simplified: the shopping cart and search links are fixed while the catalog links appear in a vertical list.

The home page: your store’s showcase

Unless the visitor is coming form sponsored links, in most cases the home page is the natural landing page after an organic search. Like a passerby in front of the shop, the user expects to find an assortment of goods and a selection of current deals. It is therefore crucial to determine which products to highlight, by keeping in mind that the web experience does not follows the paths of traditional channels. Additionally, the user will try to interpret the content according to his mental model: what presumably he expects to find by following that path. As mentioned before, in designing and developing the theme, I followed a principle of flexibility by combining different solutions to solve most of the business requirements and respecting the standards of the User Centered Design. Thus, the home page becomes a showcase where to exhibit the items in a customized and hierarchical way:

  • Above the fold are placed the featured products and the site administrator can decide which banners to display thus changing the page layout.
  • There is a large and diverified use of images: they have to emphasize the products and when in full-screen view, the whole area becomes a Call to Action without the need of separate links or buttons.
  • Carousels are static to avoid an information overload: the user is free to choose what to see. Their position and size will vary depending on the content while captions, fading effects, and preview images help to focus on the product or to “anticipate” the next one.
  • The footer hosts the”structural” links, again following a hierarchical order: About Us, Customer Care, Terms and conditions and Customer Retention (Newsletter and Social Sharing).

The Category Page: a products selection

In this page the user can select, filter and sort the products: it is one of the most interactive pages for an e-commerce site. The Bminimal eCommerce Theme contains customizable layouts for the Main Category and Sub categories pages with both static content and products carousels. The user experience is also enhanced with some functionalities:

  • Ajax scripts which simplify the navigation and reduce the loading time: filters, sorting, product previews, whishing list, add to cart and compare.
  • Ability to add a sidebar category navigation.
  • Alternate products thumbnails on roll-over to show product details.
  • Modal windows for the product preview, wishlist and comparative table.
  • Visual labels to highlight new arrivals or deals.

The product page: let’s get into details

Here the rule of hierarchy and simplification is of vital importance. A product or service has many details and features to highlight. But if not presented in a logical and selective way, they are likely to distract or even confuse the user. It’s important to choose the content, by starting with the description which is supposed to be synthetic, narrative and non-redundant. To this end, it makes sense to rely on a good content editor or to hire some SEO experts to optimize texts and to choose appropriate keywords. The product page of Bminimal eCommerce Theme was designed to emphasize the content and to provide the user with multiple levels of interaction:

  • A wide area for the media gallery: the product is showed with lightbox images and a promotional videoclip.
  • Clear indication of product availability: the user can request to be notified when the product is sold out.
  • Each product can have its own brand and the user can filter the search for similar products.
  • The user is encouraged to interact via discreet but well positioned links (comparative table, see and add reviews, share and recommend).
  • Additional details are wrapped inside an accordion menu to reduce space and to not distract from the Call to Action.
  • The site administrator can add a featured products carousel, by choosing the typology (related, cross-sell or up-sell products) and the look and feel (grid style or full-screen image).

The shopping cart and the checkout page: a benchmark for the conversion rate

For many, these are the crucial pages of an e-commerce site: it is where the user decides whether to continue the shopping experience. Beyond any user’s buying habit which requires proper analysis, the interface designer must pay a special attention to these pages in order to reduce the chance to make mistakes then compromising the conversion rate. When designing Bminimal eCommerce Theme, I tried to learn from the restyling of a previous checkout page with thousands of orders per day. In Magento, the checkout page features an accordion functionality that many site owners find uneasy because apparently it requires too many steps. Based on this assumption and aimed to improve the conversion rate, they rely on third party modules to simplify the checkout page with a single layout: address, shipping and payment details. After having unsuccessfully tested several of these modules, I preferred to optimize the existing layout and to eliminate what in my opinion was redundant:

  • In the shopping cart, the Call to Action is clearly separated from the secondary links (Update and Empty the Cart). Additional informations which are not essential and might distract the user were removed: shipping costs calculation, cross-sell products, coupon code.
  • Configurable products can be modified (amount and options) without reloading the page, through the ajax functionality; the same applies to the featured products quickview when the cart is empty.
  • In the checkout page, the user is guided through the authentication with a simple tabbed navigation: he can use his social profile or the site credentials to login/register and the two options are clearly separated unmistakably.
  • The list of locations is updated dynamically after selecting the country.
  • The coupon code shows up in the bottom of the order summary, prior to payment.

  In conclusion, in designing Bminimal eCommerce Theme I summarized most of the knowledge gained so far as interface designer and front-end developer: definitely, an intense and compelling learning experience.