Redesigning Hoy TV App & webSite



i-CABLE HOY, one of the major TV broadcasters in Hong Kong, is building a video streaming service and app by providing users with live TV, news, variety shows, popular dramas in Cantonese and English. It was my pleasure to team up with HKAI, the AI and online advertising solutions provider, to help HOY redesign and develop a brand new OTT platform, including a mobile & tablet app and webpage.

My contributions to this project were UX design, visual design, and prototyping. I worked collaboratively with PM and developers in Hong Kong and United Kingdom
to ensure the successful launch of products in Hong Kong.



Role



UX/UI Designer



Team



Product Manager
Front-end Engineer

Data Engineer



Duration



Apr 2023 to Aug 2023

5 mo.



Goal



  1. Revamp the user interface with a cohesive design system, ensuring consistency across a range of platforms such as mobile phones, tablets, and web browsers.
  2. Elevate the user experience for seamless video content streaming across various devices.
  3. Expand the user base by encouraging more account sign-ups.


Understand & Ideate



The client has already listed the feature requests collected from user feedback and app store reviews. As a UX designer, I assist the client in organizing and prioritizing the features to enhance the user-friendliness of both the app and website.

I first needed to do an in-depth analysis of the app and website. I wanted to understand the different functionalities and the app’s overall architecture and navigation.



WHAT PROBLEMS DID WE IDENTIFY?



  • Finding content is difficult without a search bar; everything is categorized by type.
  • Watching programs requires manually activating full-screen mode.
  • Users want to save and resume the content they're watching.
  • The EPG has limited functionality, showing only current and upcoming broadcast schedules.
  • Users dislike seeing both in-app and news ads at the same time.
  • Pages/screens appear cluttered and outdated.
  • There's no tablet version even though many users want it.
  • Users want to cast their phone screen on the TV.


IDEATIONS



  • Redesigned the home page to prioritize content curation, making it easier for users to discover and explore various content.
  • Enhanced search experience by adding a prominent search button to the main pages, allowing users to quickly access the search feature.
  • Streamlined the user experience by consolidating the EPG and Live TV pages and incorporating a "Set reminder" feature for programs.
  • Introduced the "save to favorites" and "watch later" features for signed-in users to boost account sign-ups and enhance user engagement.
  • Users can now preview trailers without having to play the full video, offering a more convenient viewing experience.
  • Users now have the ability to cast their phone screen to TV using the "cast" button.
  • The video automatically plays in fullscreen mode when users press the play button.
  • Added dark and light themes to accommodate user preferences, as the dark theme is becoming more popular for video streaming services.


DESIGN APP FRAMEWORK



User Flow



Our data has shown that prompting users to sign up for an account before accessing video content has resulted in a lower success rate in account sign-ups. Therefore, users can watch content without signing up or logging into their accounts. However, to unlock additional features like "Watch it Later," "Save to My Favorites," "Set reminders for programs," and "Watch Tailor recommendations," signing up or logging into the account is required, providing an incentive for users to do so.



Wireframe



Mobile ApP



First, I crafted wireframes tailored for mobile devices to ensure seamless usability across both iPhone and Android platforms, extending to tablet apps.



Website



Later, I created the wireframes for web browsers to ensure consistency and accessibility across all devices, providing a unified experience whether accessed on desktop, laptop, or mobile devices.



Apply Visual Design



Visual Exploration



First, I went to visual design to explore 3 distinct visual styles for the client's consideration. I applied HOY's brand color (red-orange) and incorporated circular shapes as the primary visual element in the UI design.



Design System



Then, I developed a design system comprising UI components, typefaces, and icons, ensuring consistency across platforms with both dark and light themes. I ensured the system could adapt to mobile, tablet, and web interfaces, providing a unified experience across iPhone and Android platforms.



Phone



Home 1



Home 2



Live TV



Details



Events Calendar



Programs



Profile



My Account



Sign Up



Tabelt



Home



Live TV



Video Player



Details



Website



Home



Programs



Live TV



Events Calendar



Details



Watch History



Profile Editing



Award-Winning



I am proud to share that my design work and collaboration with i-CABLE HOY Limited and HKAI Limited have led to their being awarded "Cloud Innovation of the Year—Media" at the Alibaba Cloud 10th Anniversary Celebration and Award Ceremony 2024. By leveraging cutting-edge cloud solutions and innovative design strategies, we transformed their media operations and achieved this prestigious recognition. Congratulations to both companies on this achievement!



What I learned & next steps



This project taught me the importance of providing a seamless user experience across devices and content discoverability. I plan to leverage this insight to enhance the platform's offerings and drive engagement.


In the next phase, I'll continue to discuss with the client to focus on implementing new features, such as a loyalty rewards program to incentivize membership sign-ups and participation. I'll also continue improving content discoverability and personalizing recommendations through user preference and data analysis to exceed user expectations.


HOME



Let's get social