How I improved the UX/UI and increased the number of sign ups-to-play across Kanopy web and mobile apps
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.
Product Designer (UX/UI), Prototyper,
User Testing Lead, QA
CPO, Product Managers, UX Researcher, Customer Support, UX Writer, Engineering team, Marketing team, Content team
Web Onboarding
July 2019
Mobile Apps onboarding
December 2019
Platforms:
Web Browsers
iOS phone/tablets
Android phones/tablets
Design
Sketch, Photoshop, Illustrator
Prototyping
After Effects, InVision Studio
User Testing
Lookback, InVision Studio
Handoff
Zeplin/Abstract, Jira
Data
Google Analytics
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.
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.
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.
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.
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.
The previous search results showed a long list mixed with libraries and universities that would and wouldn't offer Kanopy.
If the library didn't work with Kanopy, they'd see a "Request to your library" form and they wouldn't know what to expect after submitting the form.
The previous onboarding required people to create an account first, then add their library card later.
People created accounts but never used the app because they didn't have a library card or university login. They became inactive “ghost" accounts.
A “Browse as guest” link used to let people take a sneak peak of the content available on Kanopy. But it skipped the onboarding steps and got people confused on how Kanopy works and how to onboard on the app.
The copy didn't explain well how Kanopy works and the app was missing information. It was hard to read due to the lack of contrast between the dark background and grey typography.
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.
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.
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.
I updated the logo and the landing screen background, and used the brand's color palette and typography on all designs.
I introduced new assets to the design system to help users to navigate through the onboarding steps (e.g: new icons and card designs grouping the content).
The team and I tested many interactions with users and internal staff to compare design performances and user behaviors.
I replaced the hamburger menu by the tab bar, which was designed for content discoverability and easy access to the main app navigation.
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 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.
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 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.
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.
This screen didn't exist before. It was added as part of the onboarding steps to solve the main onboarding problem:
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.
Users can now learn more about library cards and learn how to get one from the library of a user's choice.
If the library doesn't work with Kanopy, it'll show a link to help users to contact their library and request Kanopy.
People would create an account after they add their library card or university login, making sure they can stream
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.
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.
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.
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.
