Skip to main content

Custom layouts

My role

In my role as a product designer at StreamYard, I led the design of the Custom Layouts feature, which was conceptualised to enhance the flexibility and personalisation of live streaming. This feature allows users to arrange video feeds, graphics, and other visual elements freely, catering to the specific demands of different broadcast formats and viewer interactions. The introduction of Custom Layouts at StreamYard was driven by a need to give creators more control over the visual dynamics of their streams, supporting a diverse range of presentation styles from panel discussions to solo broadcasts. By enabling such versatility, Custom Layouts aim to refine the user experience and elevate the production quality of each stream, reflecting a deep understanding of our user base’s preferences and requirements.

The Problem


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.


1. Enhance User Customisation

Goal: Enable users to fully customise their streaming layouts by providing a user-friendly interface that allows them to place and resize video feeds and media with precision.

Metric: Have at least 10k unique custom layouts made by users in the first 6months of release.

2. Improve User Engagement and Satisfaction

Goal: Achieve a user satisfaction rate of over 85% regarding the flexibility and usability of the Custom Layouts feature.

Metric: Monitor user feedback and satisfaction scores through surveys and usage data analytics post-launch.

3. Drive User Retention and Reduce Churn

Goal: Reduce churn rate by 5% year-over-year by meeting the specific needs of content creators through enhanced customisation tools.

Metric: Track churn rates and user retention statistics before and after the implementation of Custom Layouts.

4. Foster Innovation and Stay Ahead of Competitors

Goal: Establish StreamYard as a market leader in live streaming innovation by continuously updating and refining Custom Layouts based on user feedback and competitive trends. Create an innovative moat to attract new customers and reduce churn.

Metric: Conduct bi-annual reviews of competitive offerings and user requirements to inform ongoing development.

5. Increase Market Share

Goal: Attract new users from competitors and top-of-funnel by highlighting the unique customisation capabilities of Custom Layouts in marketing campaigns.

Metric: Measure the increase in new sign-ups attributed to the Custom Layouts feature through targeted marketing analytics.


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.

Ideation and Concept Development

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.

Stage: This is the stage in the Edit State. The edit state is highlighted by a purple coloured border.
Custom Layouts Toolbar: This is the custom layouts toolbar. 

 Tools included on this bar are as follows: 

 1. Create/Add slot
 2. Undo
 3. Redo
 4. Cancel
 5. Save
Camera Slot: This is a camera slot. This slot can only take 1 participant.

A specific guest can be assigned to this slot either from the backstage or via a custom link (url)
Media Slot: This a media slot. This slot can be used for screenshares, slides, videos. It can only accept 1 media item at a time.
Dynamic Grid: This is a dynamic grid. The dynamic grid can take up to 10 participants and the slots within the grid will adapt to the grid size based on the settings set in the toolbar. 

 The grid is currently selected which is illustrated by the blue outline and grab handles. 

 The corner handles allow you to uniformly resize the box. 
 The side handles allow you to change the aspect ratio of the selected item
Floating toolbar: The floating toolbar appears when an editable item on stage is selected. 

 The tools shown depend on which item is selected (Dynamic Grid, Solo Slot, Media Slot). 

 The floating toolbar follows the position of the selected item. So if you were to move the item the toolbar would follow.

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.

Designed with Ease of use as the core principle

The Dynamic Grid


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


We enhanced the dynamic grid with a ‘fill’ setting that adjusts camera feeds to the container’s aspect ratio. To prevent cropping faces, we designed and implemented smart, proprietary algorithms that automatically optimise the framing, ensuring clear and centred visibility of participants.


The ‘fit’ option preserves the original aspect ratio of the camera feed, adjusting it to best fit the container’s portrait or landscape orientation. We employed smart, proprietary algorithms to ensure this adjustment is seamless, enhancing ease of use and achieving professional-looking results.

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.

Implementation and Collaboration

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.

Video overview

Outcomes and Impact


Unique layouts created


Increase in users since feature launch


Daily active users since feature launch

The Custom Layouts project was a resounding success, delivered on time and exceeding initial expectations with the innovative addition of the dynamic grid. This feature significantly enhanced the flexibility and appeal of StreamYard’s offerings. In less than a year since its launch, users have created over 22,200 unique custom layouts, demonstrating the feature’s utility and creativity-enabling capabilities.

Furthermore, StreamYard has seen a substantial growth in its user base, adding 2 million new users, a testament to the feature’s impact and the company’s enhanced market position. User feedback has been overwhelmingly positive, reflecting satisfaction with the enhanced customisation options and the overall improved streaming experience. This success not only reaffirms our commitment to user-centred design but also underscores the strategic value of innovative features in driving business growth and user engagement.


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.