Product Design // UX/UI Design
As a Product Designer working with product managers and the engineering team, I helped Kanopy to launch their first TV app for Fire TV and Android TV with a brand new design system and user experience for Kanopy users.
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.
Design: Sketch app, Illustrator, Sketchbook
Prototype: After Effects
Share: Zeplin & Design Guidelines PDFs
Code Review: Visual Studio Code
Product Designer / Prototyper / UX Designer
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.
Sharing the workflow through 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.
Project JIRA board. Due to confidentiality reasons, I'm not allowed to share the tickets.
The Research Process
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 using Kanopy's brand. Currently, Kanopy has a Android TV app available for download with the same design implemented.
Studying the guidelines was the first step of the research process.
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.
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.
Kanopy app Information Architecture
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.
Limitations to implementation: For a better design consistency on different tv platforms, we decided to always have the menu and submenu available because some smart TVs were not able to support some of the features we thought of implementing.
Scope & Demand: 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 too many different components 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 Screen Design
Settings Screen Design
Link My Account Screen Design
Enter PIN Screen Design
Error Screen Design
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
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
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.
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!
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.