Magento

Magento’s next release will feature the ability to overwrite existing translations to a local installation of Magento on a global or per store view basis. In this video, we demonstrate overwriting the default translations for a drop-down field as well as a text-label using the new in-line system. At the end end of video, we also show how to enable such functionality on your instance of the Magento admin (backoffice).

We are currently working on a centralized system that will facilitate managing Magento translations to different languages. In the future, this system will manage the translation process for selected interfaces (including contributions made via Magento Connect) and modules.

Please note that translation can be made for drop-down values (any form element really), images (alt, title), links, strings inside scripts (warning, errors), etc. The following items will be displayed in the translation window:

• Scope - Module that the translation is associated with
• Shown - Current representation of the translation
• Original - The original text as provided by the module
• Translated - Current translation
• Store Specific - If checked, translation will be applied to the store view and not the locale
• Custom - New translation to be entered in the textbox

We hope you like it!

As first presented back in April, Magento’s next release will feature dynamic design update control. This feature will allow complete control of the interface (layout, themes) on a per product and per category level with the ability to schedule changes by date.

In this video, we apply different themes to categories to show the design flexibility on a per-category level. The same process can be applied on a per product level (not shown in the video).

click to view larger version

As briefly presented in our Designing for Magento Webinar last week, Magento’s next release will feature a new tool that will make Magento designers’ and programmers’ lives easier; Template Path Hints. This tool will display the path and file name of the templates constructing the page viewed.

We hope you’ll like it

By popular demand and feedback from the community, Magento’s upcoming release will introduce a mass-grid update feature. This will allow quick, on-the-fly management of batched data updates for products and customers.

In this video, we show…

• Filtering the product grid to display simple products with an attribute set of “Shoes”.
• Selecting all products that meet the search criteria.
• Selecting the Update Attributes action to view the common attributes that are shared across the selected products.
• Changing the Gift Messaging attribute.
• Saving the changes will effect all 40 products selected.

What’s Ahead

This feature will be extended to other grids in the system (e.g. orders). Additionally, mass grid price updates will allow the ability to update prices for any number of selected products by percentage and/or fixed amounts (this feature will be implemented as a seperate action to the product grid).

The following post is an inside peek into Magento’s QA process as written by Joanna S., Magento’s QA Manager.

Overview

Testing an e-commerce application (such as Magento) is not a trivial task and requires careful consideration - everything the user could do must be anticipated, as well as the effect their actions could have upon the system. Every link must be checked, every form must be filled out and submitted, every page must be visited, every transaction must be carried out, etc.

Therefore it is vital that a thorough test plan, including testing scenarios and testcases be conceived before actual testing can be performed. Test cases are developed and managed with TestLink, an open source test management and execution system.

The above mentioned test plan needs to be based on and incorporated into the development schedule in order to assure that all new functionalities are tested as soon as they have been implemented, leaving enough time to report and fix any possible issues.

Testing Scope

Apart from system functionality, the following website quality aspects also need to be considered during the testing process:

• Essential analysis - navigation, information structure, broken links, content errors, etc.
• Usability analysis
• Accessibility problems
• Code quality - markup errors, broken scripts, code structure, etc.
• Cross-browser compatibility issues
• Layout issues
• Performance

Testing Procedure

We all want Magento to be as bug-free as possible, therefore the testing procedure we employ needs to be both extensive and comprehensive ensuring the highest quality solutions possible are delivered. Our quality procedures are built into the development life cycle and therefore ensure reliability at each stage of development.

Magento internal testing is performed by a team of experienced QA testers, who report any possible bugs, missing features or possible improvements found using Mantis bug tracking system. A detailed and thorough report on any issue is provided, including problem description, replication steps, screenshots, bug severity and priority, as well as suggestions for possible solutions. Each issue is assigned to a proper developer designated for the project, according to their scope of responsibility.

Developers resolve bugs assigned to them based on the schedule and priority specified. Bugs related to upcoming release are treated as top-priority. When a bug/issue is resolved, its status changes and it’s immediately being checked by a QA person who either closes it or re-opens when the problem still occurs.

Feedback from Magento community is a great benefit for the whole QA process. Community members also have the possibility to report any bugs found, which are then reviewed, verified and assigned to a proper developer to fix. Posts on the forum are a great help too, as community memebers often come up with ideas for further improvements.

