kanopy-cover.png

Visual Design: Kanopy

Product Design

 

Kanopy

Web Design / Visual Design

Besides working as a Product Designer at Kanopy, I created and collaborated with Visual Design Assets for all the products at Kanopy.

 
 
Devices-White-Background.png
 
 

Introduction

Kanopy is a streaming video service dedicated to provide thoughtful entertainment in partnership with public libraries and universities. This project goal was to design a brand new app to solve many requests Kanopy had been receiving at that time: the Kanopy app for Fire TV.

I joined the company as the only Product Designer in the Product team and I collaborated with product managers and software engineers to deliver the new Kanopy TV app. This project also solved the problem of having inconsistent designs of Kanopy Tv apps and helped the company to have a stronger branding on their products with a new visual design system.

 



Tools

Design: Sketch app, Illustrator, Photoshop

Role
Web Designer / Visual Designer

 

The Designs

Find Your Library - Location Allowed05.png
 
 

Process Overview

Responsibilities

  • Designed using Sketch app, prototype on Adobe After Effects.

  • Created style guides, interaction guidelines, and libraries using Sketch and share on Google Drive (Later Zeplin).

  • Updated tasks on the JIRA project to communicate with the engineering team and the product managers.

  • Helped to review implementations and fix minor bugs using Sourcetree, Bitbucket, and Visual Code Studio.

  • Meet weekly with the Product Manager and Software Engineer Lead.

  • Meet weekly with the Product team.

 
Movie Screen.jpg
 

Organizing the workflow on Jira

To better communicate with the Product Manager and Engineer Lead, I shared the progress on Jira accordingly to the steps the engineers share their process between the engineering team: backlog, to do, in progress, design review, and done. Later, a code review ticket was added to the process before shipping the app. Naming folders and files on Google Drive was also based on how engineers share their files, so we could directly share the assets with them.

 
JIRA.png

Project JIRA board. Due to confidentiality reasons, I'm not allowed to share the tickets.

 

The Research Process

Studying the platform guidelines and Industry practices
I started my process studying the platform guidelines for the device and system I was designing for. For this project, I learned the guidelines from Amazon Developers since we were working to launch an app for Fire TV, but I also read other TV app design guidelines from other TV systems.

The main goal was to design a product that would be available on many TV devices in the future with a consistent design on Kanopy's brand. Currently, Kanopy also has a Android TV app and Samsung app available for download with the same design implemented.

 
FireTv - User Goals & Informational Architecture Copy 3.png

Studying the guidelines was the first step of the research process.

 

Understanding who are the users
During the project, I talked to the product managers to understand who are the users. They helped me to understand the two types of users:

  • The libraries and universities, which use the web administrator version of the web platform;

  • And the end-users, who are the general public that use Kanopy web platform, and the mobile
    and TV apps.

users.png

This insights turned into a document I called Branding Guidelines/Product Book after this project was done.

 

The startup didn't have a lot of data about the users, so I talked to the customer service team to collect user feedback and understand what are the pain points. It was a good resource that gave me great insights, for example, I learned that users were having a hard time to find the menus on other existing Kanopy TV apps, such as the app for Roku and Apple TV.

The problem with the Roku app is that the sidebar is too small on the left side of the TV and many users told to the customer service that they didn't notice that it is there. Depending on the tv picture mode, the users might not see the sidebar on their TVs because it cuts off the screen.

 
Roku.png

Kanopy Roku app: Problems to find the sidebar

 

The Apple TV app has a problem of hiding the top bar when the user lands on the content and many users didn't know about the existence of the side bar for categories. These insights were very important to us to understand their pain points and our goal was to fix this problem having the menu visible at all times, so we decided to place the menu on the top of the screen.

 
Apple TV.png
Apple TV - Browse01.png

Kanopy Apple TV app: Problems to find browse categories

 

Getting inspired
I got inspiration testing different TV apps doing Competitive Analysis boards and finding projects from Design teams on Dribbble and Medium posts to inspire me and share my findings with the team (and I appreciate how many designers from tech companies and startups share their knowledge with the public). In addition to the research, I started doing design teardowns to identify the positive and bad design experiences of the current Kanopy app.

Building Information Architecture boards & User Flows
Due to the complexity of the information on the platform, I designed Information Architecture boards to show the content of each screen and help the team to understand the content that should have in each design. For example, the information architecture and user flow for Browse shows all the categories included inside of Movies in the Browse experience (See below). For “Documentaries”, it has different categories inside.

 
FireTv - User Goals & Informational Architecture Copy 4.png

Kanopy app Information Architecture

IA.png

Information Architecture and Use Case for Browse screen

 

The Design Process

I started doing sketches and wireframes to share design ideas with the Product team. We split the process by project, so we had a ticket for every screen, such as Home, Browse, Product Page (Movie Description), Watchlist, Search, Settings, Kids Home, Error and Empty states.

