The document summarizes key differences between the user interfaces of Magento 1.9 and Magento 2.X. Some major changes discussed include reducing the purchasing path from 6 steps to 2 horizontal steps, introducing product thumbnails to the order summary, and improving the responsive design for mobile devices. The new Magento 2.X default skin called Luma also provides an enhanced user experience compared to the Magento 1.9 default skin Madison Island. Overall, the changes aim to improve performance, usability, and the mobile experience for e-commerce sites updated to the latest Magento version.

2. Introduction
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 (Responsive Web Design¹) 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.
¹Responsive Web Design – 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.
2

3. Introduction
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).
¹Lightbox is a JavaScript library that displays images and videos simultaneously dimming out the rest of the page.
3

4. List of contents
Introduction
Differences
1. Default skins
2. Purchasing path
3. Cart
4. RWD
5. Administration panel
6. Backend – platform management
Summary
4

5. Differences

6. Default skins - Magento 1.9 – MADISON ISLAND
See a demo
6

7. Default skins - Magento 2.X - LUMA
See a demo
7

8. 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)¹ .
¹ https://support.google.com/adsense/answer/6196932?hl=en
8

9. Purchasing path

10. 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.
Figure 1. Subsequent steps in Magento 2.X
10

11. Purchasing path
The "new" purchasing path has changed a lot:
● 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.
11 Figure 2. Recognizing an existing user

12. Purchasing path - Authorization
12
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.

13. Purchasing path - Step 1
13
Magento 1.9
STEP 1 = Authorization
Magento 2.X - After entering customer data regarding
the shipping address, the process proceeds to step 2.

14. Purchasing path - Step 2
14
Magento 1.9 - 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.

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

16. Purchasing path - Step 4
16
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

17. Purchasing path - Step 5
17
Magento 2.X - n/a

18. Purchasing path - Step 6
18
Magento 2.X - n/a

19. Purchasing path - Confirmation
19

20. Purchasing path
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.).
Figure 3. Magento 1.9 – Steps during the purchasing path
20

21. Purchasing path
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).
Figure 4. Magento 2.X - Steps during the purchasing path
21

22. Purchasing path
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.
It’s worth noting that in Magento 1.9 you can enable “1 page checkout” with only 2 steps as well.
22

23. Cart

24. RWD
24
Magento 1.9 Magento 2.X
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).

25. Cart
25
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).
Figure 5. System message when you add a product to your shopping cart
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

26. RWD

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

28. RWD - Main navigation
28
Magento 1.9 Magento 2.X
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 Accoun

29. RWD - Filtering
29
Magento 1.9 Magento 2.X
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.

30. RWD - Authorization
30
Magento 1.9 Magento 2.X

31. Administration
panel

32. Administration panel
32
Figure 6. Editing customer account information in Magento 2.X
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).

33. Administration panel
33
Figure 7. Managing customer panel in Magento 1.9
In Magento 1.9, the side bar was placed on the left, and
the content was displayed on the right (Figure 7).

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

35. Administration panel - Dashboard/Sidebar
35
Magento 1.9 Magento 2.X

36. Administration panel - Edit Account Details
36
Magento 1.9 Magento 2.X - he method of
editing e-mails has changed
(after selecting the checkbox)

37. Administration panel - Wishlist
37
Magento 1.9 Magento 2.X - Presentation of the Wishlist using tiles

38. Backend - platform
management

39. Backend - platform management
39
Magento 1.9 Magento 2.X

40. Backend - platform management
40
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.
Figure 8. Adding a product "Step by step"

41. Backend - platform management
41
● 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.
Figure 9. Adding columns in the customer management panel

42. Summary

43. Summary
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.
43

44. Summary
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).
However, we’ll write about it next time!
¹ https://blog.amasty.com/magento-1-vs-magento-2-performance-comparison-speed-test-results/
44

45. Mateusz Gromulski
Mateusz is a UX Designer focused on the
technical aspect of UX/UI. He is an enthusiast of
Graphic Design and User-Centered solutions
which leads to strengthening the company position
in the market. He took part in numerous B2B and
B2C projects for brands like Energa, Gaspol,
Sportofino or Ringier Axel Springer.
About The Author

46. 46
Divante Sp. z o.o.
ul. Dmowskiego 17 50-203 Wrocław(+48) 733 355 596hi@divante.com www.divante.co
If you’ve got any questions regarding Magento
2 implementation - just contact us!