Testing New Releases

Testing new releases is based on the list of functionalities scoped for an upcoming release. First, a feature is compared against its specification and any inconsistencies identified are carefully examined. Not only are separate features carefully tested, but also their interrelation and the way they might affect other system functionalities. The process also includes regression tests done on all related areas in order to assure that both the existing and new functionalities work as expected. System testing is the final step performed on a complete, integrated release to evaluate the application’s compliance with its specified requirements.

A nice surprise for a Thursday afternoon ... Can you make out what it says?

In this video, Minu discusses the design documentation process and gives a short introduction to Magento’s design blocks. Minu is responsible for Magento’s UI design including the demo store (AKA Magento’s first design package), Community Site, and Admin Interface.

Grouped Products represent a way to market a set of products within a single product page. In the screencast, we go through the process of creating a Simple Product, the basic product type in Magento. We then progress to create a Group Product and associate simple products to form the set.

This is the first of many screencasts we’ll be releasing with the Magento community site later this week. We’d love to hear your thoughts in the comments.

... and it may take a while to download (given its ~20 MB size). Get some coffee and enjoy Magento’s first screencast.

With the Product Pages we had one goal in mind, increasing conversions by presenting relevant product information to customers in a clear manner. A customer who is viewing a product page is just one click away from the shopping cart, making the presentation of that product the priority. Yet we still needed to present other relevant information to the customer such as related items, the wishlist and the customer's shopping cart. With this in mind we made it effortless for customers to find any additional information they might seek. Let's look at the layout of the Product Pages.

Product Page Wireframe (click to see full-size)

The product images are presented in the left side of the page, allowing customers to zoom in and view multiple views of a product. While reviews reside at the bottom of the page, an overview of the reviews is prominently placed underneath the product title. Reviews, like other elements on the page, are optional elements in Magento. If you do not elect to turn the reviews or other optional elements on, the remaining elements will move up on the page so this space is not left blank. Optional elements will be called out here with an *.

Below the review overview is the stock availability* and shipping information*. We gave these elements prominence as they are shown to increase conversions. Immediately below is the price information, which will include tier pricing* if it is in use for that product. We placed the calls to action below the pricing. By keeping these elements in the center of the page, not only the Add to Cart button but the Add to Wishlist* and Add to Compare* links as well, we highlight the most important calls to action to the customer. Required Items*, for instance a HDMI cable if the customer is on a product page for a projector, are highlighted right above the product description.

The product description resides above the fold to provide customers with relevant information on the product, and below this are upsell items*, selected by the store owner. The bottom of the product page is given to customer-generated content, including product tags* and the aforementioned reviews*.

In the right column we feature related items*, a mini shopping cart, the customer's wishlist*, the product comparison box* and an area for a marketing callout*. You can read more about this right column in the Behind the Scenes: Category Pages post.

Prefer a tabbed view of the product page? By tweaking the templates and CSS, this page could be redesigned to accommodate this.

Product Images

To provide rich media functionality to the customer, product images can be zoomed and dragged right in the product page. Images can also be opened in a slideshow, where multiple images can be browsed at a larger size.

Tier Pricing

Tier pricing will display as shown above. If only 1 item is added to cart, the regular price is used.

Products with Variants

Selectable product options will appear directly above the call to action area. Of course, variants are saved when adding to the cart, wishlist, or compare box. The product price adjusts based on the options the customer selects.

Grouped Products

Magento also allows store owners to sell multiple products with similar characteristics on one page, making customers' lives easier by allowing them to compare all the products in the group. This also encourages customers to purchase more items in the group by allowing them to add all the items to the cart with one click.

That's it for the product page. As always, tell us what you think! Have a suggestion or a question? Let us know in the comments!

Our goal with Magento’s Category Page was to create a customizable browsing experience and keep shopping tools at customers’ fingertips. The customer never has to stop browsing to see essential elements like the shopping cart and wishlist. Price and rating are displayed right on the category page, eliminating the need to drill down into the product info pages. This saves the customer valuable time and makes shopping as convenient as possible.

Grid View Wireframe (click on the image to see full-sized)

List View Wireframe (click on the image to see full-sized)

