How brands can use Progressive Web Apps to enhance real-world experiences

Virtual spaces. Digital realms. The great opening of the Metaverse. Our current zeitgeist tells us technology is all about transporting us to new worlds.

But perhaps tech is at its best when it connects us to our own.

We are on our phones a lot. Almost a third of our waking hours.

As such, there is a growing sense that digital devices are a barrier limiting our connection with the real world; preventing us from interacting with what is right in front of us.

But this isn’t necessarily true. Our devices can work as a gateway which brings us closer to the world around us, letting us see it from a different perspective - through a different lens.

For this to happen effectively, technology has to shorten the speed of action to match the speed of thought. And Progressive Web Apps (PWA) are good at doing exactly this.

The Natural History Museum wanted to help young families in the UK reconnect with nature - so we created a PWA to aid this mission. Starring the Museum’s famous Diplodocus mascot, we designed ‘Dippy’s Naturenauts’ - a Progressive Web App that drives curiosity through experimentation, learning and storytelling.

The app became a pocket-sized tour guide to nature. In addition to serving up fun facts, the app inspires kids to physically interact and play in nature - and, even better, get their hands dirty, too.

Rather than creating a new world, we used tech to enhance the experience of the one we are in.

PWAs make it easy for users. They offer the same speed and quality UX as a native app and are instantly accessible through a mobile web browser. They seamlessly enhance real-world experiences.

Not all technologies can deliver this. Some interfaces demand high-amounts of concentration and attention. Interactive videos often draw attention away from the subject. And whilst VR offers passthrough (an instant view of your surroundings) - it can only achieve this through hardwear which cuts users off entirely from the real world.

So how can brands leverage PWAs to enhance real-world experiences for their audiences?

Enhance in-store shopping…

Retail brands like LUSH can utilise PWAs to guide product discovery and personalised recommendations.

Scanning product barcodes or display areas allows customers to explore product ranges—their ingredients, their benefits, their purpose—all based on personal preferences. A PWA would sign-post and guide visitors to specific areas of the store – sharing relevant user reviews and real-time trending products to provide information and create confidence. PWAs allow brands to be in-store next to their customers – but not in-the-way.

Enhance product rituals and adoption…

When consumers have purchased a new product, they might need support in understanding how it works and where it fits into an existing routine. At the moment of unboxing, consumers can be directed to a PWA providing an interactive personal guide. For a new personal fitness product, for example, it might use AR to visually guide you on the set up of your new product and proceed to learn about your existing fitness regime, your personal health, your lifestyle, your fitness goals – with this information it could generate a personalised fitness plan that syncs with your calendar and sends motivational notifications to keep you on track.

Enhance gifting…

Consumer brands that play in the gifting space have reached a certain standard online - whether a customer purchases a craft beer hamper or cosmetics set, we expect to be able to add a personalised message. But when these messages are printed onto generic greeting cards or on the back of order forms, they can sometimes lose their human touch. What if a PWA allowed gift recipients to scan the parcel to hear from the gift-giver themselves? And with a bit of AR wizardry, you could even bring the gift-giver into the physical space to deliver the message.

Enhance play…

LEGO could transform how it guides kids and families to build, create - and recycle.

A PWA could utilise features like image recognition, encouraging kids to experiment with building in new ways, completing challenges or unlocking storytelling elements which extend the experience. It could even motivate families to find creative ways to recycle toys and the packaging itself.

It could even blend the realms of digital and physical play. Games like Cap Warriors encourage users to play with conductive physical blocks, interacting with a digital surface (a device with an open PWA) which creates the canvas for the experience.

Enhance participation…

PWAs can enhance reality - and also expand engagement through natural social shareability.

We created a web app that helps fans learn dance moves from renowned dancer and choreographer Matt Steffanina while also being able to record, download and share the video with friends on social channels.

Enhance personal safety…

In the post-COVID era, consumers are more conscious of their own personal space and hygiene.

PWAs can help brands grow consumer confidence by managing the movement of crowds in physical spaces. We worked with Google to develop Line Up - a queuing system to simplify the management of crowds in busy spaces, without requiring anyone to download anything or exchange personal information.

Enhance physical training…
Brands are at their best when they help people get where they need to be.
For sports brands, this often means empowering customers to train, practice and hone their skills. Supporting people’s passions is powerful. We helped Google launch the Footy Skills Lab web app - which uses your phone’s camera and Google AI to monitor your technique and ability level to complete a series of activities, designed to improve your Australian football skills.

The same functionality could easily be adapted for virtual healthcare brands that need to gamify physio treatment plans.

Infrastructure for ideas

Progressive Web Apps have progressed a great deal since we launched our project for the Natural History Museum.

Now there is greater adoption - not to mention better integration with the latest generations of smartphones and web browsers. PWAs now live in a lot of different places. They can be downloaded from App stores (like a native app) as well as accessed from the web. For example on Windows and ChromeOS you can download PWAs straight from the Microsoft Store and Play Store respectively. Google has even started replacing some Android apps in ChromeOS with PWAs.

PWAs are growing to exist on every screen. Frameworks/Tools such as PWAbuilder, Ionic, Flutter, Electron, and Hotwire now allow brands to deploy PWAs across multiple devices (mobile, web, desktop, and embedded devices) and multiple platforms (Windows, Linux, macOS, Android, iOS, ChromeOS) from a single codebase. This is particularly useful when you need to reach a specific audience or access to an API that might not yet be available on the web.

PWAs are still maturing. Creators and consumers are still learning how to get the most from the technology - and Apple’s iOS needs to cement the infrastructure required to unleash PWAs full potential. We are still only scratching the surface of the technology's capability - but this just makes it all the more exciting.

Reach is everything

Much is made of technology opening doors to new worlds. Not enough is made of how it can improve our experiences in reality.

PWAs are growing because they are agents of enhancement; capable of melding digital and physical experiences, whilst also removing the barriers to engagement (downloading, signing up and logging in).

But more than this, they work because they reach everyone. There are around 6.6bn smartphone users in the world. That’s around 80% of the world’s population. Most of these users have access to the global web. Rather than build a specialised app for every platform/OS/device on the market - through PWAs you can instead speak to a bigger audience through the internet directly.

To learn more about how Toaster helps brands enhance reality through PWAs, get in touch with the team at hello-london@toaster.co.