dkawasaki

The story of the

Kanopy
Onboarding Redesign

How I improved the UX/UI and increased the number of sign ups-to-play across Kanopy web and mobile apps

I'm a Product Designer at Kanopy, a video streaming service 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

The Redesigning of the Onboarding Experience

Kanopy is a diverse and curated resource of thoughtful and independent films for public libraries and universities. The redesign of the onboarding experience impacted all the consumer apps on multiple Kanopy platforms with the goal of increasing the amount of the Monthly Active User (MAU), one of the team's business priority.

My role

Product Designer (UX/UI), Prototyper, User Testing Lead, QA

Team

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

Launch Date

Web Onboarding
July 2019

Mobile Apps onboarding
December 2019

Platforms:
Web Browsers
iOS phone/tablets
Android phones/tablets

Tools

Design
Sketch, Photoshop, Illustrator

Prototyping
After Effects, InVision Studio

User Testing
Lookback, InVision Studio

Handoff
Zeplin/Abstract, Jira

Data
Google Analytics

Chapter 2

Key Features

Simple sign up

Landing Screen
Get Started or Log In options
Step 1: Get Started
See your options, learn more, or Log In
Step 2: Find Your Public Library
Navigate on the map or use the search bar
Step 3: Find Your University
Search for the university's name
Public Library Step 3: Add Your Library Card
Add your library card info or apply for one
University step 3: Log in with your university
Log in with your university or college
Step 4: Create your Account
Use the form or sign up with other apps
Home screen + bottom tab bar navigation
Step 1: Get Started
See your options, learn more, or Log In
Step 2: Find Your Public Library
Navigate on the map or use the search bar
Step 3: Find Your University
Search for the university's name
Public Library Step 3: Add Your Library Card
Add your library card information or learn how to apply for one

Chapter 2

Key Features

Simple sign up

Sign up in four quick steps. Choose between sign up with a library card or use your university login. Find your library or institution and add your login. Then create an account, that's it! Check out the FAQ for help before signing up.

Key Features

New logged in experience

Easy to navigate through the app with the new bottom tab bar: Browse or search for movies or documentaries, find them in My Lists, and go to more to edit settings and link your account to other devices, such as TV apps.

Home screen + bottom tab bar navigation
Browse: Categories List
Search movies, documentaries, and more
See your Continue Watching list and Watchlist
Account settings

Chapter 3

We started with a Goal

The business priority and the product's team goal was to increase the number of sign ups on Kanopy mobile apps.

To learn more on how to achieve that goal, I worked directly with a product manager, engineer, user researcher, and customer support to get user feedback and collect data on Kanopy apps.

For example, we noticed a high number of users leaving the app without playing any content. We found out that many people created accounts but didn't play any movies and we wanted to understand why.

Chapter 4

What we learned

We collected user feedback and data based on the previous onboarding. As a result of our user research, the team learned the most common pain points people had on their Kanopy onboarding experience.

Old Splash Screens Issues

Previous Splash Screens didn't really tell about the product

"No way to tell before you sign up whether or not your library participates. (...) Not pleased with the sign up process. Definitely don't recommend unless you're SURE it will work for you."
― Darlene, potential user the app might have lost

Old Onboarding Issues

Chapter 5

Designing the Experience & Interface

As a trio, me as a Product Designer, the Product Manager, and the Engineer Lead worked together on drafting the new onboarding experience on Kanopy mobile apps.

Whiteboard exercises and drafts of the new onboarding experience

UX Design

User Flows

After we drafted the new onboarding experience on the whiteboard, I transform the words into user flows or site maps, so all internal and external stakeholders can see the entire project scope.

UI Design

Interface Design

Every design had multiple options and design iterations before the final design. I met with the team every week to discuss the design options and set up reviews with the team and other stakeholders. I worked with the UX writer on the copy for all screens.

1. Design guidelines to Product

I updated the logo and the landing screen background, and used the brand's color palette and typography on all designs.

2. Creating new design assets

I introduced new assets to the design system to help users to navigate through the onboarding steps (e.g: new icons and new card designs to help to group content).

3. Testing Design Interactions with users

The team and I tested many interactions with users and internal staff to compare design performances and user behaviors.

4. Redesign the Logged In Navigation

I replaced the hamburger menu by the tab bar, which was designed for content discoverability and easy access to the main app navigation.

Product + Content + Marketing teams: Image Rights

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 on the onboarding process.

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

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 & 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 8

Design Iterations & 
Final Designs

After gathering the feedback, I worked on improving the designs and copy based on users and stakeholders feedback. I iterated on the designs and shared with the team for discussion, review, and final approval.

Learn how to Get Started

This screen didn't exist before. It was added as part of the onboarding steps to solve the main onboarding problem:

Map Added  to locate libraries

To help users to find the nearest public library, a map was added to the public library list. It also only shows the participating libraries.

FAQ for Library Card

Users can now learn more about library cards and learn how to get one from the library of a user's choice.

Library Assistance

If the library doesn't work with Kanopy, it'll show a link to help users to contact their library and request Kanopy.

Create Account

People would create an account after they add their library card or university login, making sure they can stream

Chapter 9

Handoff the Designs

Designs were uploaded on Abstract app organized by page (e.g: Home, Browse, etc) and the assets were all 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

Success Product Data

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, I'd like to achieve the goal of having an app that has a cross-platform consistent onboarding.

Chapter 11

Consistent Design System

We implemented a brand new design system for the Kanopy web and we follow the design system created on mobile apps. Based on user feedback and making sure the app will follow basic accessibility standards, we changed the background to white and text to black. It improved readability and fixed previous visual design issues.

Next Project

Kanopy TV app Design

Learn the story of designing TV apps for multiple apps, such as the Kanopy Fire TV, Roku, AndroidTV, and TvOS apps.