Where entertainment meets intelligence — connecting Roku control, smart home management, and voice-powered shopping in one seamless experience.
Project Type
Digital App Interface
Date
September 2024
Project Overview
For this project, I created a digital interface inspired by Roku, designed for the Amazon Firestick, with the goal of seamlessly combining Amazon’s shopping platform with its streaming services. The app allows users to easily navigate between shopping and entertainment features, enabling them to shop for products while watching content or even find products related to shows and movies in real-time. I focused on creating an intuitive user experience with streamlined access to both Amazon shopping and streaming services, ensuring smooth transitions between these two functions, while maintaining the unique characteristics of the Firestick's interface and ensuring fast, responsive performance.
Problem Statement
How might we integrate Amazon shopping with Roku’s media streaming platform to create a unified app experience for Amazon users?
UX Tools
Figma
UX Practices
Affinity Mapping
Personas
Feature Prioritization
User Flow
Low Fidelity Wireframe
Mid Fidelity Wireframe
Protoype
Branding Guide
Role
UX/UI Designer
Deliverable
Prototype
Research
User Interview Questions
How much time do you spend utilizing your T.V. per day?
What do you use your T.V. for?
What T.V brand do you use?
If there was something you could improve for the product, what would it be?
Are you familiar with Amazon products?
If so, what digital product of theirs do you use?
What do you like/dislike about the product?
How could the product be improved?
How often do you lose your remote?
What emotions do you feel when your television cannot function in the way you desire?
What do you wish was available when you are not near your television?
How can the accessibility of a television be improved to fit your needs?
Affinity mapping is a process used to organize and analyze qualitative data by grouping related insights, ideas, or feedback into categories based on common themes. In the context of your project, affinity mapping could be used to organize feedback from users or stakeholders to identify patterns and prioritize design decisions. For example, after conducting interviews or gathering feedback about the Amazon Firestick interface, you could group responses into categories such as "Navigation Issues," "User Preferences," and "Technical Barriers." This helps highlight the most common pain points and areas of improvement, allowing you to focus on the features that will most improve the user experience.
One persona is a college student who enjoys exploring new restaurants with friends, values convenience, and looks for features like easy reservations and quick payment options. The other persona is a budget-conscious student who seeks affordable dining options, discounts, and loyalty rewards while still prioritizing quality and reviews.
Design
The user flow for the Amazon Firestick interface starts with the user opening the app and landing on a clear, intuitive homepage where they can easily choose between shopping and streaming options. From there, they can navigate through categories, search for products or content, and make selections to either add items to their cart or start watching content. Once they’ve made a selection, the flow leads to a checkout screen for purchasing, or they can seamlessly switch back to streaming without interrupting their experience, ensuring a smooth transition between shopping and entertainment.
The low-fidelity wireframe for the Amazon Firestick interface focuses on the basic structure and layout, prioritizing functionality over design details. It includes a simple navigation bar with clearly defined sections for shopping and streaming, large buttons for easy interaction, and basic placeholder images for content and products. The wireframe aims to map out the user flow and ensure that key actions—such as searching, browsing, adding to cart, and switching between shopping and streaming—are intuitive and easy to access, without unnecessary distractions or complexities.
The mid-fidelity wireframe for the Amazon Firestick interface refines the layout by adding more detailed elements such as clearer typography, defined icons, and interactive components. It includes a structured navigation bar with labeled categories for shopping and streaming, along with prominent search and filter options for easier browsing. Key actions like adding items to the cart, viewing product details, and selecting content are visually distinguished to enhance usability, while placeholders for images and content give a better sense of the app’s design and flow, setting the stage for further refinement in the high-fidelity version.
Conclusion
The Roku x Amazon Alexa Integrated App project began as an original concept exploring how entertainment and smart home ecosystems could merge into one seamless platform. The idea centered on allowing users to control Roku content, smart devices, and even shop directly through Alexa voice commands a unified experience bridging convenience, personalization, and interactivity. Although similar integrations later appeared through Amazon Prime and product-linked ads that users can now add to their cart, this project was envisioned before it became a mainstream concept, highlighting early recognition of a growing market opportunity. By developing low-fidelity wireframes that combined Roku’s content navigation with Alexa’s voice-driven capabilities, this project demonstrated how cross-platform design could enhance engagement and simplify daily digital interactions. It serves as both a proof of foresight and a foundation for future innovation, showing how early ideation can align closely with real-world product evolution