10 Ecommerce Progressive Web Apps for Your Inspiration
It’s an exciting time to be in mobile web design and development, as the mobile web undergoes a major technology refresh in the form of ecommerce Progressive Web Apps.
The best ecommerce Progressive Web Apps (PWAs) are transforming legacy mobile web practices and standards into native app-like experiences for your customers. We know PWAs provide fast mobile shopping experiences that consistently outperform responsive sites, and now we’re focused on optimizing user experience (UX) design to minimize friction that prevents mobile conversions.
However, because the technology is so cutting edge, there’s only a couple dozen enterprise ecommerce Progressive Web Apps as of writing. The quality of experiences will continue to rise as this new approach to the mobile web moves from early adopters to mainstream — with shoppers as the main beneficiaries. Take a look at the 10 best mobile ecommerce sites today for inspiration.
Curious about my rankings? Jump to the methodology section at the end of the post.
1. Babista
Babista is a large, mail-order brand headquartered in Germany offering high-quality women’s and men’s clothing. Their PWA is super fast, and the UX is well-executed, focused, and app-like. The web app maximizes the mobile user interface (UI) by making all the elements very large and tappable.
On top of the real performance enhancements, placeholder content is used to make it appear even faster. While this is a best practice, some of the pages reflow content after the load the load is finished, which can be a jarring and take the shopper out of the app-like experience.
Score: 644/800
Category: Fashion Retail
URL: https://www.babista.de
Lighthouse Test URL
2. Jumia Travel
If you are dreaming of a vacation on the beaches of Zanzibar, then Jumia Travel’s PWA is worth a visit. Jumia Travel is consistently one of the highest ranking ecommerce PWAs I have encountered. It follows a classic flight and hotel booking user flow, with a homescreen experience that is focused and allows users to find and select both hotels and flights quickly.
Jumia Travel could benefit from the use of placeholder content to stabilize the screens as they load content. I also found their typography system lacking hierarchy and contrast, especially in the hotel listing pages.
Score: 611/800
Category: Travel Booking
URL: https://travel.jumia.com
Lighthouse Test URL
3. Flipkart
Flipkart is a large ecommerce retailer headquartered in Bangalore, India. Flipkart was one of the first major retailers to use PWAs to create app-like experiences on the web, and it’s a delight to use — I’m a huge fan of the extensive use of tap feedback techniques they use on all button elements.
Another best-in-class feature that the Flipkart PWA possesses is a great offline mode. It was one of the only offline experiences I tested that felt truly seamless. My only critique of the Flipkart experience is that I find the recent redesign to be overly flat. Their old PWA design had great use of imagery and iconography to create a distinct and delightful experience.
Score: 611/800
Category: Consumer Goods
URL: https://www.flipkart.com/
Lighthouse Test URL
4. Redmart
Redmart is a Singaporean online supermarket with a friendly and fresh aesthetic. The PWA was one of the experiences I came back to again and again. It felt app-like, had a unique look, and solved a very challenging UX challenge of shopping for groceries on a mobile device. However, the lack of push notifications and an unstable offline mode are two big opportunities for improvement.
Score: 587/800
Category: Grocery
URL: https://m.redmart.com
Lighthouse Test URL
5. Lancôme
Lancôme is a global luxury beauty brand. The Lancôme UX is exceptionally crafted, with care and attention paid to ensure that the mobile experience matches their overall brand. I would consider the mobile UX amongst the best-in-class. Form accessibility and the use of subtle interaction animation are massive highlights. Friction does remain in the category and main navigation, which sometimes slows down the shopper finding the exact product they seek.
Score: 577/800
Category: Cosmetics
URL: https://www.lancome-usa.com
Lighthouse Test URL
6. Goibibo
Goibibo is one of India’s largest hotel and airline aggregators and offers a very well-crafted PWA. I found their overall brand aesthetic to be a bit generic, but their UX is well-executed and follows all the classic travel ecommerce booking engine patterns that shoppers have come to expect.
Score: 559/800
Category: Travel Booking
URL: https://www.goibibo.com
Lighthouse Test URL
7. Trivago
Trivago is another travel comparison site with a very performant PWA. The feature sets of a travel aggregator are typically rather shallow, but with this comes the ability to ensure every interaction is just right.
Trivago does a great job of providing ample tap targets, a clean interface, and great filtering to allow shoppers to compare various travel options. As with most of the aggregator experiences, the jumping-out point to view the various deals was confusing.
Score: 537/800
Category: Comparison Travel
URL: https://www.trivago.com
Lighthouse Test URL
8. Wego
Wego is a travel comparison engine based in Singapore. The experience has a shallow feature set similar to the other travel deal aggregators listed above. However, the full screen home screen is very distinct, along with a great loading animation pinned to the bottom of the listing page. I found the typography system throughout the Wego experience to lack hierarchy and contrast — the addition of a few larger headlines would create better landmarks for shoppers’ attention.
Score: 534/800
Category: Comparison Travel
URL: https://www.wegotravel.ca
Lighthouse Test URL
9. West Elm
The West Elm PWA beta site is a great example of a contemporary mobile commerce experience. The site focuses the shopper with large product imagery, and uses fixed header and footer elements to keep key actions in front of the shopper at all times.
The design could benefit from some stronger category landmarking, as I had a tendency to get lost as I navigated products.
Score: 531/800
Category: Home Decor
URL: https://mobile-beta.westelm.com
Lighthouse Test URL
10. Snapdeal
Snapdeal is an Indian ecommerce company. It started as a daily deals platform, but has expanded to become one of the largest online marketplaces in India. Snapdeal has a great user experience that uses pinned footer elements, large sort and filter menus, and clever category navigation. The pinned footer navigation did cause some friction when using an iOS device, as it required the shopper to double tap the UI to bring it into focus.
Score: 518/800
Category: Discount Consumer Goods
URL: https://www.snapdeal.com
Lighthouse Test URL
Methodology
For this comparison, I focused entirely on ecommerce PWAs, and introduced a design or UX score into the mix instead of just basing a ranking off Lighthouse performance scores. Also, given Lighthouse’s recent move to version 2 (and its rating volatility), I incorporated Google Pagespeed to provide a more generalized scoring system.
What I found via the quantitative measurements was that some of the high-scoring sites on pure performance still had significant problems with UX design. To help balance the rankings out and to measure the quality of the UX, I did a heuristic review of each experience, and ranked each sites from 1–15 within a 10-point criteria. Criteria ranged from the overall aesthetics, use of app-like navigation patterns, perceived performance improvements like placeholder content, friction-free text input, and the use of PWA features such as add-to-homescreen, push notifications, and offline experience.
If you’re looking for other PWAS, the PWA directory is a great place to start and is consistently updated. They also have a great feature that keeps track of Lighthouse and Pagespeed results over time. Their directory is diverse from small personal sites, games, ecommerce, and publishing. Cloud Four’s PWA Stats is also a great starting point to see some of the bigger brands and the results they are attributing to PWAs.
I also looked at PWA Rocks, which started out strong but at the time of this publication is no longer actively curated.
Score Sheet
All tests were conducted June 5th, 2017.
Ranking Scores
Ranking scores were based on the following synthetic testing tools:
- Lighthouse v2 scores for Progressive Web App, Performance, Accessibility, and Best Practices from the Google Chrome Plugin.
- Our Mobify server side testing tool which provides Page Speed results.
- A manual URL test via testmysite.com, which provides a Mobile Friendliness score, and Mobile Speed scores.
I tried to avoid testing a homescreen URL for the Lighthouse scores. I find that the accessibility scores are generally higher than they should be, given the fact that homescreens typically lack input fields. Instead, I tried to use a Product Detail Page as the Lighthouse score test URL.
Heuristic Review
My heuristic review of each experience included the homescreen, a product listing page, and a product detail page. Checkout flows were not part of the evaluation due to wide variability in checkout flows between sites due to regional payment differences. The UX review is not comprehensive and should be considered shallow in scope.
After doing a heuristic review of the PWA, I scored each site across 10 criteria with the following scoring rationale:
0 = Not observed in the test, or poor experience
5 = Average experience
10 = Above average experience
15 = Best in class example, a real stand out.
Other sites that we reviewed and scored but didn’t make the top 10:
Originally published at www.mobify.com on June 13, 2017.
