.png){kind=logo}
When it comes to designing and building the right type of app for a company, the responsibility of providing guidance, context, and direction falls on emerging tech partners and consultancies. For most companies, progressive web apps (PWAs) are still in the “that’s interesting” stages of understanding, but not proactively considered. That will change as the long-term business opportunities and user experience benefits become clear and tangible.
Progressive in Context: PWAs are Worth Consideration
Technology, by its very nature, is progressive. But how does it differentiate an app experience? A PWA is actually a website that communicates with features on your mobile phone, behaving like a native app. Think of it as a mobile app, delivered via the web, that offers a combination of the best features of both. This is where “progressive” comes into play. PWAs also run a JavaScript file separately from the main browser thread, allowing some functions to continue working, even if the browser tab is closed and the device is offline. PWAs have been around for about three years, and they’re in the same ambiguous place “responsive web design” was a few years ago. When responsive web design was first introduced, it took a little while for people to understand what “responsive” meant–and now it’s a universal design standard. Android was the first to implement PWAs, but Firefox and Microsoft continue to build momentum that will open doors and help create a more broad understanding around the utility of PWAs.
In the right situations, PWAs can provide the most streamlined route to a unified user experience. Generally speaking, native apps are still perceived as the superior user experience in contrast to hybrid apps, but the playing field is leveling off with new tools like Flutter and React Native. Companies also view native apps as the most cost-prohibitive. There is plenty of space for PWAs to come in and offer a different solution. In many cases, users tend to only download apps from brands they know, love, and seek on a frequent basis. By opening like webpages, progressive web apps empower smaller brands to compete and interact with new customers spontaneously. Even for large organizations, PWAs offer more cost savings and adaptability. Forbes switched its mobile experience to PWA and reduced its load speed to less than one second. Engagement was up 100%, and user sessions were 43% longer. When the Twitter Lite app transitioned to progressive, it saw a 65% increase in pages per session, and a 75% increase in tweets sent. Not only that, the new PWA requires less than 3% of the device storage space than the previous Twitter for Android app.
Key features and benefits
No download Half of smartphone users download zero apps in a typical month, and another 13% download just one app/month on average. PWAs jump the hurdle of reaching app-resistant users.
Offline capabilities The “service worker” JavaScript that runs along with the app caches content. This means many functions work even when the device is offline. Push notifications With the help of its service worker, the PWA can communicate with the server and push notifications to the user even when the browser is closed. Browser adaptation Through the progressive enhancement approach, the main functions of the PWA are built at a baseline that works smoothly for a range of browsers. Newer browsers automatically support a bulk of device functions. Home screen functionality Unlike a mobile browser experience, which disappears as soon as the tab is closed, a PWA offers an “add to home screen” option, producing an icon like a traditional mobile app. Smart features The more a user uses a PWA, the more powerful it becomes for that person through settings, communication, and customization. Self-Updating (outside of “store hours”) Unlike a native app that requires users to download updates, as approved by the Play or App Store, PWAs automatically load in the newest version when the user is online. Security PWAs are only served through HTTPS to protect against unauthorized access. Search discoverability Being browser-based, PWAs are easily found through a web search. Their links can be shared, just like any other website. Cost and time saving The PWA uses JavaScript, HTML, and CSS. Developers create a single version, and it will appear and behave the same on every device. A separate native app build is unnecessary. Lighter-weight and faster loading PWAs don’t have to store much information. Tinder saw their load times cut in half, after swapping out their native app for a PWA. The PWA required only 2.8 MB, while the Native Tinder app had needed 30MB.
Business Case
Shazzle Shoes, an up-and-coming retailer, wants to create a superior, seamless app experience to increase their mobile conversion rate. Although they have a presence on Amazon, they want a tool that can also reinforce their brick and mortar and online presence–activating their brand in a new, fulfilling way.
Industry Conditions
Retail is a hot innovation space. Every retailer feels the pressure of not only Amazon, but also big box stores offering their own in-house brands, often at a very competitive price. Now isn’t the time to be conservative. If a retailer doesn’t take steps to become a home screen mainstay, their potential customers will choose convenience.
Tactical Considerations
As with most retail brands, Shazzle relies on special promotions and offers to optimize their sales. These programs are dominantly email or banner driven, but they want a higher level of instant, relevant communication, as well as customization. With a strong website driving decent traffic and interaction, they are in a prime position to kick-off a PWA initiative.
Shazzle has chosen to partner with Mutual Mobile, an innovative company familiar with designing and building a variety of app experiences, including PWAs, and WP Engine, a digital experience platform that helps to host everything. As the project officially kicks off, there are critical considerations discussed upfront to ensure alignment and efficiency.
The ideal partner provides objective, dispassionate input and evaluations. Chances are Shazzle (or most other companies) won’t come to the table saying, “We want a progressive web app.” The innovation partner must be prepared to guide a business through the process of app type determination. If the main benefits of PWAs align with business goals, the foundation for success is already in place.
The design and development teams need to identify the technical specifics of how the current Shazzle browser experience operates and relates to the range of their desired browser needs. The outcome of this investigation will help decide what direction the build will take: graceful degradation or progressive enhancement.
Two Approaches to Browser Diversity
**
**The problem with designing websites is that various offices and individual consumers access the internet through a wide variety of portals. Not only are different browsers and operating systems being used, but some devices are outdated and running a long-defunct version of their operating system. Any “fancy things” (such as a CSS animation) that the developer comes up with won’t be able to run on systems that don’t have the capacity for sophisticated operations. Both partners must be aware and committed to one of these approaches:
Graceful degradation
This means designing web functionality at a high level of browser capability and then building in an ability for this to “degrade gracefully.” People with older, slower browsers will have a less sophisticated experience, but the basic functions will still work. It’s a somewhat retroactive, but potentially valuable, method.
Progressive enhancement
This approach flips the priorities. The designer creates a clean, basic experience for every web visitor. Then they add advanced functionality that will automatically be available to any browser able to use it. This approach allows for ongoing revisions as new technical abilities become available. It’s considered a forward-looking or “progressive” approach.
Working closely together and defining design, development, and hosting expectations helps prevent all involved from jumping to conclusions about outcomes. To save the time, money, and frustration, Mutual Mobile builds time into their project discovery plan to discuss Shazzle’s thoughts around: Offline features It’s a catchy concept to think of having a site that still works well offline, but it’s important to be clear on which parts of the website will work offline. Responsive design Reaching the customer on whatever device they happen to be using with intuitive, well-branded design and content is crucial. Responsive design allows for this consistency. Image and file sizes must be compatible. Touch screen vs trackpad interaction concepts Understanding the offerings and emphasis around these functionalities is best established upfront to avoid excess iteration. Hardware access conditions It is important to identify access authority for a range of users. Marketing approach PWAs must be marketed more like websites than apps, which the user has to go to a store and procure. This convenience is a huge selling point.
Once Shazzle is comfortable with their user personas and possibilities, they need to think about what features and content will best drive their goal of increased mobile conversion. Answering the following questions will inform their PWA strategy:
1. What do they want their users to do and see–and when?
2. What information and visual hierarchy helps ensure conversion?
3. What is the best CTA approach based on past user data?
4. How can website traffic trends inform the functionality of the PWA?
The more vision into current customer metrics and/or research findings Shazzle can offer the team, the higher the launch pad becomes. Additionally, if they’re looking to maintain communication throughout the user lifecycle, a strategy involving push notifications makes good sense.
Defining a testing plan for PWAs needs solid planning far in advance of the actual QA process. PWAs offer flexibility, which is great. But, in the absence of a testing plan, this flexibility can be detrimental to the testing process. Your development budget drains quickly if you and your developer get too deep in trying to run tests on the seemingly infinite use cases. Shazzle takes a best practices tip and collaborates with the team to build a test plan that focuses on important highlights, while waiting and watching the other functions.
This is Shazzle’s first PWA build, so they won’t be able to anticipate potential obstacles. Fortunately the teams at Mutual Mobile & Wp Engine offer transparency with regard to learnings from past experiences. Armed with this information, Shazzle can take steps to mitigate any stumbling blocks with planning and communication.
Small technical issues within a website can be enough to derail development. PWAs cannot be built on top of broken or archaic code–nor can they fix it. Even if the website is mostly functional, outdated conventions and bulky work-arounds can cause problems for the PWA. The barrier for entry for ordinary websites is low. Many business owners have no idea their website is shaky until they want to make an enhancement.
Push notifications offer value in building a merchant’s relationship with customers, but many companies get a little trigger-happy. It’s important to be strategic– just like with email campaigns and other outbound communications. If users are hit over the head with reminders and notifications, they will silence them. Brand preference and loyalty will suffer.
It’s not surprising that many apps previously created as native or hybrid could benefit from switching to a progressive web app experience. Microsoft recognizes the utility of PWA architecture, and its next Windows launch is going to enable even more PWA functions. Social platforms continue to enjoy “satisfied customer” status following their PWA transitions, inspiring other platforms to consider making a move. Data collected after Pinterest moved to a PWA shows an uptick of 40% in the time that users spend on the app, compared with how long they spent on the previous mobile site. Furthermore, Pinterest’s ad revenue rates have increased by 44%, and core engagements by 60%.
There is no shortage of desire for seamless customer experiences. With their new PWA, Shazzle customers will enjoy their favorite shoe website moving more smoothly. Buying shoes on their phones has never been easier. Chances are they won’t stop to consider they’re using a PWA or that their browser now has access to the mobile device’s camera, notifications, and other functions. PWAs are the biggest milestone in web development since HTML5. Together, with experienced tech partners, businesses can build meaningful, personalized relationships with their customers by bringing together the best of mobile and web delivery.
Explore More
