How the redesign of the TV apps improved the UX/UI design and increased the number of all Kanopy TV apps users
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.
Product Designer (UX/UI)
Prototyper/Interaction Designer
Review & QA
CPO, Product Managers, UX Researcher, Customer Support, UX Writer, Engineering team, Marketing team, Content team
Fire TV app
October 2018
Roku TV app
March 2020
Apple TV app
February 2021
Design
Sketch, Photoshop, Illustrator
Prototyping
After Effects
Handoff
Abstract, Jira
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.
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.
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:
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.
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.
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:
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 hard to find the KIDS link on the top menu and people often didn't find the side menu.
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.
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).
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.
The instructions were confusing to people and many people didn't read the instructions of how to sign up on Kanopy.
The TV app lacked in good contrast between text and background in many components and screens of the entire TV app experience.
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.
The TvOS and Roku app had a issue in common: it was hard for users to find the browse menu on both apps and the interactions were different.
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.
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.
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.
Top navigation with the main pages, the category navigation with the Home main categories (not browse), and the shelves.
I introduced new assets and interactions to make the browsing experience unique and easy to find the Browse categories.
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.
Users can find their account information, select other libraries connected to their account, and find parental controls and support links easily.
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.
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.
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.
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.
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:
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.
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.
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.
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.
