Case Study | VRV Offline Viewing
How to watch your favorite episode offline?
Background
While many users enjoy watching their favorite shows at home, we’ve often heard, that they also want to continue their episode or movie whether they are commuting, traveling or just in a place with pricey or spotty internet access. The offline viewing feature makes it possible for VRV members to watch things later without an internet connection.
What is VRV?
VRV is a video experience bringing the best of anime, animation, gaming, comedy, fantasy, and technology to U.S. fans in one unified environment.
In short: a video streaming app that wants to be Netflix but just for geeks. VRV is only available in the US and is made by Crunchyroll.
https://vimeo.com/184963902?fbclid=IwAR13jHQluaiWnOqtq53Rwu-yJ809lSo1b4LmTxufiQSSgI5vUIIa8olzorU
My Role & Contribution
My role as a member of a four-person mobile design team was to perform design across iOS and Android applications. Offline Viewing was a partial Ownership feature that I could start from scratch and develop all the way to the end. The project began in June of 2017. Furthermore, I have been involved with Post MVP to improve the user experience by giving the user more control over their entertainment experience.
My key responsibilities and deliverables
- Experience Strategy & Vision
I created frameworks, paper and Invision prototypes to share the vision, design principles and strategy. This helped to evangelise ideas, gain alignment and drive decision making. - Planning & Scope Definition
Together with the Product Owner we defined the Product. I evangelised user goals in balance with business needs & goals. Negotiation for the launch.🤯. - Design Execution & Validation
I designed Android & iOS Mobile/Tablet application. I executed user scenarios and design. Animated prototypes have been done by our Interactive Designer in-house Robin Fox.
The Problem
What would it take to allow members to download and view content offline on their mobile devices?
We needed to provide a content licensing system that would allow a member’s device to store and decrypt the downloaded content for offline viewing. A new API for client and server interactions was needed, 🤓. And a bunch of other stuff, that is super mega techy and will go beyond the scope of my product design insight.
VRV has 5M Registered Users and 285k of them are subscribers.
Offline viewing should only be available to premium users, and this should be another reason for users to subscribe or remain subscribers to VRV. We wanted users to watch as many videos as possible and to remove any barriers to doing so. We don’t want poor internet connectivity to be a reason why users cannot watch videos on VRV.
Our challenge was to develop ASAP a solution to be competitive in the market since this feature is offered by competitors such as Netflix and Amazon (with rumors of Hulu launching later this year 🤫).
As more providers offer this feature, users will come to expect this feature when watching videos online.
There is no other way — We must have this feature in order to stay competitive.
Pressure!
Goals — Why do we need that feature?!
- Increase number of subscribers
- Reduce number of subscription cancellations
- Increase video watching by removing barriers (ie. internet connection)
- Remain competitive (Netflix, Amazon, YouTube Red, Hulu)
- Improve VRV platform offerings for content partners
Offline Video Viewing enhances the video experience of premium subscribers, allowing us to retain current users while also converting more free users into paying customers.
Discovery — Customer insights
A key insight from our screening survey confirmed how many users are watching. This is one of some more key insights that defined the launch version of the product:
Results also highlighted the importance of browsing and discovery, with 41% of respondents regularly watching five or more episodes on the way.
In total, we conducted 12 semi-structured user interviews. A key challenge during this process was identifying users who were available at relatively short notice to conduct interviews.
Findings
- Multi-tasking
Another key finding was that a lot of users just listened to episodes whilst multi-tasking, especially to enhance potentially boring activities (such as commuting or housework). - Collectors
Paid members invest more into building their libraries.
Visual Improvements
How do we allow the user to download an episode?
Till requirements have been process, I reviewed our existing watch page, to analyze how we can visually make this magic happen. It become pretty fast obvious that adding just a download icon, is the least of problem. To understand the actual task and all dependencies, I had to review the functionality and the UI of VRV.
The Status Quo
What needs to be done?
Based on the watch page review, I started to create my To-do list for things that needed to be taken into consideration for any further explorations to implement offline viewing.
- Redesign episode cards — so phone and tablet design match
- Add download icon, without removing other features
- Create the best download user experience and engagement
- Create a user flow
Ideation
Adding a download icon became a pain in the ass. Where do all the other functionalities go?
Share function became my enemy.😈
Once the feature has been made visible to the user, you cannot just hide or remove it. Analytics told us that “share an episode” is rarely used. That doesn’t allow me to question its existence, but it helps me to prioritize its importance.
What is more important and valuable for the user?
Users want to watch content and have it available all the time. That’s the main purpose of the App. So convincing the leads and decision-making people involved was a piece of cake.
share needs to move somewhere else!
Redesign episode cards ️and become Engineers best friend ❤️
What if we will use the same episode cards for mobile and tablet? One component for both platforms!
- Consistency
- One code base
- Less maintenance
Designers happy & Engineers happy
User Flow for Premium & Free/Anonymous user
Download videos
Premium user
- User browses VRV and finds videos they want to download
- User presses the “download” icon for each video
- Videos appear in the downloaded section
Free/Anonymous user
- User browses VRV and finds videos they want to download
- User presses the “download” icon for a video
- Pop-up appears telling user this is a premium feature
(and hence to go premium)
Watch downloaded videos while offline
Premium user
- User opens app and sees a message that app is unable to connect and presented with option to see downloaded videos
- User goes to “downloaded” section of app
- User finds video to watch and presses play
- Video plays
Free/Anonymous user
- User opens app and sees a message that app is unable to connect and presented with option to see downloaded videos
- User goes to “downloaded” section of app
- User finds video to watch and presses play (this is assuming that the video was downloaded while the user was premium)
- Pop-up appears telling user this is a premium feature (and hence to go premium)
Last minute Pivot!
Create the best download experience and user engagement!
Too many clicks to download an entire season? Much more to delete them? Agree, quite annoying for a premium feature! Save an entire season for offline viewing with one tap! Feeling the pressure from Netflix & co. What can we do better to improve the user experience and user engagement?
BULK SYNC was born! One action instead of multiple actions! 🤓
Bulk Sync Challenges
Bulk sync caused initial confusion about how the status of SYNC ALL will change once the user tabs on it! Creating a flow helped me to understand the behaviour of each syncing phase. It helped the whole team to understand the flow. Taking into account all possible edge cases What would occur if:
- No Wifi
- Slow Connection
- Failed sync
- Expired sync
- New content
- Extra content
What are users' actions? What is he able to do?
Validation
Once the team had a prototype ready to use, we knew we needed to put it in the hands of our end-users. Offline viewing was very well received.
What I Learned
Reflection
Throughout this project, I observed how bias for action mutated into a for delivery. Our team is disproportionately focused on measuring outputs, rather than learning and measuring outcomes. This inevitably led to a lot of waste, shortsightedness, and distraction for the team.
We let the question “How quickly can we build it?” define it more than we let our customers define it. We let the phrase “let’s just get something out there” define quality, more than we let our customers define quality.
If we had asked, “Are we building the right thing?” as much as we asked, “Are we going to meet our date?“, we would have launched a more reliable, intuitive, and polished product, sooner.
I wished we could do user testing earlier rather than later.
Our users should have defined viability long before technology and date did.
I never became a fan of "quick and dirty!" Nevertheless, it has been an intensive work week across the team and departments. We worked hard and remain still colleges. 😊
