17 Progressive Web Apps for Your Inspiration

It’s 2018 and the mobile web is quickly improving with new Progressive Web Apps (PWA) going live every day. Pinterest, Starbucks, Tinder, The Weather Channel, and Twitterlight all launched PWAs in the past six months. The PWA landscape across ecommerce has also changed drastically just over the last year. It seems like new retail PWAs with great app-like experiences are launching every day.

Here are 17 PWAs out in the wild today – I cover the highlights as well as any areas for improvement for each. I hope this list inspires you to create something special for your shoppers. Here we go – in alphabetical order.

Crabtree & Evelyn

Crabtree & Evelyn PWA

Crabtree & Evelyn is a long-standing omnichannel brand founded in 1972. Its PWA is a direct reflection of the in-store brand with delicate use of color and typography. Crabtree & Evelyn takes a refreshing approach to its homepage with a very focused experience. The product landing page (PLP) templates emphasize product imagery with a classic row listing design, while the product detail pages (PDP) have a strong sense of typographic hierarchy and unique product detail sections that utilize some beautiful photography.

Highlights

  • Pages load quick with little to no “reflowing” as content trickles in
  • Subtle animations on the product page really allow the brand to shine through

URL: https://www.crabtree-evelyn.com/

Debenhams

Debenhams PWA

Debenhams is a leading international, multi-channel brand with a proud British heritage and over 240 stores across 27 countries. The department store sells a range of clothing, household items, and furniture. Granular product filtering, combined with the ability to toggle between different product listing views make for a satisfying window shopping experience throughout the PWA.

By making the leap to a PWA, Debenhams cut the time of their typical shopper journey in half compared to their previous mobile site.

Highlights

  • Powerful and detailed product filtering
  • Multiple views for product list pages to accommodate how different audiences browse for fashion
  • The PWA cut the time of the typical shopper journey in half

URL: debenhams.com

Garbarino

Garbarino PWA

Garbarino is a South American retailer, founded in 1951. They sell household appliances and electronics across Argentina. The PWA felt very app-like with its use of pinned navigation headers, and pinned footer elements to filter and add to cart. The clean focused product card also felt very tappable. With the PWA launch, Garbarino increased their conversion rate by 27%, returning visitors by 13%, and pageviews by 35%, while decreasing their bounce rate by 9%.

Highlights

  • Good use of visual touch feedback on navigation elements
  • Subtle animations between page transitions makes this feel truly app-like
  • Unique use of bottom aligned filter and sort buttons on the product listing page

URL: https://www.garbarino.com/

George

Asda George PWA

The British supermarket retailer Asda Stores has a long-standing clothing brand named George that recently moved to a high performing PWA. The site has strong lighthouse performance scores because it achieves a first meaningful paint of 1.1 seconds. However, the design, while contemporary, isn’t app-like in its approach and could benefit from large visual selectors for product options and more generous touch target sizes.

Highlights

  • The main navigation menu features visual touch feedback (a ripple-like visual effect made famous by Material Design)
  • Saving products to a shopping list without needing to sign-in is great for window shopping

URL: https://direct.asda.com/george/clothing/

Hobbycraft

Hobbycraft PWA

Hobbycraft is the UK’s answer to Michael’s Stores in the US and Canada. They are the largest online retailer of arts and crafts supplies in the UK, offering a complete range for nearly any hobby under the sun. The homepage is designed to serve both new and returning customers by providing quick access to different types of hobbies, as well as current sales and specials. Product listings allow shoppers to quickly add items to cart, without ducking into a product detail page.

Highlights

  • Product category icons make for easy scanning of available offerings
  • Many products allow shopper to quickly add it to the shopping cart directly from the listing page
  • Features a detailed and easy to use ship-to-store capabilities

URL: http://www.hobbycraft.co.uk

Lancôme

Lancôme PWA

Lancôme is a global luxury beauty brand owned by L’Oréal. The Lancôme UX is exceptionally crafted to ensure that the mobile experience matches their overall brand. I would consider the mobile UX among the best-in-class. Form accessibility and the use of subtle interaction animations are big highlights. Lancôme’s PWA resulted in a 17% lift in mobile revenue.

Highlights

  • Subtle animations on homepage imagery lend the page depth and dynamism
  • A unique sub navigation appears below the header bar, exposing high-level product categories

URL: https://www.lancome-usa.com/

Lilly Pulitzer

Lilly Pulitzer PWA

Lilly Pulitzer designs and sells a line of colorful, floral print clothing for an upscale audience. A pinned navigation header, fast loading product listings, and the handy store locator make for a highly usable and efficient shopping experience. Generous use of large product images and obvious calls to action really highlight the brand and product offerings.

Highlights

  • Page loads are impressively fast when compared to other PWAs in the fashion sector
  • Video content on the homepage immediately draws the user into a highly branded experience
  • A handy stock checker on the product detail page makes finding products at your local store a breeze

