Progressive Web App (PWA)

 

Project Context

Timeline: 4 months (minimum viable product)

Team: Product Designer/User Experience Designer (myself), VP of Product, Front End Engineer, Backend Engineer, Producer, QA Lead

Brief: Bring an app-like full screen experience through the use of a mobile Progressive Web App (PWA) to the user while adding additional data-tracking capabilities for our business.

Constraints: Hurdles to PWA creation include moving the user out of the social app (imbedded browser), creation of the PWA uses browser controls, and how best to instruct users to using these browser controls install the PWA.

About

Artie’s Pong Legends is a WebGL mobile game. The goal of this game is to grow & monetize outside of an app store.

Background

A Progressive Web App (PWA) is essentially a link to a website; however the PWA gives more functionality to a website. 

On game adoption, transitioning a user into a Progressive Web App (PWA). The steps involved in creating this require teaching a user about a PWA and instructing them on the process.

Objective

Move a user out of the social platform (imbedded browser) to a Progressive Web App as a benefit to both the user & the business.

As a user it offers;

  • a home screen app icon

  • supports notifications

  • allows for full screen game play

As a business it offers;

  • robust system of tracking user behaviors

  • a direct line of communication with the user

User Research

The initial minimum viable product for the PWA was simply to setup the tech to support a mobile PWA and a single instruction to direct the user on installation.

The subsequent planned versions would leverage segmenting technology (built for our Engagement Funnel) to establish test groups that best define the top-line key performance indicator (KPI) for PWA conversion (installs).

 

Process specifics

Setup of the PWA 

  • UX & Engineering partner to establish an additional full screen layout to support full screen gaming on different mobile devices.

  • UX & Engineering must maintain & support multiple user experiences: imbedded browser (social app imbedded), native browser (Safari/Chrome), and a full screen mode (PWA)

  • Engineering required to create and maintain a manifest. Allows for click tracking and many additional user-specific data.

  • UI required to create new App Icons (512x512 & 192x192), define BG color, & define bevel for code

  • UI research requires defining and creating multiple messages associated with instructing users how to adopt the PWA

Version 2 and 3 were easily defined as these were split from the robust initial spec created which essentially included segment tech in conjunction with exposure of various user-facing messages.

Impact

The MVP implementation grants the user the ability to play the game like a standard app-based game should they install the PWA.

Version 2 is expected to yield data and analysis of the optimal user-facing messaging.

 

Known Risks & challenges

While the PWA is amazing, there are known risks inherent with it.

First, if a user never creates an account, it is impossible to build their history of initial entry-point (which social app they entered from). Additionally, if they do not create an account and any progress in the imbedded browser game (the game in the social app) will be lost when they transition away to the PWA. However, on this same vein, this can incentivize the user to create an account.

Secondly, downloading & creating a PWA automatically with the click of a button is considered by Chromium and Webkit as a huge security risk and breech of user rights. As such, informing the user how to create and install a PWA using the local browser. The process is nearly identical as bookmarking a website (Adds to Home Screen/Install App) however it does add friction to the process.

Thirdly, a point of friction is that a PWA can not be created when in an imbedded browser (in a social app). The user must load the game in their native browser and from there can then install the PWA.