friDay Video
End-to-end UI/UX Design
Developing user-centric navigation, focus visibility, and parental control features, ensuring seamless integration across Android, iOS TV, and Samsung platforms.
Addressing Performance And Balancing Design
Addressing performance issues is essential in design, especially for devices like the Fire TV Stick, which may not have optimal performance. Balancing design elements and performance constraints to ensure a smooth user experience.
High Ranking & User Appeal
Since its launch, this app has consistently maintained a prominent position on the popular shelves in the Play Store in Taiwan, reflecting its ongoing popularity and user appeal.
TV App Performance and Resource
Not just performance issues but also resource challenges arise, especially when a single engineer is tasked with developing for multiple platforms.
Understand the Challenges
Defining the Problems
Competitive Analysis and Cognitive Walkthrough
After the cognitive walkthrough, I discovered that many platforms follow the same basic interaction guidelines. This means that when I switch to different platforms, I don't need to learn everything from scratch again.
Secondary Research
The secondary research provided a visual insight into how people engage with TV, emphasizing the significance of shared experiences.
Many users prefer watching TV with family, suggesting a higher likelihood of TV usage when shared. Considering this, I aim to design a user-friendly control system and interface suitable for all age groups.
Also, we need additional features to accommodate this aspect of our project.
Scenario Study Overview
In this scenario study, the focus was on how users interact with a newly designed TV app, emphasizing essential tasks central to the user experience. It was noted that different devices have unique interaction methods, such as Apple TV's phone connection feature, while Android systems may require QR codes or alternative approaches for similar functionalities. This distinction underscores the need to tailor the app's design to accommodate various user interaction styles across different platforms.
These tasks were carefully chosen to cover a broad spectrum of user actions, from initial engagement to personalized settings.
Each task aimed to reveal critical insights into how real users interact with the TV app, identifying areas of strength and opportunities for improvement. The objective was to refine the app's design to enhance usability, ensuring that all features are accessible, intuitive, and aligned with user expectations, thereby creating a more engaging and enjoyable viewing experience.
Ideating and Looking for Solutions
Enhancing TV App Usability
Focused on improving remote control interactions and app structure to prevent users from feeling lost during navigation.
Prioritized performance by adhering to TV design guidelines, minimizing potential issues caused by performance limitations.
Dedicated efforts to refining user interface details, ensuring clear selection visibility and intuitive navigation, thereby enhancing the viewing experience on various TV platforms
Design Principles
1 Consistency:
Consistent behaviours for focusing on objects include using the back function, directional navigation (such as what happens when pressing left or right), and selection actions (like needing to press the 'OK' button to select an item). If pressing a button results in an action in one context but not in another, it could lead to user confusion.
2 Accessibility:
Balancing these elements is key to making the interface both user-friendly and accessible to a wide range of users, including those with visual or motor impairments. This requires thoughtful design choices that enhance visibility and interaction without overwhelming the user with too much visual complexity.
3 Clarity:
This involves meticulously planning the layout and sequence of menus, features, and content to ensure that users can navigate the app intuitively. The flow should be logical and straightforward, allowing users to easily find what they are looking for without confusion or unnecessary steps.
Information Architecture
Based on my design decisions, information architecture (IA) plays a crucial role in the app's development. I have taken the initiative to define the IA, providing a clear blueprint of how the app is structured, which aids our team in understanding the app's overall framework and functionality. This clear IA delineation facilitates our delving into more detailed aspects of each feature, ensuring that every element is cohesively integrated and aligns with the overarching user experience goals.
Wireframe Strategy for TV App Interaction
I ensured the design structure was functional and user-friendly and maintained consistency in the remote control system.
Designing the solutions
Emphasis on Design Decisions & Deliverables
After a comprehensive analysis, I optimized the new version, culminating in key outcomes.
❶ Back Button System Design with Navigation Memory:
When a user navigates to a deeper layer in the app and then returns to the top layer, the system remembers and highlights their last selected item.
❷ Enhanced Selection Visibility
Enhance the selected user interface element by increasing its visual emphasis by 1.2 times, ensuring it stands out clearly to users upon selection. This method improves visibility and user recognition, facilitating a smoother navigation experience.
➌ Last Selection Memory Feature
Even without user selection, this feature remembers the last shelf or item selected for the app.
Remembering the last selected shelf or item, this functionality allows users to return to the exact point in the menu or content list where they left off, enhancing the user experience by providing a seamless and intuitive navigation flow.
➍ Player Settings Alignment:
For users on large screens, providing an uninterrupted viewing experience is key to ensuring a positive experience. Therefore, we have comprehensively integrated numerous functions into the TV app to cater to this need.
A. Skip Feature for Opening and Ending Credits:
On the TV app, we have implemented the function to skip the opening credits (片頭) and ending credits (片尾). When this skip button appears, it automatically gains focus, allowing users to simply press 'OK' to skip. If ignored, this function disappears after a few seconds, ensuring it doesn't disrupt the viewing experience.
Automatically gains focus feature
B. Automatic Next Episode Transition:
We also offer an automatic feature to skip to the next episode, with a button display showing the upcoming episode number as a reminder for users. Additionally, users have the option to press this button for an immediate transition to the next episode.
Automatically gains focus feature
C. Direct Episode Selection During Playback: During playback, users have the option to select a different episode. By selecting and pressing the designated button, an episode section appears, providing clear information. This enables users to make a choice directly, without needing to return to the main drama series page.
➎ Parental Control Functionality on TV
On our TV app, we provide a parental control lock feature, enabling parents to create a safe viewing environment for children of all ages. Parents can set a password and select the content levels they wish to hide. We offer five levels of restriction, allowing users to choose to hide content up to certain advisory levels.
➏ Simplified Login System:
For our TV app, we initially offered a six-digit random number login method, which required users to first obtain the number through our mobile app. However, user feedback indicated that some users, constrained by limited storage on their devices, were reluctant to download another app. To address this, we introduced an alternative login option: scanning a QR code. This method directs users to a website where they can input the digital number, providing a quick and convenient login process without the need for additional app downloads. This dual approach caters to varying user preferences and technical limitations, enhancing accessibility and user convenience.
➐ Visible Focus and Active Design:
In this project, ensuring a clear and unambiguous focus is paramount, as any uncertainty in focus transitions could lead to user confusion and hinder their navigation experience. Additionally, active design elements are vital to guide users effectively, making it essential to clearly indicate their current location within the app and their potential navigation paths, thus enhancing the overall user experience and usability.We conducted extensive testing to ensure the focus element is easily visible, employing overlays, scaling, motion design, and contrast colours to enhance clarity and distinguishability for users.
Player menu on Apple TV
Implementation Metrics and Achievements
✨Key metrics to track
Conclusion
Takeaways
Developing a new platform necessitated an in-depth understanding of the device's limitations and unique characteristics. Historically, our team's approach involved designing first and then discussing it with engineers. However, in this particular project, effective communication with engineers was imperative right from the start, as it was crucial to understand the technical constraints before designing.
Not only did I learn significantly from this experience, but our entire team gained valuable insights. One of the key lessons for me was the importance of balancing performance with design. In my previous work on websites and mobile apps, where performance constraints were less stringent, I had more freedom in my design choices. However, with this TV app project, I realized that overly complex UI and animations could render the app unusable for many users, leading to a poor user experience.
This project taught me the delicate art of balancing technical feasibility with user experience, a skill that has undoubtedly made me a better designer.
