Select Page

Mobile app offline content experience

My role

Lead Product Designer in-house for a consumer digital reading subscription app. Sole designer on the project – collaborated closely with developers and product manager.

The project

Redesign the end-to-end experience for downloading and consuming content offline in mobile apps. It was part of an effort to improve the free trial experience and encourage more people to convert into a paid subscription.

What I did

  • Defined the problem space
  • Pitched the business case to the team
  • Redesigned an entire flow to replace disparate parts created in isolation
  • All design from flows to visual and interaction specs
  • Planned A/B tests with product manager

The problem

The product team was improving the offline state messaging as part of a larger effort to improve new customer retention. I knew the download and offline experience was a deeper issue than fixing up the messaging could solve, so I scoured thousands of free-from responses for why people cancel their subscription. I took this evidence, plus more gathered from customer service and app store reviews, known technical bugs from the QA and engineering teams, and got buy-in with my product manager to go for a bigger impact and take a more holistic 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 on mobile apps even after days or weeks of use (after signing up on website)
  • Didn’t understand how to download content (from the mobile apps)
  • Didn’t understand if the content was downloaded and had issues trying to use it offline
  • Had technical problems downloading

The solution

A holistic 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 and a local push notification when completed, plus the ability to pause active downloads.

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

The results

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.