Case Study
AI on Fire TV Search
Overview
This case study details the design overview of the new UX for AI on FireTV. I was one of two product designers working on the project and we worked with a mix of SDEs, PMs, and Execs over a condensed 4 month timeline. Designs were purely made in Figma.
This case study details the design overview of the new UX for AI on FireTV. I was one of two product designers working on the project and we worked with a mix of SDEs, PMs, and Execs over a condensed 4 month timeline. Designs were purely made in Figma.
Includes
This case study includes a recording of the Tech Conference Presentation, a project background, an overview of the customer needs, a customer journey map, a before and after comparison, & the final designs
Project Background
Project
Background
Current Search on FireTV
What is it?: Search is a tab on FireTV where customers can go to literally 'search' for content that they want to watch.
How does it work?: Customers can either enter their search query by keyboard or by talking to Alexa.
The History: Being such a standard feature, the search experience on FireTV has largely remained the same for a long time.
However... with the advent of Large Language Models and Generative AI, Fire TV Search was falling behind.
Fire TV required an update and including Generative AI was one of the best ways to do it!
How Might We modernize FireTV Search by Integrating AI into the current Customer Experience?
How Might We modernize FireTV Search by Integrating AI into the current Customer Experience?
- Overarching How Might We Question
Given This…
Integrating Generative AI on
Fire TV
Integrating Generative AI on Fire TV
Integrating Generative AI on
Fire TV
Why was this change Necessary?
It was clear this space was new and exciting, but why was it necessary?
A better Customer Experience: Generative AI made Alexa and FireTV Search more conversational, offering a more natural search experience for customers.
Navigating a Massive Catalogue: FireTV has a massive catalogue of content. Introducing Gen AI can help parse this catalogue, making it more manageable for our customers.
Pioneering Design Trends: The emergence of Generative AI has sparked a significant transformation in all UX Design. By unveiling this initiative, we aim to lead the way in exploring the applications of Gen AI within the realm of entertainment.
Why was this change Necessary?
It was clear this space was new and exciting, but why was it necessary?
A better Customer Experience: Generative AI made Alexa and FireTV Search more conversational, offering a more natural search experience for customers.
Navigating a Massive Catalogue: FireTV has a massive catalogue of content. Introducing Gen AI can help parse this catalogue, making it more manageable for our customers.
Pioneering Design Trends: The emergence of Generative AI has sparked a significant transformation in all UX Design. By unveiling this initiative, we aim to lead the way in exploring the applications of Gen AI within the realm of entertainment.
Why was this change Necessary?
It was clear this space was new and exciting, but why was it necessary?
A better Customer Experience: Generative AI made Alexa and FireTV Search more conversational, offering a more natural search experience for customers.
Navigating a Massive Catalogue: FireTV has a massive catalogue of content. Introducing Gen AI can help parse this catalogue, making it more manageable for our customers.
Pioneering Design Trends: The emergence of Generative AI has sparked a significant transformation in all UX Design. By unveiling this initiative, we aim to lead the way in exploring the applications of Gen AI within the realm of entertainment.
Why was it Difficult?
Although Amazon committed a lot of resources towards this project, there were some aspects of the project that made it extremely difficult.
A New Frontier: Generative AI on FireTV Search, let alone on TV was a whole new ballgame. With other projects, there was often a precedent to follow. With this project, we were trailblazing a new design system.
New Feature, Same Design System: Being such an established product, designing for FireTV often comes with a lot of red tape. Our challenge was to balance an extremely new feature with the rules that came with our old design system.
Discoverability and Customer Comprehension: We knew it would be a challenge to communicate to the customer that we were adding in this new feature. So we made it a point of emphasis to focus on discoverability and customer comprehension.
Why was it Difficult?
Although Amazon committed a lot of resources towards this project, there were some aspects of the project that made it extremely difficult.
A New Frontier: Generative AI on FireTV Search, let alone on TV was a whole new ballgame. With other projects, there was often a precedent to follow. With this project, we were trailblazing a new design system.
New Feature, Same Design System: Being such an established product, designing for FireTV often comes with a lot of red tape. Our challenge was to balance an extremely new feature with the rules that came with our old design system.
Discoverability and Customer Comprehension: We knew it would be a challenge to communicate to the customer that we were adding in this new feature. So we made it a point of emphasis to focus on discoverability and customer comprehension.
Why was it Difficult?
Although Amazon committed a lot of resources towards this project, there were some aspects of the project that made it extremely difficult.
A New Frontier: Generative AI on FireTV Search, let alone on TV was a whole new ballgame. With other projects, there was often a precedent to follow. With this project, we were trailblazing a new design system.
New Feature, Same Design System: Being such an established product, designing for FireTV often comes with a lot of red tape. Our challenge was to balance an extremely new feature with the rules that came with our old design system.
Discoverability and Customer Comprehension: We knew it would be a challenge to communicate to the customer that we were adding in this new feature. So we made it a point of emphasis to focus on discoverability and customer comprehension.
Customer Journey
We created a customer journey map to build a better understanding of how a customer might use our proposed Generative AI Search when they have an exact idea what they are looking for, versus when they have no idea what they are looking for.
Exact Idea: If a customer knows exactly what they are looking for, they can essentially give Alexa clues about the characteristics of the movie if they have forgotten the movie's name.
No Idea: If the customer has no clue what to watch, they can peruse the catalogue by giving Alexa genres and then use other search criteria to zero in on a movie.
Refinements: As mentioned, one of the big changes to search in this project was the inclusion of refinements. Search sessions can now be several queries long and build off of one another to help customers zero in on content.
Understanding the Customer
Understanding the Customer
Customer Needs with the New Experience
Naturally, adding such a powerful feature to a well established design system necessitated major changes to the existing customer experience. So, what did we change?
Longer Customer Queries: In the current FTV Search System, customers were often limited to searches like "Ant Man" or "Action Movies." However, with the new Customer Experience, Customers will be able to ask longer queries like "What was that super hero movie with Paul Rudd?"
Refinements:: In addition to asking longer questions, they will also be able to tack on refinements to funnel their original search. So after searching for the question above, they can refine the search by asking "Now only show me the ones that are free to me." This was not possible in our original experience.
Consistency with Current Design: Because we are introducing such a powerful feature to search, we wanted as much of the design system to remain as familiar as possible. We had to work within the bounds of our current design system.
Customer Needs with the New Experience
Naturally, adding such a powerful feature to a well established design system necessitated major changes to the existing customer experience. So, what did we change?
Longer Customer Queries: In the current FTV Search System, customers were often limited to searches like "Ant Man" or "Action Movies." However, with the new Customer Experience, Customers will be able to ask longer queries like "What was that super hero movie with Paul Rudd?"
Refinements:: In addition to asking longer questions, they will also be able to tack on refinements to funnel their original search. So after searching for the question above, they can refine the search by asking "Now only show me the ones that are free to me." This was not possible in our original experience.
Consistency with Current Design: Because we are introducing such a powerful feature to search, we wanted as much of the design system to remain as familiar as possible. We had to work within the bounds of our current design system.
Customer Needs with the New Experience
Naturally, adding such a powerful feature to a well established design system necessitated major changes to the existing customer experience. So, what did we change?
Longer Customer Queries: In the current FTV Search System, customers were often limited to searches like "Ant Man" or "Action Movies." However, with the new Customer Experience, Customers will be able to ask longer queries like "What was that super hero movie with Paul Rudd?"
Refinements:: In addition to asking longer questions, they will also be able to tack on refinements to funnel their original search. So after searching for the question above, they can refine the search by asking "Now only show me the ones that are free to me." This was not possible in our original experience.
Consistency with Current Design: Because we are introducing such a powerful feature to search, we wanted as much of the design system to remain as familiar as possible. We had to work within the bounds of our current design system.
Customer Journey
We created a customer journey map to build a better understanding of how a customer might use our proposed Generative AI Search when they have an exact idea what they are looking for, versus when they have no idea what they are looking for.
Exact Idea: If a customer knows exactly what they are looking for, they can essentially give Alexa clues about the characteristics of the movie if they have forgotten the movie's name.
No Idea: If the customer has no clue what to watch, they can peruse the catalogue by giving Alexa genres and then use other search criteria to zero in on a movie.
Refinements: As mentioned, one of the big changes to search in this project was the inclusion of refinements. Search sessions can now be several queries long and build off of one another to help customers zero in on content.
Design Solution
Design Solution
What did we Change?
We made some well thought out design decision that addressed the customer needs listed above. I will dive into a deeper explanation below, but here are the customer needs and respective solutions:
Longer Customer Queries : A redesigned breadcrumb in the top left.
Refinements: 2nd Row of the breadcrumb tracks all refinements from past searches.
Consistency with Current Design: We designed the new solution with existing components so as to maintain the feel of FireTV search.
What did we Change?
We made some well thought out design decision that addressed the customer needs listed above. I will dive into a deeper explanation below, but here are the customer needs and respective solutions:
Longer Customer Queries: A redesigned breadcrumb in the top left.
Refinements : 2nd Row of the breadcrumb tracks all refinements from past searches.
Consistency with Current Design: We designed the new solution with existing components so as to maintain the feel of FireTV search.
Longer Customer Queries
Refinement Filter
Pills
Why did we do This?
As mentioned, we knew that as the experience became more conversational, customers would be searching for longer queries. So we designed a breadcrumb that can "carry more weight." The top line is an exact quote of what the customer searched for in their previous query. This is important as the customer will be able to check that the system heard them correctly.
The second line will work in tandem with the first and will track all of the customer's refinements. If a customer first searches for "Idris Elba," they can later tack on something like "only show the free ones," or "only show new stuff." All of these refinements are tracked in the second line.
Why did we do This?
Adding in Filter pills that customers could use to refine their search was rooted in the desire to increase discoverability of the new AI feature. In adding the pills, we are communicating to the customer that they can refine their search even more. From there, the customer can either click on a refinement, or speak it to Alexa. Moreover, any and all refinements will be added to the breadcrumb. By adding this feature, customers do not need to know exactly what they are looking for and can use a funnel search method instead.
Refinement Filter Pills
Longer Customer
Queries
Why did we do This?
As mentioned, we knew that as the experience became more conversational, customers would be searching for longer queries. So we designed a breadcrumb that can "carry more weight." The top line is an exact quote of what the customer searched for in their previous query. This is important as the customer will be able to check that the system heard them correctly.
The second line will work in tandem with the first and will track all of the customer's refinements. If a customer first searches for "Idris Elba," they can later tack on something like "only show the free ones," or "only show new stuff." All of these refinements are tracked in the second line.
Why did we do This?
Adding in Filter pills that customers could use to refine their search was rooted in the desire to increase discoverability of the new AI feature. In adding the pills, we are communicating to the customer that they can refine their search even more. From there, the customer can either click on a refinement, or speak it to Alexa. Moreover, any and all refinements will be added to the breadcrumb. By adding this feature, customers do not need to know exactly what they are looking for and can use a funnel search method instead.
Why did we do This?
Adding in Filter pills that customers could use to refine their search was rooted in the desire to increase discoverability of the new AI feature. In adding the pills, we are communicating to the customer that they can refine their search even more. From there, the customer can either click on a refinement, or speak it to Alexa. Moreover, any and all refinements will be added to the breadcrumb. By adding this feature, customers do not need to know exactly what they are looking for and can use a funnel search method instead.
Why did we do This?
As mentioned, we knew that as the experience became more conversational, customers would be searching for longer queries. So we designed a breadcrumb that can "carry more weight." The top line is an exact quote of what the customer searched for in their previous query. This is important as the customer will be able to check that the system heard them correctly.
The second line will work in tandem with the first and will track all of the customer's refinements. If a customer first searches for "Idris Elba," they can later tack on something like "only show the free ones," or "only show new stuff." All of these refinements are tracked in the second line.
Consistency with Current Design
Consistency with
Current Design
Why did we do This?
As mentioned above, we had to walk this fine line between creating a new experience while also not giving the customer whiplash. With that in mind, we designed the new experience using existing components from the established Fire TV design system. In doing so, we managed to integrate an entirely new experience while maintaining customer trust and understanding.
Why did we do This?
As mentioned above, we had to walk this fine line between creating a new experience while also not giving the customer whiplash. With that in mind, we designed the new experience using existing components from the established Fire TV design system. In doing so, we managed to integrate an entirely new experience while maintaining customer trust and understanding.
Why did we do This?
As mentioned above, we had to walk this fine line between creating a new experience while also not giving the customer whiplash. With that in mind, we designed the new experience using existing components from the established Fire TV design system. In doing so, we managed to integrate an entirely new experience while maintaining customer trust and understanding.
Wrapping Up
Wrapping Up
Designing for a New World
Generative AI, Large Language Models (LLMs), and AI in general are becoming the new norm and it's design's newest frontier.
Fire TV is an awesome space to work on because it is often pushing the boundaries of both tech and entertainment.
It was especially exciting designing for AI in entertainment because there is almost no precedent. It pushed me to be more creative and come up with new solutions to the problems we faced.
It was also a dream come true to see the project I worked on get presented on the main stage of a tech conference (see video above). For me it felt like a testament to how far I had come in my career thus far
I am especially grateful to the team I worked with, as I was one of two UX Designers (Alena Washburne being the other) and got to work with a number of different engineers, executives, and managers. And a Special Thank You to the entire Fire TV Team!