StreamYard Custom Layouts

My role

Challenge

In designing the Custom Layouts feature for StreamYard, we addressed a critical feedback loop from our users. While our default layouts provided a foundational structure for broadcasts, they often fell short in accommodating the diverse and evolving creative needs of our users. The demand for a more flexible solution was evident—creators wanted the ability to tailor the look and feel of their shows to match their unique vision, extending to the minutiae of overlay designs and interactive elements.

Custom Layouts were conceived as a response to this need. By allowing users to design and implement their own layouts, this feature drastically broadened the scope of customisation, enabling creators to align the visual presentation of their shows with their specific branding and content requirements. The flexibility to modify every aspect of the layout meant that users could innovate beyond the standard offerings, enhancing viewer engagement and differentiating their streams.

From a business perspective, introducing Custom Layouts was strategic. It not only served as a direct response to user feedback but also positioned StreamYard as a forward-thinking platform in a competitive market. By empowering users with the tools to create highly personalized and professional-looking streams, we aimed to reduce churn and build new competitive moats. The anticipation is that this feature will cement user loyalty and attract a broader audience, setting the stage for further discussion on its strategic impact, which I will delve into later in the article.

For the Custom Layouts project at StreamYard, we undertook comprehensive research efforts to ensure the development of a feature that not only met but exceeded our users’ expectations. Our approach was multi-faceted, involving several key activities:

Competitor Analysis

We started by examining the offerings of our competitors, identifying gaps and opportunities where our Custom Layouts could provide unique value and a better user experience.

User Interviews

We conducted in-depth interviews with a diverse group of our customers to gather firsthand insights into their needs, preferences, and frustrations with the existing layout options.

Prototype Testing

Building on the insights gathered, we developed several prototypes and concepts. These were tested to see how they stood up to real-world user scenarios, allowing us to refine and adjust based on actual user feedback.

Insights from Internal Teams

We also leveraged insights from our customer support and sales teams, as well as data from weekly customer calls. These sources provided valuable information on user complaints, suggestions, and usage patterns which were critical in shaping the project direction.

Technical Feasibility Studies

I collaborated closely with an engineer to explore how we could technically implement the custom layouts. This partnership was crucial in understanding the technical constraints and possibilities, which informed our innovation strategy for the product.

Internal Testing of Prototypes

Finally, we built and tested prototypes internally to ensure stability and functionality before proceeding with wider user testing.

This thorough and iterative research process helped us define the scope and specifications for our MVP (Minimum Viable Product) of the Custom Layouts feature. It significantly boosted our confidence in the project’s success, providing a solid foundation based on real user needs and technical feasibility. These efforts not only shaped what the Custom Layouts project would become but also how we could innovate further to maintain our competitive edge in the market.

The feature I designed transformed the StreamYard stage into a versatile editor, enabling users to craft their own custom layouts using three distinct media types:

Camera Slot

This slot is designated for a single camera video feed, although it can accommodate audio-only setups under certain circumstances.

Media Slot

Functionally similar to the camera slot, this slot is tailored for other types of media, such as videos and slides, allowing users to integrate diverse content seamlessly into their streams.

Dynamic Grid

The centrepiece of our innovation, the dynamic grid, consists of multiple slots that adjust dynamically as participants are added. This feature represents a significant advancement over our competitors’ offerings by providing unmatched flexibility. Users can create a consistent layout that automatically adapts to the number of participants, eliminating the need to design multiple layouts for different scenarios. This not only fosters greater creative freedom but also significantly enhances user experience by simplifying the layout creation process.

These enhancements are designed to empower our users with greater control and creativity, setting a new standard in user experience that clearly differentiates us from our competitors.

In designing the Custom Layouts feature for StreamYard, my primary focus was on enhancing the user interface and user experience to make it as intuitive and customisable as possible. To achieve this, I integrated the editor directly into the StreamYard stage. This integration ensures that users immediately recognise the correspondence between the layouts they are creating and the actual broadcast, facilitating easier placement and adjustment of elements.

