The COVID-19 pandemic boomed the eCommerce sector and enlarged the share of online sales. During the last year, its ratio has grown to the scale that was expected in five years. As a result, most eCommerce stores experienced an increase in conversions and sales.
Providing a smooth user experience with intuitive navigation is now more critical than ever before. The competition is tough, and every client matters. So, if you want your store to convert, you must ensure a flawless UX throughout the entire customer journey. From the moment a client lands on the page till the actual order delivery, and even further.
In 2021, there are two key problems that mobile shoppers face: a slow store and poor, outdated UX. Since most people prefer not having desktop computers at home, and 70-80% of B2C purchases are made using smartphones, mobile optimization is vital.
help to solve these problems. A PWA is an approach that allows creating websites that look and work like native applications. We’ve explained the development process in detail in these two guides on and the .
Contrary to common belief, a PWA is more than just a progressive framework and a service worker. Apart from that, we believe that a site can be considered a progressive web application if it offers a decent user experience.
Our UX and dev teams have completed dozens of Magento PWA projects. Our deep technical knowledge and visual experience help us create great progressive apps for our clients. Now, we want to share our expertise with you. We've collected and analyzed 13 examples of Magento PWAs. Keep reading to find out which UX mistakes you can avoid when building a PWA for your eCommerce store.
Table of Content
13 Magento Progressive Web Application Examples
1. Bright Star Kids
specializes in customizable goods for kids. These include clothes and school supplies like backpacks, lunch bags, among other adjacent goods. The greatest thing about it is the customized product builder. Users assemble unique looks of the selected item in the configurator step by step according to their taste.
PWA technology used: ReactJS
Bright Star Kids performs fast thanks to the use of . Plus, this Magento PWA example follows the fundamental design rules for providing a smooth user experience. For instance, the homepage rationally uses space, and the header area is uncluttered. Elements like “What’s Trending” are swipeable; everything is intuitive.
Placing the menu bar at the bottom of the page can improve the homepage design. It would also be handy for users if the top promo stripe and the chat were closeable.
The menu opens as a full-screen pop-up and is consistent. Users can access their accounts and major site sections, including the chat and language switch. All subcategories open in new screens.
The full-screen search area presents the results as a list. Each product has an image preview, title, and price, highlighting the input text in the result name (which are all considered best practices).
The category page layout shows four products at a time. The items have a wishlist “hearts”, and the description text saves space thanks to “Read more”. The filter and sorting open in pop-ups, clearly showing every option.
The product pages emphasize item configuration using the product builder. The “Create Your Own” constructor is split into simple steps and immediately displays the changes once the user has selected an option. The product description, details, and reviews open as separate pop-ups.
The cart area is consistent and available in a pop-up too. All the elements are tappable and logically placed. The stripe with "You're only 50$ away from free shipping" calculates how much more to add to the order, triggering customers to purchase.
The checkout area uses space very wisely. At the top of the page, we can see that it’s a “Secure checkout” and the order summary button that opens in a pop-up. Each step of the checkout is broken down and filled out on a separate full page. The number of fields is minimal (f.e., first and last name fields are combined into one). This progressive app was created here, at Onilab. If you like its UX design and wish to build the similar one for your store, turn to our company for .
2. Major Rum
Major Rum is a Dutch online retail company whose main focus is alcoholic beverages, primarily rum and gin. It offers its customers a rich selection of brands from the Caribbean Islands to India and worldwide.
PWA technology used: Vue Storefront
Overall, the problem of this Magento progressive web application’s design is the irrational use of space. Many elements are unnecessarily large, and users have to scroll too much. To change this, the design should follow one of the primary UX\UI principles for PWAs: devoting one screen for one action.
There’s very little useful info located above the fold. So the homepage can be improved by reducing the header and logo size, narrowing the top menu stripe, and replacing the list of benefits with a product categories slider.
The store’s menu, search, and cart are pop-ups that conveniently take up the full screen. A logo can replace the menu’s “Home” button. Plus, the search bar may be narrower, and the results should show specific products with categories in slider format.
Category pages have “breadcrumbs” which are handy for user navigation. The products would look better in a slider or grid format. Likewise, the top menu can be hidden when scrolling down, and the filter and sorting may be placed in one line.
The product pages can be improved too (removing the top header image, putting the “Add to Cart” and quantity buttons above the fold, showing the price by the “Add to Cart”).
The cart should have a quantity changer element and a “Proceed to Checkout” button. The “Edit” and “Remove” buttons are placed too close.
The checkout can benefit from having a progress bar with all the steps. We'd suggest replacing the logo with a security indicator and minifying the number of fields. Whenever the user has to type something (i.e., in the search or login area), the fields are visible and simple to fill out.
3. Sophie Conran
is a London-based brand that sells various home products, including bed and bath, kitchen and dining, garden essentials, and home decor. The abundant collections and product lines have a wide range of items to select from (accessories, textile, cutlery, furniture, garden tools, and beyond).
PWA technology used: ScandiPWA
The homepage’s header area and narrow top menu strip aren’t overloaded with unnecessary elements. But the buttons could be smaller, and product categories would look good in a slider.
The menu area could be more user-friendly if the categories had a different size and the subcategories had images and arrows. The search area opens up as a full-screen pop-up. The search results have small product preview images but don’t show prices. Adding subcategories and highlighting the searched word are possible improvements.
The category pages have an appealing layout (four products per screen). But the product labels look like buttons and can confuse users. Such pages can be made better by showing the sorting and the products before the large category header banner.
The product pages can benefit from a smaller gallery and moving the title underneath. It makes sense to place the “Add to Basket” button with the quantity indicator above the fold. The product rating and wishlist feature would be a good fit as well. The “You May Also Like” could be arranged in a slider.
Using a heading to signify that the pop-up is a shopping cart would be useful. Most elements may have a closer placement. The newsletter sign-up seems irrelevant here.
The checkout of this Magento-based progressive web application takes up three screens. Shortening it and showing the number of steps is reasonable. In turn, the steps may be organized into several dropdowns or pop-up blocks. The field labels can serve as placeholders, and a security indicator would be helpful.
Just a couple of enhancements for the login. Adding a password preview button would let users check their input text. Plus, the newsletter sign-up can appear as a checkbox under the email field.
4. Timetravels
is a Finnish company that provides travel services. The main destinations for trips on offer are Scandinavian countries, Russia, and the Baltics. This website is among those Magento PWA examples that have many custom features, particularly, a very complex multi-step checkout.
PWA technology used: ReactJS
This PWA is aimed at a rather young target audience. The banner on the homepage is large and appeals to emotions; there’s also a handy search bar. All benefits of traveling with the company are visible.
The menu area occupies the whole screen, and its design catches attention. The destinations are presented with images, whereas the rest of the submenu sections are listed. All subcategories open as separate pages.
The search takes up the whole page, following the “1 screen per 1 action” principle. The results show destinations, categories, and tours with preview images.
The category pages display information on the destination and specific tours (if they are available). The presented “products” have many details. The sorting and filter bar moves to the bottom of the screen when users scroll down (both elements open in pop-ups for convenience).
The product pages have a “sticky at the bottom” stripe that always features the tour’s price and the “Book” button. This is reasonable because this information is readily available within the user’s visual field irrespective of which part of the page they’re scrolling. Because there’s a lot of information about the tour, it is split and placed in tabs. Vital parts that make up the tour (such as the accommodation options) open as separate pop-ups.
The checkout of this online store isn’t standard either. Because the booking process is very complicated, it implies multiple steps. The checkout area clearly outlines the steps and saves space by indicating the field names within the fields. When data is filled out (f.e., the address area), the fields turn into blocks with a preview and “Change” option.
The login has a useful password preview feature and one-time login for those who forgot their password.
5. Bloomique
is a retailer of house and garden plants based in the Netherlands. The online store has a rich selection of indoor and outdoor plants that are split by origin, care type, purpose, etc. Bloomique also offers expert advice on how to care for the plants.
PWA technology used: Vue Storefront
This is one of the in which the homepage has a reasonable element choice. Some of them can be smaller (the top menu area, the three navigation dots).
The full-sized search bar can be removed from the homepage and category pages. It should be opened in a separate full-screen pop-up, and the search results can be shown differently.
The menu doesn’t take up the full screen when it’s opened, so this can be changed to use space more rationally. The layout of the menu items and the menu content may be changed too.
The category pages have “breadcrumbs” that clearly show the user which part of the site he is browsing. Yet the pages may have an alternative product layout as well as filter and sorting placement.
The product pages have large gallery images and a convenient stripe with “Add to Bag” or “Wishlist” at the bottom of the screen. The page can be improved, though (product title and size selector placement, price and currency indication, etc).
The cart can also be redesigned (the top menu area, the bottom part of the cart with reviews).
The checkout clearly shows how many steps are ahead. But overall, it doesn’t have a native app look and can be improved (the use of space, the word “Checkout”, Order Summary placement, number of fields to fill out, etc). The login area has a nice feature that allows you to log in with social media accounts.
6. Enamor
is an Indian premium lingerie and clothing brand. The store’s collections include nightwear, sportswear, and lingerie from everyday essentials to more exquisite lines such as those for brides.
PWA technology used: ScandiPWA
The store’s homepage has an orderly top menu stripe with necessary icons. But the chatbot icon constantly follows the user and often blocks important clickable elements (so it’s better to move it to the menu or footer).
The menu area is quite awkward and would look better on a full screen. The logo and currency indicator may be minified. Moreover, subcategories could open to the right or on a new screen (not as dropdown options).
The search area is user-friendly. Each product result has a small image, name, and price. “Results for” can be replaced with relevant categories, and the deletion feature may be inside the field.
The category pages have a good product layout, but “breadcrumbs” would be useful. The header banner may be smaller, and the text would look good on the banner. What’s for the filter pop-up, a heading may replace the logo, the filter categories and options can be reorganized.
The product pages show most of the info above the fold except the size and color. The quantity and “Add to Cart” buttons are advantageously “stuck” to the bottom.
The cart also opens in a full-screen pop-up. It can benefit from a title with the number of items in place of the top menu. The first screen is missing the “Proceed to Checkout” button because of the cross-selling block. The chat is unnecessary here as well.
Some checkout improvements include making it shorter, removing excessive fields, adding checkout process steps indicator.
7. Gastro Hero
is a German retailer that sells various equipment for catering supplies, one of the largest companies of its kind in Europe. The company operates in five countries in Europe and offers a broad selection of different products such as cookware and kitchenware, serving trolleys, food storage, kitchen furniture, and various cooking equipment like grills, fryers, stoves, refrigerators, etc.
PWA technology used: Vue Storefront
The elements on the homepage of this Magento PWA example are organized rationally. Yet, the banner area can be more compact. The top navigation menu may be optimized by removing the word “Sign In” (Anmelden) next to the account icon.
Furthermore, the search could be moved to the menu stripe and open in a full-page pop-up (not directly on the homepage). The search results should ideally show products with prices and preview images (not only the categories).
Keeping in mind that the store has an extensive product range, the category \ subcategory division in the menu is quite intuitive and logical. Subcategories may open in separate pop-ups, and the chat icon can have a different placement (so it doesn’t cover up clickable elements).
The category page layout would be better if it showed more than one product per scroll. As of now, there are too many details on every product; they can be shown in a pop-up or on product pages instead. We’d suggest putting the filter and sorting in one line.
The product pages also use space irrationally and have vital information scattered on several screens. They may be reorganized and enhanced (i.e., product name and price placement, gallery size, “Add to Cart” and quantity buttons, etc.).
Although the cart preview pop-up is consistent, the shopping cart area is extensive and isn’t user-friendly. Plus, the information about the added products is unorganized and is missing elements like “Remove from Cart”, “Wishlist”, and “Proceed to Checkout”.
The checkout can be redesigned as a 1-step one and be fitted with a progress bar. The search area isn’t necessary there, and the fields can be smaller to save space. What’s for the login, it doesn’t open to the full screen, which is quite inconvenient.
8. Lights.ie
is an Irish online store branch of the European company Lampenwelt. The store specializes in selling various lamps and lighting solutions. It sells over 40 thousand pieces of indoor and outdoor lighting, a plethora of LED lamps, and even lights for Smart Homes.
PWA technology used: Vue Storefront
On the whole, this is a good example of a PWA with a consistent design. Site elements are selected rationally and have good size, i.e., all the main ones fit within one screen.
The homepage has a neat header area and shows the main categories and “Rooms” in slider format. Perhaps the main positive takeaway is that the navigation menu is placed at the bottom of the screen. It is better than a standard “burger” menu with closed navigation. Because many users shop from their smartphones, bottom menu placement is useful since the icons are simpler to reach by thumb. This is considered good UX\UI practice for mobile PWA design.
The menu is simple and takes up the whole screen. It can be improved by opening the subcategories in separate pop-ups instead of listing them in dropdowns. The search area is neat but can benefit from showing products apart from categories when the keyboard is open. There’s no option to delete the input text in the search within the field (only using the keyboard).
The category pages have many convenient filters that open as full-page pop-ups. The product layout showing two items at a time is also handy, yet the page can offer the option to select the grid or list view.
The product pages use sliders for cross-selling sections. The gallery can be improved by showing the number of images and allowing zoom. The bar with “Add to Cart” could be stuck to the bottom, and the product title can be placed under the gallery by the price.
The cart has a clearly visible heading and a “Proceed to Checkout” button. The elements within the blocks of the added items can be reorganized to use space more rationally.
The checkout conveniently shows the steps in a progress bar. It can use a product overview block at the top. The field names may be indicated as placeholders to save space.
9. Shure
is an Indian brand that specializes in audio equipment and devices. The store has a large selection of microphones, headphones, earphones, and various accessories for streaming and recording sound.
PWA technology used: ScandiPWA
This Magento PWA example has a consistent top menu stripe that carefully organizes and fits all the needed icons. Yet, the menu may be placed at the bottom of the page to have a native application look.
The homepage banner takes up too much space. Also, the featured categories on the homepage would look better in a slider.
The slide-out menu could use some work. For example, the slogan and the logo take up too much space, plus the menu doesn’t open to the full-screen view.
There’s a convenient search area that opens as a full-page pop-up. It presents the results clearly, naming each product, showing its price, and a small image preview.
The category pages have a simple but to-the-point design with a neat product layout. The sort feature is simple to use. The filter pop-up can benefit from more filter categories and moving some elements around for convenience.
The gallery on the product pages could be narrower. Plus, essential elements should be placed above the fold. For example, the price, quantity, “Add to Cart”, and “Buy Now” can go before “Check Availability” and “Enter Pin Code”.
The shopping cart is compact and has well-organized elements. On the other hand, the checkout is too lengthy, uses space irrationally, and is missing a progress bar with steps.The login area can be improved by changing the colors of some buttons and adding a password preview.
10. Lakrits Roten
is a Swedish online store that mainly sells different kinds of sweets and candies, mostly those made of licorice, chocolate, and caramel.
PWA technology used: Vue Storefront
Once again, we see a Magento PWA example with a bottom navigation menu and easy to swipe sliders. These are rational decisions that make it convenient for users to browse the store on smartphones.
Nevertheless, the homepage has a massive top menu that partially duplicates the bottom one. Such an approach with both menus on the same screen is quite odd.
The search field is intuitive. But, the search results cards are way too large and can be reorganized to fit more products with prices and highlighted search input. The menu takes up the whole screen and is well-organized. It has a handy search bar, and all subcategories open in new full-screen pop-ups.
The category pages can be redesigned. Overall, they use space irrationally, are missing breadcrumbs, and have not the best element placement. We’d suggest minifying the banner and description text. Plus, the filter stripe may be placed above the products. The product cards should be seen above the fold; they’ll look better if there were no duplicate discount messages and had “Cart” buttons.
The product pages use space unreasonably too. There’s very little vital information above the fold; the heading font is too large. The “Add to Cart” and quantity buttons could also be placed higher on the page to omit a pointless scroll.
The cart area can benefit from reorganizing the elements as well. I.e., lots of space could be saved to show the “Proceed to Checkout” button.
The “Order Summary” area from which the checkout begins may be presented as a narrow bar that opens the information in a pop-up. A progress bar with steps, secure checkout indication, and better-organized fields (in 1-step checkout format) would enhance the page too.
The login area should be modified. The header area is massive, and there’s no social media login option.
11. Collégien
is a French brand that produces various hosiery products like slipper-socks, tights, socks, and different knitted goods and accessories. The company uses high-quality materials, including cashmere, wool, silk, cotton, and lurex.
PWA technology used: ReactJS
The homepage has a neat top menu bar. We’d suggest changing the heading fonts, colors, and buttons on banners for better visibility. Also, the featured categories can be in slider format for easier navigation.
The menu with dropdown subcategories is quite simple to browse. Yet, it doesn’t open to the whole screen, which isn’t convenient. Furthermore, there’s no search bar on the site whatsoever. This is very odd since online stores should ideally offer users the opportunity to find what they’re looking for faster.
The category pages are intuitive and have a layout with multiple products per page. If the products had wishlist “hearts” or “Add to Cart” buttons, they would look better. The filter and sorting are quite user-friendly.
We’d recommend putting the “Add to Cart” button above the fold on product pages. It can be placed next to the quantity picker as a sticky bar. Some elements may be reorganized to save space (i.e., smaller product title font, all “size” elements in one line, etc.).
The cart has all the needed product information within a single screen. The cart can benefit from a wishlist feature. Plus, it would be easier for users if the “Discount code” and “Shipping” were available as fields (not dropdowns).
Although the checkout is split into steps that users fill out “page by page”, the progress bar doesn’t show how many steps there are. The checkout is lengthy; its elements can be moved around and minified to save space. It is missing the “Secure Checkout” indication as well.
The login has all the main elements, but for some reason, it doesn’t open to the full window.
12. Unity Freedom
Unity Freedom is a Spanish cosmetics store that sells natural beauty products. The retailer finds and resells the world’s top skincare, haircare, and makeup brands, presenting a broad selection of products.
PWA technology used: Vue Storefront
The homepage of this Magento progressive web application has a neat top menu bar and a nice featured products slider. However, some elements can be resized and moved around to better fit the first visible screen.
The menu area may be improved by adding a search field. The used font is tiny and can indeed be bigger. This would improve readability since there aren’t that many menu items.
The search opens as a separate full-screen pop-up. Nevertheless, there’s no “X” for deleting text within the search field. Plus, the search results are way too large and are inconvenient to scroll on a mobile device. I.e., the keyboard that occupies half of the screen wasn’t taken into consideration. It would be better if the results were listed with a small preview, title, price, and highlighted input text.
The category pages are neatly organized and have a good layout (showing four products at a time). “Breadcrumbs” are missing, though, and headings shouldn’t be duplicated. The filter area can also be simpler to use (i.e., full-screen view, different design for filter options to reduce scrolling).
The product pages may be enhanced by using space wiser. At times we see large fonts and elements that “push out” important information, which should ideally be shown above the fold.
The cart area is quite neat and has a clear “Proceed to Checkout” button. Yet, some elements are placed too close to each other and are hard to tap on.
The checkout is very lengthy and doesn’t have a progress bar with steps. Alternatively, a more user-friendly layout would offer to fill out each checkout step in a separate pop-up. The Order Overview could be at the top (not at the end). Moreover, although the field titles are placeholders within fields, their light grey color isn’t readable.
The login opens on a full screen. It may show the password preview for convenience.
13. Pet City
is a Greek retailer of goods for pets. The assortment includes numerous brands that produce food, toys, collars, leashes, sprays, litter boxes, and anything else a pet owner might need all in one online store.
PWA technology used: ScandiPWA
The homepage could benefit from a more space-saving layout. There are several parts of the page with unused space. Nevertheless, the store has an interesting design solution for the top navigation menu. As the user scrolls down, the menu bar conveniently moves its position from the top to the bottom of the screen.
The store’s menu takes up the whole page. Overall, it is easy to navigate and close, the subcategories open in a new screen.
Although the search area is in a full-page pop-up, it strangely zooms in. The search field area is large and missing the input text deletion. It lists product results with their preview and name but doesn’t highlight the searched word and doesn’t show prices. So, there's a lot you can do to in this case.
The category pages have a nice layout with more than one product per page. The product cards have all the needed info and can simply be added to the cart. The filter area has many options, so it would be better to open each of them on separate screens instead of using an accordion design.
The product pages have all the elements that a user might need above the fold. The quantity and “Add to Cart” buttons are always available in a bar at the bottom of the screen.
The cart page also has a well-balanced design. Yet there are two “Checkout” buttons, which is a bit confusing. The “Remove from cart” button can be placed more habitually on the right side.
The checkout has a progress bar with steps but uses space irrationally. Field names are often duplicated within the fields. This isn’t reasonable, so the titles above the fields can be spared to save space.
The login area offers two tabs for registration and login. The fields look neat but are missing the password preview feature.
Final Thoughts
Summing up, getting a progressive web application is a beneficial move for Magento store owners. It’s a way to shift from a “heavy” solution to a flexible one that’ll live up to the growing needs of users and the changing market.
A PWA performs fast and allows Magento stores to take a giant leap towards , the future of online sales. Their intuitive UX and fast speed ultimately make customers happier regardless of which device they use to shop.
So, if you’re ready to go for it and need an experienced team to handle the creation of your progressive web application, feel free to turn to us for professional . We’ll be thrilled to work on your project!
