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:
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.
Notice that “Add to home screen” button? That’s a surefire sign that you’re looking at a PWA.
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.
Do you need as many apps as Facebook? Only you can answer that question.
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.
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.
“Your PWA should complement and be compatible with your website”
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.
Utilize copy here that will keep your users from being disappointed when that purple hoodie they’ve been eyeing is sold out.
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.
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.
“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.”
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.
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
“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.”
Esaú Suárez Ramos
When it comes to marketing, PWAs have a slightly different set of features that you can leverage.
- Push notifications
- Loading: Skeleton concept
Unlike native apps, any page or screen on your PWA can have its own shareable direct link.
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 allow users to get timely updates from sites they love, enabling you to effectively re-engage users with customized content.
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.
Check out those lines where text and images will soon be. That’s what we call skeleton text.
Common mistakes to avoid
- Product listings
- Custom fonts and design
- Designing for just one user
When your system is offline it can show data that are no longer available. Make sure this possibility is clear to users.
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.
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:
Stanisław is 24-year-old designer from Often Hides (Częstochowa, and yes, that name is official) based in Wroclaw. He loves designing, does UX as his job, while designing graphics, and motion as his hobby. He started as a Front-end developer, became a UI/UX designer, and now he’s developing Vue Storefront as a product designer.
by Tom Karwatka
Tom is the CEO of Divante—one of the biggest eCommerce Software Houses in Europe with 200+ omnichannel experts and developers. Divante works for clients such as Intersport, TUI, ING Bank, and T-Mobile. Divante specializes in designing and implementing Omnichannel solutions based on Magento. According to Clutch.co, Divante is one of top companies implementing Magento. The company is also a finalist of the international competition Online Retail Awards and Forbes Diamonds Award. Clients include top eCommerce companies from Europe, USA, Asia, and Africa.