Building the World’s First Consumer Physical Web Engagement Experience

My story begins on a cold evening in November, at the 2015 BeaconValley Hackathon in Krakow, Poland. It’s 9pm and I’m wearing my Proxama Mentor t-shirt, sipping coffee and watching teams of developers eagerly unbox their Bluetooth beacons and fire up their laptops.

As the anticipation builds I can’t help but feel envious of app developers. Since the rise of Silicon Valley and the mobile app boom it’s been the iOS and Android developers who are seen as the rock stars of the software industry. They’re the guys at the forefront of technology, playing with the shiny toys and basking in the glory of multi-million pound apps, while we web developers write our humble JavaScript code and style our beloved 404 pages.

I consider that the difference must be down to the platforms we use — that web apps will always be impeded by slow-moving standards and confined by the browsers they live in. I begin to envision a world without those constraints, where our HTML could burst out from the web browser, wow users with slick UI and native functionality, and sit proudly on the Home screen with our native friends. Just a pipe dream, I decide, as I finish my coffee and accept my fate as the rock star’s overshadowed sibling.

Little did I know, however, that in the next few moments Proxama’s CEO, at the London edition of the very same hackathon, would discover the Physical Web and we would embark on a journey which would turn my pipe dream into reality.

What is the Physical Web?

Put simply, it’s a list of URLs being broadcast from nearby BLE (Bluetooth Low Energy) beacons. Step within range of a beacon, swipe down your phone’s notification centre, and you’ll be presented with an ever-updating list of URLs in the vicinity; think of it as search engine results generated using your location as the query.

The ability to interact with the world around us using a phone is something many of us are already familiar with. QR codes and NFC tags have been connecting the physical and digital worlds for years, and BLE beacons have already established their power and worth through large-scale app owners like Mapway beacon-enabling their apps.

The Physical Web, however, is a new approach for two important reasons. First, it’s a pull-based technology. Unlike a native app notifying us the moment we arrive in the presence of a beacon, a Physical Web notification is subtle: the list of URLs will be there when you want it, and hidden when you don’t; “interaction on demand”, as Google describes it.

Second, it’s an open standard, built on top of a platform we already know and love; the web. The vision is that by unleashing the “core superpower of the web”, any pub, shop, or restaurant owner can offer an immersive beacon experience without the cost and maintenance of running their own network, and any object around us can be made accessible over the Internet — from coffee machines and pool tables to taxis and even cat collars.

The Arrival of MyStop

With this vision in mind, and Proxama’s award winning technology at my disposal, I set out designing our very first consumer facing Physical Web experience. After some initial workshops with our network partners, it became clear that our existing network of beacon-enabled London buses with Exterion Media was the perfect fit. My first thoughts were that beacons could broadcast a bus timetable, and people could check what time they’re due to arrive at their destination — we could even highlight their specific route by using a parameter in the URL.

However, three years of designing and building proximity marketing campaigns at Proxama has taught me that people want more than just static web pages. It’s 2016 and users need exciting and immersive experiences that solve their problems with little or no effort. Bus passengers shouldn’t have to scan a long timetable to find their route; the bus should tell them where they are. They shouldn’t have to calculate how late they’re going to be for work if they’re stuck in a traffic jam; the bus should warn them ahead of time. They shouldn’t even need to keep an eye on street signs; the bus should know what their stop is and remind them when it’s time to get off.

And in that moment of revelation, MyStop was born.

Polymer, Push Notifications and Progressive Web Apps

Building the world’s first Physical Web experience was an exciting challenge. Our bus data had to be streamed in real-time with 100 per cent accuracy, our web push notifications had to be consistent and prompt, and — with the potential to reach millions of passengers per month — the UI had to deliver a slick and app-like user experience. Luckily, we had some of the most talented folks in the industry working on it. We gathered together a team of designers and developers from across the company and worked around the clock, sharing the thrill of surfing on the forefront of technology.

Providing a good user experience was of the utmost importance to us. We were keen to respect the unobtrusive nature of the Physical Web, and also to incorporate the key principles of the Progressive Web App (PWA) model. Google’s PWA London conference was a great source of information for this, as the Chrome team presented fascinating talks about instant loading with the app-shell architecture, the power of Service Workers, and the importance of fresh, safe, discoverable, and ‘re-engageable’ content — all of which we’re very passionate about.

We’re no strangers to large-scale web apps at Proxama, but this project presented some new challenges as we decided, for the first time to implement the Polymer framework. Polymer’s speed, efficiency, and ability to create reusable components was a great fit for our mobile proximity platform, TapPoint®, and meant that we could easily import Material Design elements and test UX flows with little development effort. The Service Worker support that the Platinum elements provided was particularly useful, and the highly-recommended Polycasts with Rob Dodson made getting to grips with the framework hassle-free (cheers, Rob).

Our live bus data was provided through Transport for London’s (TfL) Unified API. Despite the API being fairly new and the challenges of testing against moving targets (buses), we built a powerful API that could map vehicle registration numbers to bus routes, monitor their journeys in real-time and send out push notifications based on their ETA.

Sponsored Content with an Excellent User Experience

Many of our favourite native apps are powered by advertising and sponsored content, which is vital for funding development and progressing the technology. By implementing Progressive Web App principles, we set out to deliver good app-like experiences in all aspects of MyStop, so it was important to us that our sponsored content was as relevant and unobtrusive as that of Facebook, Twitter and Instagram.

In the case of MyStop, we did exactly that. When a user sets a reminder for a stop, we can infer not only that they have an interest in that area, but also that it’s likely to be their destination, so an offer specific to their location, delivered during their ‘dwell time’ on the bus would be of value to the consumer. We therefore added the opportunity to deliver both timely and relevant advertising to users and value for the advertiser. It’s an important balance to maintain, but when done correctly is beneficial to both parties, while ensuring that the consumer remains at the centre of the service.

Launch Day

In less than two weeks, all of our hard work had paid off and we were in market with a fully-functioning web app, deployed across London and ready for the release of Chrome 49 (the first version to include the Physical Web).

The rollout was a fantastic opportunity for developers from a variety of disciplines to work together, share knowledge from their areas of expertise, and blur the lines between web and app development. We got a fascinating insight into each other’s worlds, and when, on the Friday evening after a long week of challenges and hurdles, our first live reminder came through, it’s safe to say that we all felt like rock stars!

The post Building the World’s First Consumer Physical Web Engagement Experience appeared first on Proxama.