Mobile PWA
Reimagined Forbes' mobile experience as a Progressive Web App, introducing gesture-driven navigation and immersive interactions that changed how readers consumed content.
- Platform
- Mobile Web App
- Team
- UX Designer (me)
- 2 Product Managers
- 1 Lead Developer
- Status
- Retired
- Overview
On Friday, October 16, 2015, Forbes held a 100% Mobile Day to gather ideas from everyone in the company on what they envisioned the next mobile native news template would be like. A year and a half later (March 7, 2017) a brand new mobile site is launched to Forbes’ almost 50 million monthly mobile unique visitors.
- My Role
As sole UX Designer, I was responsible for conceptual designs, user flows, micro-interactions, rapid prototyping and overseeing the user experience throughout the entirety of the project.
- Read more about it
- Forbes Launches All-New Mobile Web Experience for Forbes.comForbes Press Release
- Inside Forbes: A Rallying Cry For Our Times -- 'Go Mobile Or Go Home'by Lewis DVorkin
Conceptual Designs
Once all the ideas were pared down to a select handful, I was tasked with putting together some visuals along with interactive prototypes for each concept. I took the sketches and quickly put together some high-fidelity prototypes in Invision .
Iterate, Iterate, Iterate
Working closely with the Head of Product, I iterated on the designs and we continuously tested the prototypes before settling on a direction as our proof of concept. Here I explored layouts with varying media making sure I covered all the content types. Wanting to inject some of our Forbes Video content, I created gifs to use as background images throughout the experience.
Back to Basics
Taking a moment to step back, I felt that it was important to map out the user flow and define all the gestures & card types before investing more time on high-fidelity visuals.
Peek-a-Boo
Since this new experience relied on gestures for navigation, we wanted to make sure any new user landing on a PWA article knew how to navigate. I explored various ways to teach users the different gestures using animated prompts; tap to read, swipe left and right to navigate between articles, and up and down to switch topics.
Homepage Concepts
Since PWA articles were designed specifically for mobile, the only way to view them were through direct links (from Google or Facebook), these pages did not have a proper home. With that in mind, here are some concepts explored for a PWA homepage:
Result
The Progressive Web App transformed Forbes' mobile experience, cutting page load times from up to 12 seconds to just 0.8 seconds while delivering a fast, immersive, app-like interface with offline support and push notifications.
The new experience drove measurable improvements across both user engagement and business metrics, including a 2× increase in average session length, 6× higher article completion rates, 43% more sessions per user, and a 20% increase in ad viewability. Initially conceived as a secondary mobile product, its strong performance led Forbes to replace its existing mobile site and make the PWA its primary mobile experience.