Exploring progressive web apps

Context —

 This is a personal proposal for a Progressive Web App (PWA) for Tattly. I wanted to explore the process of designing a PWA. Here are the results....

DEFINING THE COMPONENTS

First of all, we defined a set of basic native components that will be the core of the UI:
- Swipe: Natural interaction used on discovery modules (top collections) and to go back to prev. page.
- Product cards are easy to scan for relevant and actionable information (access to product detail page).
Bottom navigationAllow movement between primary destinations. - Increases session engagement (page views).
- Navigation drawerHamburger menus hide information, but this could be ok if you include subsections that are not of premier importance.
Splash Screen provides brand awareness: Shown during the first user visit.

"We defined components in order to provide a UX and interaction
like a native app but in browser"

tattly-bigtattly-big

TAKING INTO ACCOUNT THE PERFORMANCE

In order to have a native UX, we defined also elements affecting the performance of the PWA. Such as Skeleton screens: No screen transitions blocked on network, shows users what to expect, reduce frustration, works without connection and experience feels smoother.

Also we took into account App shell architecture: Instant loading web apps: Cached shell loads instantly on repeated visits. It is the minimal HTML, CSS and JavaScript that is required to power the user interface of a progressive web app.

"Performance is a key UX metric affecting usability
and engagement with any product"

tattly-big02tattly-big02

RETENTION

One of the most valuable features of a progressive web app is the impact on retention so we defined two features with high impact on Returning visitors: 
Add to home screen: Makes it easy for users to add your Progressive Web App to their app launcher: Increasing returning visitors. 
Push notifications: Push notifications strategy to increase returning visitors and to provide a whole native experience (inform about delivery, etc).

 

WHAT WE LEARNED

- It was fun to explore a different technology and take it into account when designing Ui components. You always need to take into account technology when you are designing.

Why a PWA? Benefits from UX/UI point of view
UX and interaction like a native App but in browser. It increases conversions, page visits & session length (e-commerce key metrics). Access information without downloading/installation. Improves online shopping experience.