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 navigation: Allow movement between primary destinations. - Increases session engagement (page views).
- Navigation drawer: Hamburger 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.
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).
WHAT WE LEARNED