Wireframes for the Home screen experience and menu design.

Design decisions were based on:

  • Usability: We listened to users feedback about their struggles with the other Kanopy TV platforms, so at this step of this process, we wanted to improve the overall user experience and give them a delightful experience on the Fire TV app.

  • Simplicity: For a better design consistency on different tv platforms and tv brands, we wanted to design a simple user interface with features that are simple to use.

  • Scope & Limitations of implementation: Kanopy users were requesting the Kanopy app to use with their Fire TV sticks. The Fire TV app project had a tight deadline with limited resources, so we decided to not add features that would just delay the project release.

 

High Fidelity Designs

This step of the process we went back and forth with the wireframes and designs, it was very helpful to get feedback from the product manager and engineer lead. We also had the CEO participating in some of the design decision, such as product description designs, as known as the video page.

For some designs, such as Browse Designs, we asked feedback from the Marketing team as well since the Product team wanted to make sure it was aligned with the company's brand.

 

Home Screen Design

 

Kids Home Design

 

Movie Description (Product) Screen Designs

 

Video Player Screen Design

 

Search Screen Design

 
Watchlist 1 - 9 videos.png

Watchlist Screen Design

 

Settings Screen Design

 

Link My Account Screen Design

 

Enter PIN Screen Design

 

Error Screen Design

 

The Challenges

Providing new assets for the new TV app that was approved by different teams was a challenge during this step of the process. We introduced a new gradient and a family of icons as new assets for the Browse experience.

The product team advocated for the use of icons within banners as part of the design decision to offer a delightful browsing experience for Kanopy users, including different icons between the Kanopy browse experience and the Kids Browse experience.

 

Kanopy Browse Experience Design (Banner Hovered)

 

Kanopy Kids Browse Experience Design

 

Prototyping

For this project, the best prototype choice was to animate the interactions that could have been reproduced on a TV device. Using After Effects, I prototyped the interactions for every screen and displayed the prototype movies on full screen on TVs for testing, so we could have a better idea of how the design would work on TV.

Take a look at the Movie Description Prototype, for example. The user flow is:

  • User opens the app and lands on Home screen

  • User selects a documentary on the Featured shelf

  • User is redirected to the Documentary description screen and click on More Info to read more about the documentary.

  • User decides to add to the Watchlist to watch it later and goes back to Home screen.

 
 

Adding new tools to the process

As part of delivering the designs and prototypes, I created style guides that included typography, colors, sizes, spacing, and interactions with the TV remote controller and the animations for each interaction (e.g: hovering buttons).

 

Styleguides & Interaction Guidelines for Movie Description Screen (Product Page)

 

However, the process at that time was very manual, so I introduced the Zepplin app to the team to share the designs. It helped to save time and the goal was to deliver only the interaction guidelines and animation guidelines (besides prototypes) when they are necessary.

 

Sharing Assets through Zeplin

 

Testing the app and Code Review

After delivering the designs, prototypes, and guidelines, I got to test the app using the Fire TV stick. We tested the functionalities internally and fixed any design issues. For minor issues, I used the Visual Code Studio and Source Tree to deploy and see changes. Advanced issues were reported to the engineering team.

 

Building a Library

The last step of the process was to build a library to help designers and developers understand the visual system and to share assets easily if anyone needs in the future. I built it on Sketch app since it is the main tool we use for design at Kanopy and it is compatible with Zepplin, so it is easy to export and share assets.

 

Styleguide designed for Kanopy Fire TV app

 

Outcomes

  • In this project, I improved a Kanopy TV app user experience by making the user flows simple and intuitive, so users can now use the Fire Stick to connect their Kanopy account with their favorite device.

  • As a team effort, I created a new browse experience that uses icons to indicate the different film categories that Kanopy has in its catalog and created an empathetic browse experience for the Kanopy Kids experience using icons that young kids would be more familiar with.

  • I built the first Design System and assets library for a Kanopy app.

  • I participated in code reviews with the product managers to check all the design elements of the project.

  • I added new tools to the design process, such as prototyping with After Effects and sync and updating design guidelines on Zeplin.

  • I created with the Marketing Design a Branding Guidelines/Product Book to help the Product team and Marketing team to find assets and find all Kanopy products files and guidelines.

Guidelines.png
 

Learnings

Designing the Kanopy app for Fire TV was a very collaborative project between the Product Manager, the Lead Engineer, and me as a Product Designer. I find it challenging to think of ways to improve the user experience for TV app users and we still keep improving the Kanopy app as the next steps to make the user experience even better. Take a look at the user reviews on the Kanopy Fire Stick Amazon page and download the app. Let me know what you think!

 
Customer Review.png
 
 

Banner for the Kanopy Fire TV launch, designed by the Marketing Team

 
 
 

Thank you for watching!

Feel free to contact me for any questions about this project.