PWA Design Challenges in developing VueStorefront -https://vuestorefront.io/

1. Designing for PWA
(Progressive Web Apps)
Tomasz Karwatka, CEO of Divante

2. 1eCommerce - what’s wrong with you?

3. not suited for mobile
not stable during peaks
not effecitve with poor internet
connection
eCommerce right now

4. 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)

5. 2Progressive Web Apps

6. 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

7. 3Design Challenges

8. 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. 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. 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. 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. 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. 13
Cache
• Performance VS Freshness
• PWAs are applications - need to “boot”

14. 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. 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. 16
Design
• Use device fonts instead of custom fonts.
• Images or SVG instead of custom fonts.

17. 17
Inputs
• Ensure inputs aren’t obscured by keyboard

18. 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/

19. 4Open Source PWA

20. 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

21. 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. 22
Divante Sp. z o.o.
Dmowskiego 17 Street
50-203 Wrocław
+48 516 184 153pkarwatka@divante.co www.divante.co
Check the demo!
http://vuestorefront.io