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.
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:
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:
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:
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:
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:
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 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.