Prototyping and Feedback Loop for New Feature in Video App
Project Summary
I led the prototyping and design of a new feature for our iOS and Android streaming apps, allowing users to hide shows or movies they had previously started watching. The goal was to provide users with a familiar, intuitive way to manage their ongoing content and add flexibility to the user experience.
The Problem
Users who had previously started watching shows or movies were only given the options to “Start from the beginning” or “Resume from where they left off.” The objective was to introduce a new action that allowed users to hide or remove these shows from their “Continue Watching” collection, enhancing control over their content.
This required an update to the mobile app’s user interface, particularly around previously started shows, and the addition of a new interaction via a bottom sheet menu for managing actions.
The Research
Competitive Analysis
Before diving into prototyping, I conducted a competitive analysis to understand how other popular streaming apps implemented similar features. The research provided insights into common patterns and user expectations for managing shows in the “Continue Watching” section. This analysis informed my decision to use a bottom sheet design, a widely recognized interaction pattern, ensuring that users would find the feature familiar.
Design Approach
Prototyping Process
Using Figma, I began by updating existing components from our design system library. I iterated on different solutions, ensuring the prototype adhered to standard mobile design patterns while offering a clean and user-friendly interface.
The prototype included:
- An update to the mobile UI for managing previously started shows.
- A bottom sheet that would animate in and out, displaying a list of actions, including the option to hide a show.
- A confirmation prompt to ensure users didn’t accidentally hide their shows.
I maintained a modular approach within the Figma file to prevent interference with other mockups and ensure the components could be easily reused or updated in the future.
Stakeholder Feedback Loop
Presenting the Prototype
After refining the prototype based on internal design team feedback, I presented the updated components and user flows to stakeholders. It was important to showcase how the new bottom sheet interaction would function across both phones and tablets, as the app needed to support multiple device types.
The introduction of the bottom sheet with actionable options was well-received by stakeholders. They appreciated the potential for this component to scale in future iterations, allowing for additional actions beyond just hiding shows. This feedback helped validate the design direction.
Collaboration and Team Involvement
Developer Collaboration
Throughout the prototyping process, I collaborated with our developers to ensure that the bottom sheet interaction was technically feasible. Although this pattern is common in mobile apps, I wanted to ensure that our developers had input, particularly around the animations and transitions involved.
This collaboration ensured that the design could be implemented smoothly, without performance issues or technical roadblocks. It also allowed developers to participate in decision-making early on, aligning both design and development goals.
Challenges and Adaptations
Challenges
Given that the feature itself was not a radically new concept, there were few significant challenges. The primary focus was ensuring that the bottom sheet interaction was intuitive and consistent with existing app patterns.
Adaptations
While no formal user testing was conducted outside of the internal team, the design was kept consistent with industry standards, ensuring a seamless experience for users familiar with similar streaming apps. This allowed for rapid prototyping and reduced the need for extensive user validation.
Final Outcome
Results and Implementation
The prototype effectively showcased how the new “Hide Shows” feature would function, from design through to development and QA. It allowed stakeholders to visualize the full user flow, while developers and QA teams could reference the prototype to understand the expected interactions and behavior.
The feature was successfully implemented in both the iOS and Android apps, offering users a new, flexible way to manage their content. The bottom sheet design not only achieved the goal of hiding shows but also opened the door for future enhancements to content management features.
Learnings
This project reinforced the importance of involving developers early in the design process, especially when introducing new interaction patterns like the bottom sheet. By validating the technical feasibility from the start, we ensured a smooth transition from prototype to final implementation. The feedback loop with stakeholders and internal teams was also critical, helping to refine the design and identify opportunities for future iterations.