OVERVIEW
With 4K resolution televisions becoming ever so popular, the capabilities entered into both Binge and Kayo's purview. In response to the growing demand for high-definition streaming, Binge and Kayo, prominent streaming services under Foxtel Group, introduced 4K resolution capabilities to enhance user experience.
Enabling more devices with 4K streaming capabilities and providing alternate methods for customers to watch Binge and Kayo content in ultra-sharp quality, add value to the subscribers. Wanting to enhance their services and value, the option to view live and on-demand content in 4K becomes easier, allowing big games or star-studded shows to be seen by customers in high quality. As UX/UI Designer at Foxtel's Streamotion, I spearheaded the integration of this feature across both platforms.
BACKGROUND
Launched in 2018, Kayo took the world by storm as a leading sports subscription service, offering live and on-demand content from top networks like FOX Sports and ESPN. This platform achieved the goal of being the 'Netflix of sport'. It has since grown a record number of over One Million total subscribers and counting.
Following in the footsteps of this successful release, Foxtel Group established Streamotion in preparation for their next big thing... Binge. Launched in in 2020, Binge was introduced as Foxtel's entertainment-focused streaming platform, featuring premium content from HBO and Warner Bros. Similar to Kayo, it also was capable of streaming live content with a selection of linear Foxtel cable networks such as FOX One, Fox Arena, and BBC First.
CHALLENGE
With 4K TVs becoming standard, our goal was to seamlessly integrate 4K streaming into Binge and Kayo. We aimed to inform users of this enhancement and encourage upgrades where necessary, ensuring clarity regardless of the user's subscription plan or device compatibility.
APPROACH
I led the visual design efforts by defining clear user stories and scenarios for both platforms. From initial wireframes to final designs, I focused on enhancing visibility of the 4K option across various touchpoints, including settings screens, video players, and title carousels. Each design iteration was meticulously crafted to align with the evolving business requirements and existing design systems of Kayo and Binge.
There were two defining stakeholders to consider:
- Entitled customers (Users on the standard/premium [Binge] or basic [Kayo] plan)
- Non-entitled customers (Users on the basic [Binge] or One [Kayo] plan)
- Entitled customers (Users on the standard/premium [Binge] or basic [Kayo] plan)
- Non-entitled customers (Users on the basic [Binge] or One [Kayo] plan)
This would determine if the overall message would be to inform the user that 4K was available to watch straightaway or be encouraged to upgrade. The message also depends on whether the user's device is 4K compatible. All scenarios were considered, planned for, and outlined.
After identifying these two groups, target areas of concern where this feature needed to be conveyed to the viewer. This ranged from functional areas such as settings screen and video player, to more of the visual side including title carousels and tile badges.
Taking on the visual design responsibilities, after the user stories and use cases have been defined, with the wireframes I then created the final designs. These designs need to serve the purpose of:
- Visual representation of all the planning that came before
- An imitation of the live site as the best referral for all stakeholders
- The precise direction for the development team to use as a guide
- Visual representation of all the planning that came before
- An imitation of the live site as the best referral for all stakeholders
- The precise direction for the development team to use as a guide
Due to business requirements changing dependant on the platform and the order that these designs were delivered in, there are a few differences between the Binge and Kayo release.
BINGE - USER STORIES
Meta Data
Settings
Video Player - Top Tray
Video Player - Toast Message
KAYO - USER STORIES
Meta Data
Settings
Video Player - Badge
Video Player - Toast Message
Disclaimer: Not all visual design done was included, due to repetition and similarity. Only key screens are displayed above.
QUALITY ASSURANCE TESTING
In ensuring the seamless functionality and top-notch user experience of the Binge and Kayo platforms, rigorous product quality assurance testing played a pivotal role (a common part of the design process). The team meticulously conducted comprehensive testing across various devices (television), screen resolutions, and network conditions to guarantee optimal performance and reliability.
From functional testing to usability testing, every aspect was scrutinised to identify and address any potential issues before deployment. Through this meticulous approach, we ensured that users would enjoy uninterrupted 4K streaming and seamless navigation, enhancing the overall satisfaction and engagement within both platforms.
DESIGN SYSTEMS
As this update was an addition onto already existing products, Kayo and Binge, there needed to be a design system re-establishment. Adding onto the new components and assets creating from this project, there were discrepancies from the design system to what was currently live on the app. The apps have been in the market for years now, and for the designs I worked on, I was able to update the system simultaneously as I went through. I ensured it stayed consistent but also accurate to the product/s of today.
BINGE
KAYO
RESULTS AND IMPACT
Post-launch, we observed a significant increase in user engagement and satisfaction metrics, indicating the successful adoption of 4K streaming. This project not only met its technical goals but also contributed to enhancing the overall value proposition of both platforms.
KEY TAKEAWAYS
This project was one of my larger undertaking whilst working in the product team responsible for Streamotion.
Taking on the Lead Visual Designer role for this project was a big responsibility where I fostered my collaboration, communication and interpretation skills. I took initiative and ownership for the final visual designs, advocating the choices I made with certainty.
There was definitely moments where the direction had to be pivoted due to business requirements and tested my ability to swiftly adapt and align. It pushed me during times of uncertainty and I prevailed.
Due to these products being a few years old, the live apps had advanced beyond the original designs. This added extra time and work on my part to make sure what I delivered closely and very exactly portrayed Kayo and Binge in the market today.
As there were two different products correlated with this project, clear boundaries needed to be made when relevant. Time was also a factor to keep consistent since the platform updates were made one after the other with partial overlap. Collaboration is brought back to this point where a lot of point of contacts emphasises my communication, prioritising and endurance skills.
Close-up of one of the Final Screens
Designed by Gawshika Aumkaran at Foxtel Group