Exploring progressive web apps
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 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.
"Performance is a key UX metric affecting usability
and engagement with any product"
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.