More and more eCommerce platforms make the bold decision to migrate to the latest version of Magento 2.X. There might be challenges involved such as low availability of plugins (compared to Magento 1.9) or a completely new purchasing path logic and operation. On the other hand, the newest version of Magento has better performance, User Experience (perception of the system by the user) in RWD* and an intuitive administration panel. Another argument for migration to Magento 2.X is the fact that Magento 1.9 soon won’t be supported anymore.

The following document presents differences between Magento 1.9 and 2.X, in terms of UI elements. It provides a summary and description of views from the front-end perspective, focusing on key UX areas:

● Cart and purchasing path
● Customer Control Panel
● Presentation of individual elements (e.g. system messages, login authentication using lightbox function).

The article covers the following skins: Luma (providing modifications for a clean version of Magento 2.X) and Madison Island (the default skin for Magento ~ 1.9).

* Responsive Web Design – are one of mobile-first website designing technique aimed at automatically adjusting the look and layout to the device it is displayed on, e.g. a desktop, a smartphone or a tablet

Differences of UX elements in Mangeto 1.9 and 2.X

1. Default skins

Luma is the default skin for Magento 2 (while the theme “Madison Island” was the default in Magento 1.9). Both skins were designed in a RWD approach. The new layout was designed to achieve better search results (from April 21 2015 Google gives greater importance to mobile-friendly websites).

Default skins – Magento 1.9 – MADISON ISLAND (See a demo)

Default skins – Magento 2.X – LUMA (See a demo)

Sources:
https://support.google.com/adsense/answer/6196932?hl=en

2. Purchasing path

The “new” purchasing path has changed a lot:
● 6 steps were abandoned (the division into steps still exists, but graphics were not implemented into Luma) and corrected step numbering, for example authorization is step 1.
● Order summary contains thumbnail images of products.
● Subsequent steps are presented horizontally.