The feature comprises three main container types: a camera slot, a media slot, and an innovative component I developed called the dynamic grid. The dynamic grid automatically adjusts to accommodate the number of participants, ensuring the layout remains balanced and visually appealing regardless of participant count. Each container type is equipped with a floating toolbar offering a range of functionalities—moving layers up and down, toggling between fit and fill, alignment options, duplication, participant previews, and a delete button. Additionally, when a container is selected, resize handles appear, allowing users to adjust the size either uniformly or individually. The containers can be easily moved by dragging them across the stage canvas, and smart guides assist in centering, scaling, and precisely positioning the elements.

Further enhancing usability, I included undo, redo, and save functions to streamline the editing process. These features are part of a broader design philosophy aimed at maximising customisation while ensuring the interface remains user-friendly, thereby empowering creators to design their broadcasts with both ease and creativity.

The image above is a screenshot from the Figma design file for Custom Layouts. It highlights the extensive range of workflows incorporated into this sophisticated feature, which was meticulously designed to be both intuitive and user-friendly.

Flexibility

The dynamic grid I designed for StreamYard is a highly flexible feature that allows for extensive customisation of live stream layouts, catering to various user needs and preferences. This tool can manage anywhere from 1 to 10 participants, making it ideal for a diverse range of streaming scenarios from solo presentations to large panel discussions.

Users can align the grid in five different ways: left, horizontal centre, right, top, vertical centre, and bottom, depending on the desired visual emphasis and audience engagement. Additionally, it supports both ‘fit’ and ‘fill’ options to adjust how participant feeds conform to the available space—either maintaining the original aspect ratio (‘fit’) or filling the designated area completely (‘fill’). The grid can also be scaled to nearly any size or aspect ratio that the studio space allows, ensuring optimal use of screen real estate.

Depending on the aspect ratio chosen, the layout will adapt into a vertical stack, grid, or horizontal stack. This adaptability means that the dynamic grid can seamlessly transition between different visual arrangements based on the number of participants and the chosen settings, maximising both aesthetics and functionality.

To calculate the total number of possible layout combinations the dynamic grid can achieve, consider the variables:

1. Number of participants: 10 (ranging from 1 to 10)
2. Alignment options: 5 (left, centre, right, top centre, bottom)
3. Content fitting options: 2 (fit and fill)

Thus, the total number of combinations is the product of these choices:
Combinations = 10 * 5 * 2 = 100

This means there are over 100 unique ways to configure the dynamic grid based on these criteria alone, not counting the additional variability from scaling and aspect ratio adjustments.

Fit and Fill

The Patent

The dynamic grid is a distinctively innovative feature that I specifically designed for StreamYard to create significant competitive moats and ensure a leading edge over competitors. To protect this innovation and its unique market advantage, this feature is patented, preventing competitors from replicating its functionality. This strategic protection aligns with StreamYard’s business goals of maintaining technological leadership and enhancing user engagement through superior design and functionality.

The design and implementation of the Custom Layouts feature demanded robust collaboration. Throughout this project, I enjoyed a close partnership with an engineer, which significantly enhanced the quality of our final output. As StreamYard operates remotely, we maintained daily communication and utilized tools like Figma, Slack, and Loom to coordinate our efforts asynchronously.

For this particular feature, we adopted an unconventional approach by integrating coding directly with the design phase. This decision was driven by the need to develop rapid prototypes that extended beyond the capabilities of Figma, owing to the innovative nature of the feature. Our extensive research had already given us high confidence in our direction, allowing us to simultaneously advance the UI/UX design and backend code. While this method isn’t suitable for every project, it proved highly effective for this initiative.

Additionally, we had to navigate certain existing complexities within StreamYard, such as automatic layout adjustments triggered by changes in media on the stage. These challenges introduced some intricacies to the project. However, we managed to address these issues successfully, ensuring that the project remained within scope and met our standards for functionality and user experience.

The Custom Layouts project at StreamYard, highlighted by the introduction of the innovative dynamic grid, was a significant success, delivered on time and exceeding expectations. Since its launch, it has led to the creation of over 22,200 unique layouts and has contributed to a substantial growth in the user base by 2 million. The project has received highly positive feedback, underscoring its impact on enhancing user customisation and engagement.