URL: https://www.lillypulitzer.com 

Patpat

Patpat PWA

Patpat is an online family wear retailer with a direct manufacturing to consumer business model. The PWA is a pleasure to browse with its delightful product imagery. Unique is the use of SVG imagery in their loading placeholders (usually these are presented as simple grey boxes). Overall the bright aesthetic and excellent product photography makes for a well-branded shopping experience.

Highlights

  • A light, fresh and overall trendy interface
  • Like buttons with a counter leverage social proof to augment customer reviews
  • Granular filtering to narrow down outfits to particular styles, occasions, and more

URL: https://www.patpat.com

Payless

Payless PWA

Payless ShoeSource serves up trendy footwear with a focus on value and variety. The product listing pages feature a unique loading pattern that leverages animation and skeletons to provide a sense of instantaneous loading. When checking out, shoppers are offered the ability to pick-up orders in any Payless physical store, saving them time while still netting some sweet online deals.

Highlights

  • A unique loading animation on the product listing page makes for a very performant experience
  • Offers a buy online and pick-up in store feature in the checkout as an alternative to delivery

URL: https://www.payless.com/womens-boots/

Petlove

Petlove PWA

PetLove, based in Brazil, is an online store offering a wide range of pet products. The PWA is well-branded, with wonderful icon-based wayfinding throughout the experience. The immediate standout of the PWA is its lighthouse score. It scored a perfect 100 in the PWA category across the homepage and product listing page – a rare feat for a site of this complexity. Petlove has also seen some great results with a 2.8x increase in conversion and 2.8x increase in time spent on site.

Highlights

  • While a native iOS and Playstore app is available for Petlove, they opted not to go the route of an obtrusive install banner at the top of the page and instead to slot it into the footer
  • Smart use of icons in conjunction with an exposed navigation on the homepage
  • Designed with no web fonts that need to be loaded, improving load times

URL: https://www.petlove.com.br

PureFormulas

PureFormulas PWA

PureFormulas is a leading retailer of health foods and supplements and was one of the first retail PWA sites in North America. I like the large clickable navigation elements right off the homepage. The overall site has a very friendly accessible look and feel. Product detail pages have a beautiful visual hierarchy with a strong emphasis on the product imagery.

Highlights

  • The large category icon grid on the homepage makes for quick and easy navigation
  • Unique use of a sticky add-to-cart button on the product pages

URL: https://www.pureformulas.com

Redmart

Redmart PWA

Redmart is a Singaporean online supermarket with a fresh, friendly aesthetic. Shoppers can quickly add items to their carts directly from product listing pages, and the search functionality keeps shoppers moving quickly from one category to another. It feels app-like, has a unique look, and solves the very difficult UX challenge of shopping for groceries on a mobile device.

Highlights

  • Add products to cart directly from product listing pages
  • Powerful search functionality
  • Beautiful, well-organized UI with obvious interaction points

URL: https://redmart.com/

Snapdeal

Snapdeal PWA

Snapdeal, an Indian ecommerce company that started as a daily deals platform. It has since expanded to become one of the largest online marketplaces in India.

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

Highlights

  • Tabbed category navigation
  • High lighthouse scores, especially on the product listing pages where it hit 85

URL: https://m.snapdeal.com 

Tommy Bahama

Tommy Bahama PWA

Tommy Bahama is a Seattle-based manufacturer of resort activewear and household furnishings. Their PWA site uses a very unique pinned collapsing header to great effect. Instant transitions between listing pages and product detail pages are fast and performant. The large visual selectors within the PDP also help make product selection as easy as possible.

Highlights

  • Handy exposed sub-navigation atop product listing pages
  • Subtle animations on button states are a fun way to reinforce brand visuals
  • Navigating from product pages back to product listing pages feels instantaneous

URL: https://www.tommybahama.com/ 

West Elm

Currently still in beta, the West Elm PWA is a gorgeous 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. West Elm’s PWA saw a 15% increase in average time spent on site, and a 9% lift in revenue per visit.

Highlights

  • Forward thinking, commerce focused UI
  • Fixed and exposed category navigation on list pages is both beautiful and enticing to use
  • Very unique picture-in-picture interaction on the product page

URL: https://mobile-beta.westelm.com/

 

Leave a Reply

1 Comment on "17 Progressive Web Apps for Your Inspiration"

avatar
  Subscribe  
newest oldest most voted
Notify of
Appscope
Guest

Great list of progressive web apps! If you’re interested in even more examples of high-quality PWAs, we offer an extensive list on Appsco.pe (https://appsco.pe). Feel free to check it out!

Subscribe to the Mobify Insights Blog

Stay in the know on the latest in mobile commerce so you can effectively engage your customers and drive revenue.

Related Articles