Magento’s Category Page was designed with functionality and flexibility in mind. Customers should decide how they browse a catalog, and our extensive Pagination Tool supports this philosophy, creating a quick and intuitive experience. Customers can decide how many products they want to view per page, how they prefer to view them (in grid or list view, outlined below), and how each page is sorted (by price, manufacturer, popularity, etc). The customer’s preferences are then saved, creating a customized shopping experience. The Store Owner also has the option to control the way customers view their catalog. If a site is better viewed in one format over another the Store Owner can make this viewing style the default. This flexibility creates several browsing options for customers and helps Store Owners showcase products in the way that best fits their needs.

Each viewing style has its advantages for both the customer and Store Owner.  Grid view (top) shows more products at a time, while the list view (bottom) allows for more information like the product description to be immediately available to customers. Both views allow customers to see the product image, the rating, and the product name. In addition, customers can add products to their cart, compare box, or wishlist, potentially eliminating one more step between the customer and a conversion.

Customers will also find this ease and flexibility in Magento’s Compare Box. Unlike many online stores, customers will be able to compare products not just in a single category, but across the site. This allows customers to compare attributes from any category in your catalog, no matter how different they may seem. If a son is shopping for Father’s Day he can compare shared attributes like price or product rating between a golf club and an easy chair just as easily he could compare attributes like weight and size between two chairs. We wanted the Compare Box to remain visible while a customer browses, providing a constant, helpful list of items already added to compare, without forcing the customer onto another page.

The entire page is designed so that the customer sees browsing options like tags and product types first, on the left, while shopping tools like the Shopping Cart, Compare and Wishlist are available on the right. The constant presence of these tools provide an immediate reminder to the customer that they’re interested in these products, and encourages conversion.

Take a look, and tell us what you think! Have a suggestion or a question? Let us know in the comments!

Welcome to Magento Behind the Scenes, a new series on the Magento blog that will take you behind Magento and give you insight into why we're making the design and functionality choices that we are, as well as giving you a sneak preview into what you'll be seeing come August. We're kicking off Behind the Scenes with an introduction to the My Account Dashboard. Below is the wireframe we are basing the design on:

(click on the image to see it full size)

Magento's My Account Dashboard is a streamlined approach to presenting your customers with all of their account and sales information in one place. Our goal with this feature was to remove the frustration that comes with the text links that are found in many sites' Customer Accounts. Instead, we've made Magento's My Account Dashboard easier for your customers to browse without having to drill down into multiple pages, making desirable information the first thing that the customer sees.

We know how important it is for customers to be able to conveniently access their information. As our designer, Minu Oh, put it when asked about the Dashboard's structure:

"Customers need to find information pertaining to their orders or account information without having to go between multiple pages. We understand how customers scan web pages and what graphical elements give a page's content precedence. Web pages are read left to right and large, consistent bold headings give the contents visibility. This makes it easier for [the customer], and they are simply more open to further offerings of the store when all of their experiences are positive."

The My Account Dashboard is divided into two areas - the main customer account area, and the smaller shopping section on the right. When a customer accesses the Dashboard they can immediately see detailed recent order information and individual customer information at a glance. They can also see Recent Tags and Reviews in an easy-to-view format - we've capped them at five so that the Dashboard remains uncluttered. This gives the customer an intuitive layout that provides what they need to know at a glance, making the experience much smoother and, in the end, more positive overall.

We wanted to add to this positive experience with the account's shopping section. In it, the customer can find their Shopping Cart, Wishlist, and Last Viewed Items, keeping all of the products shown on the Dashboard tailored to the individual customer. For the customer's convenience, both the Wishlist and Last Viewed Items are also accompanied by product thumbnails to help influence a sale. The Wishlist and Last Viewed Items allow the customer to add products to their shopping cart without leaving the Dashboard. We also included a small marketing Callout area, allowing the Store Owner to post a banner advertising sales and specials.

This is only the beginning. In future, we plan to add even more features to the My Account Dashboard, including:

• Personalized recommendations
• Notifications of price-drops and specials on previously viewed items
• Gift registry information
• How many people used a user's tags
• How many people found a user's reviews helpful

Watch this blog to see the design decisions as we fit these elements into the dashboard.

Love it? Think we're forgetting something? Leave us a comment and let us know!