Transforming the Formula 1 Experience: Camera Stream Switcher

CLIENT: Streamlayer, Formula 1 TV
LOCATION: US, IL

Brief

Streamlayer, a B2B company specializing in interactive streaming enhancements, approached me to redesign the UI for the F1 TV app. Their goal was to introduce a groundbreaking feature that allows viewers to customize their race experience by selecting and viewing multiple camera angles for specific drivers during live broadcasts. This feature aimed to offer immersive options: a driver’s front view, rear view, main view, and an inside-the-vehicle face camera with audio commentary.

Project Details

The task was to design an intuitive menu system where viewers could effortlessly select from various drivers and switch between different camera perspectives—main, front, rear, and face camera from all of the drivers on the race. Additionally, the inside-the-vehicle camera has the driver’s microphone feed (live radio), allowing viewers to hear live insights from each drivers which is a new unique experience to introduce in the app.

Challenge

One of the most significant challenges of this project was sourcing and synchronizing multiple video streams from a single race, each offering different camera perspectives such as the front, rear, and driver views, as well as the main race feed with live commentary. To accurately showcase the potential of this feature in the F1 TV app, it was crucial to present a seamless and realistic experience through the mockup.

Solution

To solve this, I took a deep dive into countless hours of race footage on YouTube and other platforms, carefully searching for videos that featured the necessary variety of camera angles for the same race and period. After extensive research, I discovered a particular video that somehow matched the project’s requirements:

As this was a significant highlight of the race, I explored other videos on YouTube to find additional camera views from the same event

I proposed a clean and interactive layout that allowed users to:

  • Select Drivers: Viewers could choose from a menu featuring icons of each driver with their respective team logos (e.g., McLaren).
  • Switch Camera Angles: Users could toggle between front, rear, and face camera views, with easily distinguishable icons.
  • Simultaneous Viewing and Audio: Implement a layout that supports multiple live streams within a single view and includes audio from the driver’s mic, providing an immersive experience by capturing the driver’s commentary and interactions.
layout and icon designs that i'll put in the lower part of the stream mockup

Software Used

  • Figma—for creating the buttons and the layout
  • Adobe Illustrator—for designing the icons (front, back, driver etc.)
  • Protopie—for designing the icons (front, back, driver etc.)
 

Execution

 
  • UI Design: Created detailed icons and interactive elements using Adobe Illustrator, ensuring they were visually appealing and functional.
  • Layout: Designed the interface layout in Figma, focusing on usability and visual hierarchy to enhance user experience.
  • Mockups: Developed the mockup using Protopie featuring driver icons and camera view options – demonstrating how users could interact with the new feature.

Final UI Mockup

final approved design

Check the actual interactive mockup here – note that you can only choose limited drivers specifically N. Latifi (all views), L. Stroll (front only), G Zhou (front only) as these are the only available videos available on public at that time.

Results

  • The UI design was well-received and integrated into Streamlayer’s development process for the F1 TV app.
  • Enhanced User Experience: The redesigned interface provided viewers with a more engaging and personalized race experience, including the unique feature of hearing live commentary from the driver’s mic.
  • Ongoing Implementation: While the feature’s implementation is still underway, it’s exciting to have contributed to such a significant enhancement for a renowned brand like Formula 1.