Mobile App Offline Experience
Lead Product Designer in-house for a consumer digital reading subscription app. Sole designer on the project – collaborated closely with developers and product manager.
Redesign the end-to-end experience for downloading and consuming content offline in mobile apps.
What I Did
- Redesigned an entire flow to replace disparate parts created in isolation
- All design from flows to final visual and interaction specs
- Conducted competitive review
- Pitched the business case to the team
- Planned A/B tests with product manager
The product team was improving the offline state messaging as part of a larger effort to improve new customer retention. I had recently scoured the free-from responses for why people cancel their subscription and I knew the download and offline experience was a deeper issue than fixing up the messaging could solve. I took this evidence, plus more gathered from customer service and app store reviews, known technical bugs, and got buy-in with my product manager to go for a bigger impact and take a more wholistic view of the project as it is a critical function to get right for new customers during their trial period.
Top reasons for cancelling subscription regarding the download experience:
- Didn’t know the service offered downloading even after days or weeks of use
- Didn’t understand how to download content
- Didn’t understand if the content was downloaded
- Had technical problems downloading
A wholistic approach
Flowcharts show the new flows for communicating the status of a download from anywhere in the app, and how customers find downloads or are directly routed to them if the app is opened while offline.
Remove friction to downloading content
It was not obvious to some people who signed up that reading was available offline.
I redesigned the book product page to expose actions and make it obvious what customers can do. Updated the language everywhere in the app from “Store Offline” to “Download” for further clarity.
For the page redesign, I incorporated research insights and exploratory work done at a previous time — see Section #4 Product Page.
Communicate download progress and completion
The downloading progress was subtle gray text that appeared in an unexpected place on book product pages. The progress did not follow the customer if they navigated elsewhere, and didn’t aggregate progress for multiple downloads, both of which were important for audiobooks due to the large file sizes.
I created a persistent message bar that communicated current status anywhere in the app, more obvious on-page communication, plus a local push notification when completed.
Remove friction to locating downloads
Downloaded content had the same placement and style as a customer’s personal reading lists, which caused confusion. I moved the downloads into the main library with a switch to view downloaded content.
Clear offline and empty states
I created a consistent place for a message bar to let customers know they are offline or lost internet connection. If a customer opens the app while offline, it now routes them directly to the downloads instead of defaulting to the home screen. Empty states were updated with education about how to save and download, plus shortcut links to downloads area. (Illustrations by the fab Thomas Gatewood).
All A/B tests 100% in product
I left Scribd to join Udemy during the multiple A/B test phases so I don’t have the final performance stats, but I can confirm that all tests were rolled into product. Huzzah!
This screencast was taken from the live app on my iPhone.