What’s a progressive web app, and why should designers care?

Progressive web apps, or PWAs, are the next generation of Javascript-based web technologies.

At their core, PWAs are web applications based on standard web technologies, but with the addition of the newest JavaScript features, making them feel and function like native Android or iOS apps. Forbes Magazine, Twitter, and Africa’s leading eCommerce company, Jumia, are just a few companies taking the lead with developing PWAs.

Blending mobile and web is a game-changer in the industry and can lead to astonishing business results—making this a can’t-miss technology for retailers.

We’ll be going over:

• PWAs vs. websites
• Offline PWA features
• PWA advantages over websites
• Common PWA development mistakes

PWAs vs. websites

Are PWAs apps or websites?

Well, they’re a little bit of both.

From a designer’s perspective, building a PWA is similar to building a web app, but from the user’s perspective, it might as well be a native app.

One of the most important differences is the way PWAs are distributed. Because PWAs are technically web apps, there’s no need to visit an app store: users simply click the Add to home screen button in their web browser.

Another advantage of PWAs vs. native mobile apps is that they consume much less data. While native apps reside in the user’s phone, PWAs are only accessed when users go to the website—the only time when data is used.

Building a PWA-ready team

Before you start developing your PWA, the first (and most crucial) task is educating your team about exactly what a PWA is: a hybrid project matching user expectations with backend tech requirements.

The project kickoff should start with these two questions:

1. How many PWAs do I need?

Let’s use Facebook as an example. Facebook is one product, but it has sixteen non-PWA apps: one for each core function or user group.

Sometimes it makes sense to split your website into subdomains, with a separate PWA for each domain, i.e. product magazines, eCommerce, customer care, and so on.

For many businesses, however, one centralized PWA makes sense.

You should think carefully about what your customers have come to expect, and allow those expectations to inform how you proceed.

2. Do I need a dedicated UX flow, or just a copy of my website?

Your PWA should complement and be compatible with your website, so the design and user experience shouldn’t be drastically different from the desktop version. The last thing you want to do is change the flow your users have come to know and love.

There are, however, some helpful PWA features—like offline usability and push notifications—that you can take advantage of when you start designing.

Offline PWA features

You can run your PWA offline, but that means you need to be careful when implementing eCommerce or transactional websites, and even more so with dynamic elements like product availability or promotions.

Of course, every problem has a solution. Let’s look at a common eCommerce problem: when a user is offline, the system can’t update things like availability, so the user could, after some time offline, try to order items that aren’t in stock.

Now, the solution: allow users to browse your eCommerce app for the first 30 minutes without an internet connection while informing them of the possibility that a product isn’t available. You can still synchronize orders later and, worst-case scenario, ask them to amend their order.

There are also some more sophisticated solutions relying on artificial intelligence to estimate how often a product is bought and if it’s still available.

The biggest eCommerce challenge is what happens on the payment screen. Mobile cart abandonment rates exceed 85%. This problem was partially solved, however, when Google introduced the payment request API—eliminating checkout forms and allows merchants to request and accept payment in a single API call, streamlining the checkout process and cutting down on those abandonment rates.

PWA advantages over websites

When a PWA is running in full-screen mode, there are no browser functionalities to help the user along. This makes it look good but also poses UX risks.

Without a browser, there’s no safety net: no address bar, progress indicators, SSL icon, or navigation buttons. Adding your own back button or designing your own navigation bar is the solution here: replicating the browser’s familiar navigation cues will make your PWA easier for your user to understand—and use.

Lists and gestures should be familiar

Users will expect your PWA to behave like a typical app; for example, when they go back to a previous page, the position of your content or listings should remain the same.

A note on where PWAs differ from apps: be careful about rich-touch interactions–the ones going beyond 2D, recognizing how many fingers are being used or how. They’re hard to code well, and bad implementation can ruin your UX.

Gestures shouldn’t be the only way to navigate your app. In case you needed another reason to include a custom nav bar, consider this a +1.

Common PWA development mistakes

If you do have touch features, they should work just like they do in native apps. For example, tappable areas should give tactile feedback. A user shouldn’t be left wondering if the tap has been recognized.

When it comes to scrolling, consider yourself a fish in Finding Nemo. Just keep scrolling, just keep scrolling, whether an element’s been touched or not. Turo Engineering developer Esaú Suárez Ramos said it best:

Every developer who’s ever had to deal with scrollable floating elements in iOS will agree with the following fact: there is a direct relationship between iOS scrolling and headaches.

Google goes deep into this in its Android PWA development guide. Elements shouldn’t react when you scroll by; this is a common mistake with mobile websites and one of the most annoying.

Using PWA features to your advantage

When it comes to marketing, PWAs have a slightly different set of features that you can leverage.

• Linkability

Unlike native apps, any page or screen on your PWA can have its own shareable direct link.

• Searchability

Content in PWAs can be easily found by search engines and are adjusted to Google’s mobile-first index, presenting a nice opportunity for content-centric native apps.

• Push notifications

Push notifications allow users to get timely updates from sites they love, enabling you to effectively re-engage users with customized content.

• Loading: Skeleton concept

Apps often show content better than typical websites, utilizing skeletons to reveal positioning before it fully loads. With your PWA, you can also use placeholder content while downloading, including low-resolution images in place of full-size versions.

Common mistakes to avoid

• Product listings

When your system is offline it can show data that are no longer available. Make sure this possibility is clear to users.

• Custom fonts and design

It’s good practice to use standard device fonts to make the PWA design more familiar. If you really need to, try to use images or SVGs instead of custom fonts.

• Designing for just one user

Since Google pioneered PWAs Material Design has become the obvious choice for some PWA designers, but PWAs are becoming more and more popular on other systems too.

When designing, make sure to look at your work from the perspective of different users. The design should encompass elements from different systems, so all users can navigate comfortably.

A good challenge

The PWA brings new opportunities to retailers and new challenges to designers.

Native apps are custom-designed to accommodate for different systems (iOS, Android, Windows), unlike the web-based PWA. But if you keep these design tips and specifics in mind, there’s a world of opportunity for both design ingenuity and business success.

If you’d like to get started with PWA design, we suggest starting with the resources below.

• Designing progressive web applications for the future
• Designing responsive progressive web apps
• 5 ways to ensure a great UX for progressive web apps
• Introducing the payment rRequest API
• Designing great UIs for progressive web apps

Also, you can check out our Open Source PWA eCommerce Storefront for even more guidance.

Learn more about where design meets developement:

Decreasing friction in the design-to-development handoff

The secret to connecting designers and developers

Designers with these 3 skills work better with developers