A nice surprise for a Thursday afternoon ... Can you make out what it says?
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.
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.
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 will display as shown above. If only 1 item is added to cart, the regular price is used.
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.
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)
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:
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!
RSS: All Blog Posts