● Introducing two steps of the Purchasing Path. The first is to gather information about the customer, the second contains billing information.
● New features also include recognizing pre-registered customers via their email address and suggesting for them to sign in.
● Changes in payments. Magento 2.X is integrated with payment gateways (PayPal, Braintree, Authorize.net, WorldPay (Enterprise Edition), CyberSource (Enterprise Edition), whereas in Magento 1.9 the integration feature was limited.

Purchasing path – Authorization

Magento 1.9: Authorization displayed as one of the steps in the purchasing path (for Magento 1.9 this is step 1). Disabling authorization is possible.Magento 2.X: Authorization displayed as a lightbox. On the back-end, it is possible to disable authorization – when moving from the shopping cart to Checkout Step 1, it is displayed immediately.

Purchasing path – Step 1

Magento 1.9 in the first step of purchasing patch runs authorization process, while Magento 2.X already asks to enter customer data regarding the shipping address.

Magento 2.X – After entering customer data regarding the shipping address, the process proceeds to step 2.

Purchasing path – Step 2

Magento 1.9: Begins the actual purchasing path.  The first step requires entering a billing address. If the customer selects “ship to this address” then the process proceeds to step 4.

Magento 2.X : In the ‘review & payments’ view, the customer has the option to choose a billing address. They can also check the shipping address and the shipping method. The order summary includes a preview of the products along with thumbnails.

Purchasing path – Step 3

Magento 1.9:  If the customer doesn’t select „ship to this address”

they are redirected to a form with the same information that is listed in the billing address form.

It’s possible to copy the previously entered data. In order to do so, tick „Use Billing Address”.

Magento 2.X: n/a

Purchasing path – Step 4

Magento 1.9: In Shipping Method tab, there is a set of checkboxes to choose the desired shipping method. After ticking one of the boxes, the customer moves to the next step.

Magento 2.X: n/a

Purchasing path – Step 5

Magento 1.9: Picking the payment method

Magento 2.X – n/a

Purchasing path – Step 6

Magento 1.9: Order review

Magento 2.X – n/a

Purchasing path – Confirmation

Summing up, the purchasing path in the platforms discussed has undergone a significant transformation. In Magento 1.9, 6 steps are selected by default (Figure 1.).

In the next release of the platform, using the default Luma skin, their number was reduced to 2 (Figure 2). The shipping data can be entered in the cart view (on the right hand side, in the order summary).

In the new purchasing path there is a visually better way to present the order summary with a list of products, their short descriptions and thumbnails.mIt’s worth noting that in Magento 1.9 you can enable “1 page checkout” with only 2 steps as well.

3. Cart

Magento 1.9

In Magento 2.X the “Empty cart” option has been removed. There is also no “Continue shopping” hyperlink, while the shopping cart updating feature (for example, changing the quantity of ordered products) remains unchanged. The dropdown “Apply Discount Code” has changed its position from the right side panel (cart summary) to the bottom of the page (below the product line).

In Magento 1.9, when a product is added to a cart, the customer is redirected to a shopping cart that displays a system message (Figure 3).

In the new platform, a system message informing you of the addition to the shopping cart from the product list also appears at the top of the page. The redirection on both platforms can be set in the Magento administration panel.

4. RWD 

A huge change in Magento 2 is also a way of presenting content on smartphones and tablets – in responsive framework of the platform.

RWD – Main navigation

In Magento 2.X you can see the difference in main navigation, where on the left we can see a section covering the rest of the page. This section contains a breakdown of the main menu (mostly product categories) and My Account.

RWD – Filtering

Product filtering is structured similarly. In Magento 1.9, filters are placed above products while in Magento 2.X filters are displayed throughout the screen, covering the rest of the page.

RWD – Authorization

5. Administration panel

The customer panel has changed a lot (though most changes can only be seen in the platform backend). Magento 2.X has a fully responsive customer panel. Side panel tabs (such as Account Information) appear after reloading the entire page (Figure 6).

In Magento 1.9, the side bar was placed on the left, and the content was displayed on the right (Figure 7).

RWD

The number of links has decreased (“RECURRING PROFILES” hyperlink was removed from the “My Account” navigation) and the welcome message has been removed (“Hello … From your My Account Dashboard …”).
The “Recurring Profiles” feature allowed you to make regular payments, such as subscriptions. It was in a Beta (test) version of Magento 2.0, but currently it’s not supported. Perhaps this feature will be restored in the next release of the platform.

Administration panel – Dashboard/Sidebar

Administration panel – Edit Account Details

Administration panel – Wishlist

6. Backend – platform management

Backend – platform management

The view and navigation in the Magento admin panel have also undergone a major change:
A new, simple process of adding products using steps (Figure 8) in a different way than before. In the previous version, the user initially selected a product type and a feature set but the navigation was done by switching between tabs.

● The possibility of adding video files was implemented; it’s done in simple and intuitive way, similar to uploading images (if you configured your account with YouTube or Vimeo).
● Since Magento 2.0, there is no need to contact developers to add or remove columns, e.g. in Customer Management. You can select columns from the browser (Figure 9). In addition, individual columns can be moved with a simple drag and drop

Summary of UI elements in Magento 1.9 and 2.X

So the question is – how to evaluate changes in the new Magento release? By referring to developers’ knowledge, you can favorably refer to the performance or code structure of the platform. Pages load faster (due to Full Page Cache and Varnish Cache) not only on traditional monitors, but also on mobile devices.

In a user-oriented approach, we also see a positive change in the use of smartphones and tablets. New mobile navigation or filtering are examples of features that make it easier for you to browse your e-shop and can lead to increased sales. For example, when implementing Magento 2 for the Polish fashion brand Solar we saw a significant increase in transactions and revenues.

Is it worth implementing Magento 2? Worth it. This is confirmed not only by numbers or data from reports but by satisfied customers whose group grows with each passing day. Good UX Design (because the discussed “Luma” skins are just a template for further modification) and professional implementation are components of success in e-commerce. This is also confirmed by the IT industry, where change is inevitable. It is worthwhile to go hand in hand with current trends and new technology.

To sum up, most of the differences between Magento 1.9 “Madison Island” and Magento 2.X “Luma” was introduced in the backend (code structure changes, XML handling, platform performance was increased), but this article focused on frontend aspects, especially useful for shop design:

● Increased UX for the purchasing path and administration panel.
● Huge frontend changes in mobile views (navigation in RWD approach, filters implemented in the product list).
● Changed the way pages load (content display was accelerated).

Many differences can also be seen in the cleanest form of Magento (commonly referred to as Magento Blank).

Sources:
https://blog.amasty.com/magento-1-vs-magento-2-performance-comparison-speed-test-results/