ScandiPWA
ScandiPWA
Oct 9 · 5 min read

Thinking about launching a Progressive Web App? We’ve compiled some great tips from renowned UX experts to make sure you follow the best practices when designing your Progressive Web App.

1. Don’t overcomplicate things

With all the great features, Progressive Web Apps can be a killer-tool that will bring your mobile user experience to a whole new level, delivering immediate impact. However, by being able to use all these previously unseen features like home-screen install, push-notifications, offline mode, often website owners tend to get too excited.

​As Ryan Warrender, a UX expert working for Google, pointed out​ in his article, PWA features should accentuate the experience, not distract from it.​

PWA features should accentuate the experience, not distract from it

2. When less is more — prioritize content

PWAs are built to help users to perform their desired actions as fast and as seamlessly as possible. The less is more rule is totally applicable in this case.

Pay attention to distracting elements on every high priority page. Make sure there are no blinking banners or automatic sliders stealing your users attention. Avoid too much information that is not related to the main call-to-action.

Make sure to clearly define your value proposition, prioritize the primary call-to-action and remove all distracting elements that don’t provide any value to your users.​

Here’s an example of Starbucks PWA app. The CTA is clearly defined and there

3. Reduce friction

Increased load speed is helping to significantly reduce friction, however, even the ultra-fast and seamless experience will make no sense if your users will not be able to perform the most important actions, like completing the checkout process.

​Actions, like filling forms and finalizing the checkout process, have always generated high drop-off rate, causing a headache for merchant and marketers.

Here’s a tip from Reinis Groskops, Analytics Director at Scandiweb:

Evaluate all the sources of friction on the key screens. This includes difficult and long processes, insufficient information, poor readability and UX, bad error validation, fears about privacy & security, any uncertainties and doubts, unanswered questions.

Implement solutions like autofill, integrated web payments, one-tap sign-up, and​automatic sign-in to reduce friction and provide everything a user needs at checkout while keeping the process safe.​​

4. Perceived Performance — make waiting seamless

Let the user see that they are making progress by preloading skeleton screens and transition animations to make waiting seamless.​

For example, to achieve seamlessness, ScandiPWA uses an opacity transition, which from initiation to video start takes 0.53s (recall — the video loads in 0.47), creating a smooth and soothing effect.

Not only does it look great, but it also allows users to orientate themselves and understand what’s happening!​

5. Make your brand stand out

The home screen install feature is a powerful tool that could bring a lot of value for your business. Make sure to leverage it, by creating a great icon!

A UX expert Sophia Brooke is suggesting​ to follow the essential guidelines of native apps to create a distinctive, but simple enough icon to stand out on different backgrounds, and easily accommodate various elements like shades.

6. Fonts — keep it simple

Try to avoid fancy fonts on subsequent loads and use device default fonts whenever possible. Not only custom increasing the download size of your first page, but custom fonts also can slow down the performance​ of your app, and create additional visual distractions.​

7. Think offline

Make sure you are making the most out of the PWA by providing all your key features in the offline mode and implementing the caching option.​​

Example of Lancome PWA working in the offline mode

8. Don’t forget about SEO

Although PWAs can look and perform exactly like native apps, Progressive Web Apps have URLs and can be crawled and indexed by the search engines. Make sure to check the Progressive Web App Checklist​ and follow the best SEO practices.​

9. Test your PWA with Lighthouse

Google has introduced an open-source performance management tool called Lighthouse​ that can run as a Chrome extension or as a Node module. You can audit your web app or any web page with Lighthouse and get an extended report of the page. Moreover, you can get a reference doc for each audit item describing why the audit is important and how to fix the failing audits.

It is possible to run Lighthouse against any web page, it has audits for performance, accessibility, progressive web apps, and more.

Additionally, you will get a detailed list of all issues with suggestions on how to fix the failing audits.

10. Leverage ready-to-use solutions

There are ready-to-use PWA solutions, like ScandiPWA, are built according to the best practices and can help you save tons of time and resources.

Such solutions are tested and backed by strong development teams and communities, so you can be confident in the quality of the code and benefit from constant updates.


Let us help you!

Want to improve your store’s performance, boost engagement, and increase conversions? Interested how open-source PWA theme for Magento can help you to stay ahead of your competition by leveraging the best cutting-edge technology for eCommerce right now?

Drop us a line at hello@scandipwa.com for a free PWA Demo!


ScandiPWA is the first open-source PWA theme for Magento.

Follow our social media accounts to be the first to know about any news and updates:

Progressive Web Apps

All you need to know about Progressive Web Apps

ScandiPWA

Written by

ScandiPWA

The First Open Source PWA Theme for Magento https://scandipwa.com/

Progressive Web Apps

All you need to know about Progressive Web Apps

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade