Designing for PWA (Progressive Web Apps)

Tomasz Karwatka, CEO of Divante

1 eCommerce - what’s wrong with you?

not suited for mobile

not stable during peaks

not effecitve with poor internet connection

eCommerce right now

not suited for mobile

not stable during peaks

not effecitve with poor internet connection

too many platforms – gap between customer needs and companies ability to deliver

eCommerce right now

GAP

Technology Creators (eg. AFGA)

Customers

Companies (Retailers/Manufacturers)

2 Progressive Web Apps

6

Progressive Web Apps Best features of Mobile App (UX) and Web (Distribution) combined

•  Offline readiness

•  Home Screen

•  No Submission

•  Linkable

•  Re-engageable

Alibaba Case Study •  76% higher conversions across browsers •  14% more monthly active users on iOS; 30% on Android

3 Design Challenges

8

Strategy

•  Multiple native apps vs one website

•  User’s expectations change when they consider

something to be an app

•  The Team - new skills, new process

•  Front-end engineers - the most constrained resource

on retail IT teams.

9

Approach

•  UX inspiration from native apps

•  You’re designing a native app

•  Benchmarks - native apps on iOS and Android

•  Mobile components

•  Avoid overly “web-like” design - e.g. footers

10

No Browser = No Safety Net

•  No: address bar, SSL indicator, back button, ..

•  Back button - second most frequently used feature

of the browser

•  Own Navigation

11

Navigation

•  Back from a detail page - retain scroll position on the previous list page

•  Touch interactions - implemented very well, or not at all

•  Keep simple navigation at the bottom

12

Content

•  Placeholders for content while downloading – skeleton screens

•  Buttons and ‘non-content’ shouldn’t be selectable •  Provide an easy way to share content

13

Cache

•  Performance VS Freshness

•  PWAs are applications - need to “boot”

14

Payment

•  Mobile abandonment rates exceed 80% when customers are asked to input their credit card details.

•  The payment request API by Google eliminates checkout forms

•  It allows merchants to request and accept any payment in a single API call.

15

Touch

•  Tappable areas should give touch feedback •  Touching an element while scrolling is not clicking

We implemented our own virtualized list component; it only renders the content visible within the viewport, incrementally renders items over multiple frames using the requestAnimationFrame API, and preserves scroll position across screens. - Twitter

16

Design

•  Use device fonts instead of custom fonts. •  Images or SVG instead of custom fonts.

17

Inputs

•  Ensure inputs aren’t obscured by keyboard

18

Sources

u http://boxesandarrows.com/designing-progressive-web-applications-for-the-future/

u https://cloudfour.com/thinks/designing-responsive-progressive-web-apps/

u https://techbeacon.com/5-ways-ensure-great-ux-progressive-web-apps

u https://developers.google.com/web/fundamentals/payments/

u https://medium.com/@owencm/designing-great-uis-for-progressive-web-apps-dd38c1d20f7

u  http://blogs.perceptionsystem.com/mobile-commerce-trends-2017/

u  http://www.information-age.com/5-m-commerce-trends-2017-123463703/

u  https://www.emarketer.com/Article/Podcast-Five-Mobile-Commerce-Predictions-2017/1014667

u  http://wolfstreet.com/2016/08/23/pokemon-go-augmented-reality-craze-already-dead/

4 Open Source PWA

You need a Web, Mobile Web, iOS App, Android App, Windows App, ..

eCommerce Websites are not stable during peaks

Websites are not effecitve with poor internet connection

Long time2market to develop Mobile Apps and Mobile Web

Progressive Web Apps – Website that can be installed as an App. Best features of Mobile App (UX) and Web (Distribution) combined

Storefront can be run without alive web-server there is no such traffic peak that can stop users from making orders

Offline readiness - app can be used off-line

Out-of-the Box Product, Based on Vue.js, developer-friendly approach, good doc

Challenges

Solution

Vue Storefront

Bleeding edge, scalable technology

Node.js, Vue.js, Elastic

Blazing fast It render at no time.

Always.

100% offline, Black-Friday

ready :)

Vue Storefront

22

Divante Sp. z o.o. Dmowskiego 17 Street 50-203 Wrocław

+48 516 184 153 pkarwatka@divante.co

www.divante.co

Check the demo! http://vuestorefront.io