Helder Leal.

Designer

Helder Leal.

Designer

Helder Leal.

Designer

Helder Leal.

Designer

My5®

App design (2023)


Project Duration

3 Months


Services Provided

Ux Design, UI Design, Prototyping, User Testing



Trailers and previews


We aimed to integrate trailers and preview videos throughout the platform to give users a sneak peek of available content and TV shows, helping them make informed decisions about what to watch.




The Challenge


Users appreciate being able to make informed decisions about what to watch next. Without trailers or previews, choosing a new series or movie becomes a hit-or-miss experience, which can lead to dissatisfaction if the content does not meet their expectations. With many streaming platforms offering trailers and previews, not having this feature might put My5 at a competitive disadvantage. Users have come to expect these insights as part of their content browsing experience, making it a standard feature across entertainment platforms.




Home Page Integration


On the Home Page, a trailer begins playing after two seconds of "Focus" on the "Popular" rail. Once the trailer ends, it returns to the backdrop image.





"Recommended for You" Portrait Rail


  • Integrated trailers into the Portrait Rail section to provide personalized recommendations.

  • Intuitive interaction flow where, after two seconds of "Focus", the Portrait image expands to landscape, displaying additional metadata.

  • Implemented auto-play functionality to start trailers if the user remains idle for two more seconds, enhancing engagement.

  • Users can now easily navigate using directional keys and switch between cards or go to the show page by pressing "Enter" while in "Focus" mode.





Show Page Enhancement


  • Implemented a timed trigger to initiate the trailer two seconds after "Focus", providing users with a seamless viewing experience.

  • User-friendly navigation options, such as pausing the trailer and scrolling down to the episodes list with a press of the "Down" key.

  • Enabled users to resume the trailer from where it was paused by pressing the "Up" key, ensuring uninterrupted viewing.





Project Duration

3 Months


Services Provided

Ux Design, UI Design, Prototyping, User Testing



Trailers and previews


We aimed to integrate trailers and preview videos throughout the platform to give users a sneak peek of available content and TV shows, helping them make informed decisions about what to watch.




The Challenge


Users appreciate being able to make informed decisions about what to watch next. Without trailers or previews, choosing a new series or movie becomes a hit-or-miss experience, which can lead to dissatisfaction if the content does not meet their expectations. With many streaming platforms offering trailers and previews, not having this feature might put My5 at a competitive disadvantage. Users have come to expect these insights as part of their content browsing experience, making it a standard feature across entertainment platforms.




Home Page Integration


On the Home Page, a trailer begins playing after two seconds of "Focus" on the "Popular" rail. Once the trailer ends, it returns to the backdrop image.





"Recommended for You" Portrait Rail


  • Integrated trailers into the Portrait Rail section to provide personalized recommendations.

  • Intuitive interaction flow where, after two seconds of "Focus", the Portrait image expands to landscape, displaying additional metadata.

  • Implemented auto-play functionality to start trailers if the user remains idle for two more seconds, enhancing engagement.

  • Users can now easily navigate using directional keys and switch between cards or go to the show page by pressing "Enter" while in "Focus" mode.





Show Page Enhancement


  • Implemented a timed trigger to initiate the trailer two seconds after "Focus", providing users with a seamless viewing experience.

  • User-friendly navigation options, such as pausing the trailer and scrolling down to the episodes list with a press of the "Down" key.

  • Enabled users to resume the trailer from where it was paused by pressing the "Up" key, ensuring uninterrupted viewing.





Project Duration

3 Months


Services Provided

Ux Design, UI Design, Prototyping, User Testing



Trailers and previews


We aimed to integrate trailers and preview videos throughout the platform to give users a sneak peek of available content and TV shows, helping them make informed decisions about what to watch.




The Challenge


Users appreciate being able to make informed decisions about what to watch next. Without trailers or previews, choosing a new series or movie becomes a hit-or-miss experience, which can lead to dissatisfaction if the content does not meet their expectations. With many streaming platforms offering trailers and previews, not having this feature might put My5 at a competitive disadvantage. Users have come to expect these insights as part of their content browsing experience, making it a standard feature across entertainment platforms.




Home Page Integration


On the Home Page, a trailer begins playing after two seconds of "Focus" on the "Popular" rail. Once the trailer ends, it returns to the backdrop image.





"Recommended for You" Portrait Rail


  • Integrated trailers into the Portrait Rail section to provide personalized recommendations.

  • Intuitive interaction flow where, after two seconds of "Focus", the Portrait image expands to landscape, displaying additional metadata.

  • Implemented auto-play functionality to start trailers if the user remains idle for two more seconds, enhancing engagement.

  • Users can now easily navigate using directional keys and switch between cards or go to the show page by pressing "Enter" while in "Focus" mode.





Show Page Enhancement


  • Implemented a timed trigger to initiate the trailer two seconds after "Focus", providing users with a seamless viewing experience.

  • User-friendly navigation options, such as pausing the trailer and scrolling down to the episodes list with a press of the "Down" key.

  • Enabled users to resume the trailer from where it was paused by pressing the "Up" key, ensuring uninterrupted viewing.





Live TV

Live TV remains a significant form of entertainment in the digital age, as it offers immediate and communal viewing experiences. My5 recognises the importance of providing seamless access to live content across its channels. This case study presents the evolution of the Live TV feature, highlighting key iterations, user feedback, and the refinement of the final version.



Version 1


Positive feedback

✔  It is convenient to get a glance at the live content available on different channels.

✔  It is easy to switch between channels and view what is coming up next.



Negative feedback

✘  Not all channels are visible at the same time.

✘  Some users were ignoring the channel logo and focusing solely on the top component while switching channels.



Version 2



Positive feedback

✔   It is easy to navigate between channels while watching the content of the selected channel.

✔  ​​​​​​​Users easily understood what was "On" and what was "Up Next"



Negative feedback

✘  This version is missing an overview of what's live on all channels.

✘  Animations affected performance in old devices such as VOD set-up boxes. 



Final Version




Conclusion



Throughout the design process and user testing phases with My5 users, we gained valuable insights that informed our design decisions. It became evident that providing users with a comprehensive overview of all five channels on the Live TV page was essential for facilitating easy access to live content.

After evaluating both "Version 1" and "Version 2" of the Live TV page, we recognised the strengths and limitations of each iteration. While "Version 2" boasted a visually appealing interface and streamlined channel-switching experience, we encountered performance issues with animations on certain devices. Consequently, we opted to maintain a carousel-based navigation system to ensure consistent performance across all devices.

During our assessment of "Version 1," we identified an issue where some users were losing track of the selected channel due to the placement of the Live/Up next component at the top of the page, obscuring the channel logos. To address this issue, we repositioned the component beneath the carousel, allowing for improved visibility of the channel logos beneath the show thumbnails. This adjustment significantly enhanced user clarity and navigation efficiency.




Thank you for watching.