dkawasaki

The story of the

Kanopy TV Apps Redesign

How the redesign of the TV apps improved the UX/UI design and increased the number of all Kanopy TV apps users

I'm a Product Designer at Kanopy, a video streaming service of thoughtful and independent films available in hundreds of universities and public libraries across the US and overseas.

I lead the designs for all consumer facing apps, including the Kanopy website, iOS/Android apps, TvOS/Fire TV/Roku apps.

Chapter 1

Designing the TV app experience

As a Product Designer, I helped Kanopy to launch their first TV app with a brand new design system able to scale to multiple platforms. Then I worked on improving the onboarding process and helped to increase the number of sign ups and active users on Kanopy TV apps.

My role

Product Designer (UX/UI)
Prototyper/Interaction Designer
Review & QA

Team

CPO, Product Managers, UX Researcher, Customer Support, UX Writer, Engineering team, Marketing team, Content team

Launch Date

Fire TV app
October 2018

Roku TV app
March 2020

Apple TV app
Coming soon

Tools

Design
Sketch, Photoshop, Illustrator

Prototyping
After Effects

Handoff
Abstract, Jira

Chapter 2

Key Features

New Onboarding Experience

Tv apps welcome new users and current users. Now they can sign up and follow the instructions on the app or log in on their TV device by adding their login and password, or connecting their account to the TV device.

Landing Screen + Background transition of 5 films
Log In or Link Your Account to the TV Device + help link
Sign Up in three simple steps + help link
Film preview when users come from TV device search (e.g: Roku Search)

Key Features

New App Experience

The top navigation menu combines all the main sections of the TV app: Browse movies, see your Watchlist or continue watching the films you've started, see your settings, and switch to the Kanopy Kids experience.

Home Screen
Browse Movies screen + movie categories and animated transition
Search + customized keyboard + animated transitions
Separated Watchlist or Continue Watching lists
Movie + Movie details + Related videos
Home Kids: Curated content for kids

Chapter 3

Defining the Project

Step 1: Define the goal & scope

The TV app project started with a business need: increase the number of new users/sign ups and monthly active users on Kanopy platforms.

The Kanopy TV app project combined two projects: The design of a brand new TV app for multiple TV devices and the design of the TV app onboarding process. See the process steps below:

Step 2: Design the new TV App

Kanopy had two TV apps at the time: the Kanopy TvOS app was based on a template design and the Kanopy Roku app had several UX/UI issues.

Many people asked to have Kanopy available on Fire TV devices. In order to accomplish the business goal of growing the number of users, the team planned to ship an end-to-end TV app using Kanopy's branding and own assets and improve the user experience.

The end goal was to design a TV app design that would be consistent across all TV platforms, including Roku, Apple TV, Fire TV, Samsung TV, and Android TV.

TV App Information Architecture

Planning ahead the structure of the app to define the scope of the project

Customer Feedback

Our app store reviews and customer support tickets were flooded by people asking for the Kanopy Fure TV app

Step 3: Design the Onboarding Experience

After the implementation of the TV app design, I worked on the design of the onboarding experience for Kanopy TV apps to help increase the number of sign ups on the platform and discoverability of the app.

This onboarding experience was linked to the Onboarding project that was successfully launched on the Kanopy website and Kanopy Mobile apps.

Chapter 4

Old TV app Designs: UX/UI analysis

Before designing a brand new TV app, we contacted customer support to get feedback from users and their main pain points while using the Kanopy TV apps. Based on the feedback, we reviewed the existing TV app designs and concluded that we needed to work on:

Old Roku TV App Issues

The Kanopy Roku app was Kanopy's first TV app and most used TV device among Kanopy users

Messy Home screen

The home screen was hard to navigate. There was no hierarchy of components, users would see the search bar on top as the first action item, then the home categories menu and movie shelves. And it was pretty hard to find the KIDS link on the top menu and people often didn't find the side menu.

Hard Navigation

The side navigation on the old Roku app was hard to find, according to users, and it was hard to navigate. The side bar was cropped in some TV sizes and it was visually hard to find on the screen. All Browse categories were listed and the Settings was pushed all the way to the bottom.

Movie Screen hard to read

There were many visual design issues with the movie page: No hierarchy of elements, poor contrast between the background and typeface, the blocks of text were too close or too far from each other, and the "Add to My Watchlist" button wasn't easy to find (and it was separated from the main content).

Link device isn't the same as sign up

The previous Kanopy allowed people to navigate through the Kanopy app before they created a Kanopy account. However, there was no sign up available on the TV device and no instructions on how to sign up either. People would have to guess that link device is a way to find the sign up instructions.

