Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing for PWA (Progressive Web Apps)


Published on

PWA Design Challenges in developing VueStorefront -

Published in: Design
  • Be the first to comment

Designing for PWA (Progressive Web Apps)

  1. 1. Designing for PWA (Progressive Web Apps) Tomasz Karwatka, CEO of Divante
  2. 2. 1eCommerce - what’s wrong with you?
  3. 3. not suited for mobile not stable during peaks not effecitve with poor internet connection eCommerce right now
  4. 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. 5. 2Progressive Web Apps
  6. 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. 7. 3Design Challenges
  8. 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. 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. 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. 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. 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. 13 Cache •  Performance VS Freshness •  PWAs are applications - need to “boot”
  14. 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. 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. 16 Design •  Use device fonts instead of custom fonts. •  Images or SVG instead of custom fonts.
  17. 17. 17 Inputs •  Ensure inputs aren’t obscured by keyboard
  18. 18. 18 Sources u u u u u u u u u
  19. 19. 4Open Source PWA
  20. 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. 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. 22 Divante Sp. z o.o. Dmowskiego 17 Street 50-203 Wrocław +48 516 184 Check the demo!