Post Image

The Immense Power of Progressive Web Apps

Stasiek Świątkiewicz
By Stasiek Świątkiewicz on 19th February, 2019

design progressive web apps at UXPin

Progressive Web Apps (PWA) are a powerful new technology. They make your website faster, let you harness the power of notifications and even work offline. So it’s a pretty big deal.

In many companies, employees and users are too used to the way the current system works. So much so that they know where each thing is, and any change can cause them to get lost and be less efficient. So, should you implement a new and great PWA in your system?

Let’s start from the top

On most websites, there are just a few page templates. Let’s take eCommerce, for example. You have:

  • Homepage – unique and only the front page of the shop
  • Product listing page – where you usually see search results, a category listing, etc.
  • Product page – generally product pages look the same, for example, on nike.com every shoe has the same product page structure, just the information on it varies
  • Static pages – all pages with pure text are the same, the formatting of text can of course differ, but again, the structure is similar domain-wise
  • And more!

ecommerce UI design

Photo by Charles 🇵🇭 on Unsplash

As you can see, there are only a few page templates that each eCommerce site uses on each page. And here is where PWA comes in.

Until the introduction of PWA, searching for a product server gave you the full search results page. Then you viewed a few items, one by one. Each time you view new items, you download the product page template over and over again. It doesn’t make any sense!

Some folks at Google noticed this and decided to create a solution. One that lets you download the page template once, store it on your hard drive and reuse it as many times as you want. They named it “Service Worker”. Thanks to Service Worker, whenever you enter the first product page you download the whole website, and when you check the second or third item you reuse the template you downloaded before. With this methodology you have to download only the item data from the server, and that makes PWA lightweight and fast. Really fast.

And that speed is something everyone wants. For business people that means lower cart drop rate, and for designers, it means more design freedom. Why? Because PWA can be designed with a native app approach, creating innovative UX solutions that make users even more efficient!

Should I change my users’ habits?

Recently, I was at a conference where a local UX designer talked about an interesting case. He was hired to improve some company’s internal system for managing data. The company was 1000 people strong, and their system was developed around 10 years ago – back in the young days of this company when the budget was low. Thus, the system was inefficient and weak, usability-wise.

They wanted to make their employees’ work more efficient and more pleasant by creating great UX for them. After 2 months of research and data analyzing, they decided to create prototypes.

They had some great ideas, and a saw huge performance improvement. For e.g. in the previous version when adding a person’s data, there were 20 irrelevant checkboxes to check! Now they were able to just hide them. Here’s the plot twist: nobody liked the changes. Of course they were prepared for such a response, but the feedback was the same even for the n’th iteration.

As they did the next iteration, one irritated guy told them, “I know the current system exactly, I worked in it for 5 years and I am super efficient in it! I don’t want to learn a new system!”.

The same thing goes for customers. They don’t want to re-learn your website, because they already know the current version. When you design a new system, there are no users with no habits, so if you have huge design freedom in creating the first app version. But the question is…

Should I improve the UX if my users don’t want it?

Well, it depends. Every change is met with resistance. When doing such redesigns, you should always estimate  the profits it can bring and calculate what losses can occur. A great example of UX that could have been improved but wasn’t? The QWERTY keyboard.

In fact QWERTY was designed for typing machines so the handles wouldn’t block each other while typing.  However, on a PC this problem is non-existent. So, theoretically, we should switch to DVORAK key distribution which is proved to be more efficient. But why haven’t we?

Because the profit from such a change is tiny compared to the resistance it would meet. Think about small typing speed improvements versus millions of people having to relearn how to type.

keyboard

Photo by Haidan on Unsplash

But when you think about a company’s internal management system, UX improvement is a good choice. Of course it can be troublesome at the beginning. Let’s say that currently a form fill takes 40 seconds, and after the switch it would increase to 60 seconds. But consider this: after getting used to it, it would decrease by 20 seconds. This is a rock solid argument to make against resistance. To achieve great long-term profit.

How should I approach such a change?

When implementing PWA, always consider who you’re designing for. In some cases, you can create a whole online native-like experience, other times it’s best to keep it low.

1. Navigation

Add PWA to the home screen. Where it opens as if it was a regular app, without a search bar or browser controls. In these cases, take care of navigation in-app, as users won’t have a “back” arrow in the browser window. A solution for this problem is to implement a bottom bar nav similar to native apps. For one client we separated the mobile page from the homepage, search, cart, favorites and added a “Scan” option which launched the camera. That brings me to the second point…

UI navigation

Photo by Jamie Street on Unsplash

2. Use mobile features

PWA works on every device. Thus it’s a good solution to use each device’s power features. For example, you can use push notifications on Android and Windows, and create a camera-scanner function on mobile devices!

3. Native patterns

Native apps have many patterns that are quite unfamiliar on web: bottom shelf drawer, swipe gestures… to name a few. These patterns improve UX greatly, and create a seamless experience where designers, developers and users can do so much more.

Innovation on the web – what’s possible?

Nowadays PWA has become the standard in creating web experiences. Google is now indexing PWA websites first, and performance checking software. Lighthouse uses PWA as one of the main performance criteria. But even with all of this in mind, PWA’s standard is still not clearly defined.

Every day new technologies are emerging, creating more and more possibilities for us. Of course, we should carefully think what should be included on our website, to prevent over-featuring to our users. However, we should keep in mind, that if we don’t innovate for our users, somebody else will.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Stasiek Świątkiewicz

by Stasiek Świątkiewicz

Stasiek is a strategist & product designer working on creating the PWA open source solution Vue Storefront.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial