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

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

DEFINING THE COMPONENTS

First of all we defined a set of basic native components which 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"

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.

ENGAGEMENT

One of the most valuables features of a progressive web app is the engagement. We defined two features: Add to home screen: Makes it easy for users to add your Progressive Web App to their app launcher: Increasing returning visitors. And Push notifications: Push notifications strategy to increase returning visitors and to provide a whole native experience (inform about delivery, etc).

sketch-component2sketch-component2

WHAT WE LEARNED

- TBD