Confusing Instructions

The instructions were confusing to people and many people didn't read the instructions of how to sign up on Kanopy.

Poor Visual Designs

The TV app lacked in good contrast between text and background in many components and screens of the entire TV app experience.

Apple TvOS Kanopy App Issues

The Apple TvOS Kanopy app looked totally different from the Roku app

App completely different

The Kanopy TvOS app was based on a template for TvOS provided by Apple. It didn't have a design system and it didn't use Kanopy brand colors.

Not intuitive navigation

The TvOS app and Roku app had a problem in common: it was hard for the users to find the browse menu on both apps and it required different interactions.

Chapter 5

Designing the Tv App Experience & Interface

In collaboration with the Product Manager and the Engineer lead, we drafted how the TV app experience including the onboarding process and the TV app design.

Draft of the onboarding experience for TV Apps

UX Design

User Flows

After sketching several user flows and consulting with the engineer team to work on the best possible onboarding experience, I designed the following user flows that were approved and used to communicate with developers, QA testers, and other internal stakeholders.

New TV Onboarding User Flow

TV + Desktop or Mobile Web Designs (Click to Zoom in)

Universal Search on Roku User Flow

Roku users can search for a film and it'll show up in the Roku Search Results if it's available on Kanopy

UI Design

TV App Interface Designs

Besides designing for the onboarding process, I worked on designs and iterations for the TV app interface design as well. The team met every week to discuss the design options and set up reviews with stakeholders.

Easy App Navigation

Top navigation with the main pages, the category navigation with the Home main categories (not browse), and the shelves.

New Browse Categories Screen

I introduced new assets and interactions to make the browsing experience unique and easy to find the Browse categories.

Video Screen navigation

Easy navigation on video screens: play the video, add to watchlist, or read more information about the film. They can also navigate on the Related videos shelf.

Easy Settings

Users can find their account information, select other libraries connected to their account, and find parental controls and support links easily.

Image Rights By Territory

The Kanopy app is available in the US, Canada, Australia, and the UK. I worked with the Content Team and Marketing team to highlight the content on the Landing screen that would work for multiple territories.

Chapter 6

UX Writing

I worked with a UX writer to improve the copy of the Kanopy TV apps.

We remotely worked together on a document where we could collaborate on the copy, see the copy on the designs, and review with the Product Manager and the team.

Chapter 7

Prototyping & User Testings

I lead the user interviews we did remotely using Lookback, an Invision prototype and the Participate app to be able to see the user screens on iOS and Android phones.

We reached out to a diverse range of users that use public libraries or universities, and from diverse backgrounds, genders, and ages.

Chapter 7

Prototyping & On Device Testings

I used After Effects to prototype the experiences on the Tv apps using the TV ratio (16:9) and tested on TVs, including standing at least 20 feet away from the screen to make sure components would still be visible.

Universal Search: User Flow Prototype

For example, Roku users would be able to find Kanopy by searching for a movie on their Roku Device and selecting the Kanopy app to watch the film

Chapter 8

Design Approval

After design reviews with the team and stakeholders, and copy reviews, I iterated on the designs and got final approval to hand off the designs. See the TV app below:

Chapter 9

Handoff the Designs

Designs were uploaded on the Abstract app organized by page (e.g: Home, Browse, etc) and the assets were available for download.

The last step was to do QA using the Test Flight app or other testing apps. It helps the engineering team if sometimes I change the CSS on the code if needed.

Chapter 10

Success Metrics

The new onboarding on mobile apps increased to 53% the conversion rate of Sign up-to-Plays.

Future Improvements

Reduced tickets for Customer Support regarding sign ups.

For future improvements, we'd like to achieve the goal of having an app that has a cross-platform consistent onboarding.

Chapter 10

Success Metrics

Outcomes

• Created a brand new TV app design for Kanopy apps across multiple TV platforms (Fire TV, Roku, and TvOS) and all TV apps have a consistent experience design
• Created a new design system for TV apps

Data Results

• The number of active users (who sign up on Kanopy) increased 56% in the first two weeks after launching on Roku devices
• Kanopy Fire TV app now has more than 40k active users
• Increase of Roku devices linked successfully to users' accounts and reduce the number of support tickets for Customer Support

Future Improvements

User would have the entire onboarding process available on Kanopy TV apps.

Chapter 11

Brand New Design System

From the very start to the onboarding designs, I created a brand new design system that were implemented on Fire TV, Roku, and TvOS devices.

Next Project

Square Retail Point of Sale

Helping retailers to easily make a sale and easy to use product to manage their stores.