Introduction
Stream Sync emerged as a solution to a common challenge in the live-streaming space: providing an intuitive, seamless way to watch multiple perspectives from platforms like YouTube and Twitch. Designed and developed by a single individual, the project blends minimalist design with robust technical implementation, enabling users to watch up to six synchronised streams simply by providing URLs.
This case study explores the project’s journey, highlighting the creative design process, technical implementation, challenges faced, and the outcomes achieved from feedback from real users.
Project Overview
Stream Sync serves as a platform for managing and synchronising multiple video streams across devices. The project’s goals were to offer a responsive, user-friendly experience, solve stream synchronisation challenges, and provide tailored layouts for desktop, tablet, and mobile users.
The platform combines innovative branding, intuitive UX/UI design, and a technically sound backend to create a versatile viewing experience for its target audience.
Design Approach
Brand Identity
Colours: Blue (#4325E2) conveys trust and reliability, while orange (#E28A25) adds energy and creativity.
Logo: Designed with minimalist elements to symbolise multi-stream
integration, using coloured waves crossing each other in sync.
Slogan: “All Perspectives, Perfectly in Sync.”
The Journey of the Logo
I aimed for a logo design that was both simple and meaningful.
After exploring two initial concepts, I arrived at the current design that was very different but fit better, two overlapping waves paired with a play
button.
This combination symbolises multiple streams playing together in perfect sync and works really well to the brand identity I have for the project.
UI/UX Design Principles
Modular Grid System: A responsive layout that adjusts dynamically based on the number of streams.
Device-Specific Experiences: Separate layouts optimised for desktops, tablets, and mobile devices.
Intuitive Controls: Users can manually start and synchronise streams while maintaining creator view counts ethically.
Technical Implementation
Tech Stack
WordPress: Foundation for the platform, leveraging Elementor Pro for visual customisation.
PHP/ JavaScript: Backbone for dynamic functionality and custom features.
CSS: Ensured a polished, responsive aesthetic.
Core Features
Device-Specific Redirects:
Users are redirected based on device type to ensure the best viewing experience.
WPForms handles user preferences, directing desktop/tablet users to “/Watch“ & mobile users to “/Watch-M“.
.video-container {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media screen and (max-width: 768px) {
.video-container {
grid-template-columns: 1fr;
}
}
Custom URL parsing and embedding:
A PHP function processes YouTube and Twitch URLs, converting them into embed-ready formats.
Ensures consistent functionality across platforms.
$output = ‘<div class=”video-container” data-video-count=”’ . $video_count . ‘”>’;
foreach ($video_urls as $url) {
$output .= ‘<iframe src=”’ . esc_url($url) . ‘” frameborder=”0” allowfullscreen></iframe>’;
}
$output .= ‘</div>’;
Device-Specific Redirects:
Users are redirected based on device type to ensure the best viewing experience.
WPForms handles user preferences, directing desktop/tablet users to “/Watch“ and mobile users to “/Watch-M“.
Conflict Resolution with Elementor Pro:
Debugging style conflicts using browser developer tools and overriding pre-set Elementor styles with custom CSS.
Regular cache clearing to ensure updates were reflected during development.
Challenges and Solutions
1. Responsive Design Across Devices
Issue: misaligned grid layouts and poor usability on smaller screens.
Solution: Introduced dynamic CSS grids and media queries to create a seamless experience across devices.
2. Embedding Ethics and Functionality
Issue: Ensuring embedded streams respect creator view counts.
Solution: disabled autoplay, requiring manual interaction to start streams.
3. Style Conflicts with Elementor
Issue: Pre-existing styles interfered with custom designs.
Solution: Used browser tools to isolate conflicts and implemented targeted CSS overrides.
4. Dynamic Layout Adjustments
Issue: Adapting layouts for varying numbers of streams.
Solution: A data-video-count attribute dynamically adjusted the grid configuration.
Key Features & Benefits
Dynamic Video Grid:
Automatically adjusts layouts for up to six streams.
Responsive Design:
Optimised for desktops, tablets, and mobile devices.
Platform Integration:
Supports YouTube and Twitch with plans for future expansion.
Intuitive user flow:
Simple URL input and device-specific redirection improve usability.
Design Achievements
A sleek, user-friendly interface aligned with the brand’s minimalist philosophy. Positive feedback on the grid layout and visual design.
Technical Success
Resolved critical layout and embedding challenges. Created a scalable codebase for future functionality expansions.
User Experience
Seamless navigation across devices and layouts. Beta testing feedback indicated high user satisfaction with the platform’s simplicity and functionality.
Future Plans
– Enhanced Synchronisation: Explore automated synchronisation for pre-recorded content.
– Feature Expansion: Introduce chat integration and additional platform support.
– User Feedback Iteration: Refine the platform based on insights from more beta testing.
Reflection
Stream Sync showcases the synergy between creative design and
technical problem-solving. Despite initial hurdles, the platform delivers on its promise of a seamless multi-stream viewing experience. It highlights the importance of adaptability and innovation in developing user-centric solutions.
This case study demonstrates my ability to identify problems, iterate on solutions, and deliver a project that is both visually compelling and
technically robust. Stream Sync not only meets its goals but sets the stage for future advancements in multi-stream viewing technology.
Chat Functionality
Some users expressed interest in adding a chat feature to enhance collaboration during live streams from each live stream in view. While the idea is compelling, its feasibility poses challenges:
Legal and Privacy Concerns
Ensuring compliance with data privacy regulations (e.g., GDPR) and no platform providing a link or API for this to even function would be very difficult.
Tech-Barriers
Implementing live chat would require substantial backend infrastructure, real-time data handling, and user authentication systems of the platforms so It is just unrealistic.
Core Focus
Adding chat could detract from the platform’s primary goal facilitating multi-stream viewing for collaboration. Stream Sync is designed to offer a distraction-free way to watch multiple viewpoints simultaneously, which may conflict with an active chat feature.
Chat Screenshots
Adding other Platforms
Through user feedback, several users inquired about expanding the platform’s compatibility with additional live streaming platforms such as Instagram Live, Facebook Live, X (Twitter), and TikTok. The findings revealed several technical and policy-related limitations:
Cannot be added due to Instagram’s lack of embeddable public live stream URLs and its strict access controls, which require app-based authentication.
X (Twitter)
Live streams on X are restricted and not available as embeddable content. Current live functionality is limited to select accounts or partnerships and lacks support for external embedding.
Integration is technically possible using Facebook’s Embedded Video Player API. However, this would require API setup and ensure that all live streams are set to public, which may introduce additional user-side complications.
TikTok
Similar to Instagram, TikTok does not provide an API or URL structure for embedding live streams, confining their live functionality to their platform alone.
Addressing YouTube Live Compatibility Issues
A notable issue emerged regarding YouTube Live URLs not functioning as expected. The root cause was identified as YouTube’s varied URL
formats:
– youtube.com/live/ was not initially accounted for in the embed
functionality.
– Previously supported formats like m.youtube.com,
youtu.be, and standard youtube.com/watch were
working.
The issue was resolved by updating the code to include parsing for the youtube.com/live/ format, ensuring seamless compatibility moving forward.
Positive Feedback on UI/UX Design
The UI and UX design received commendation for its clarity and
intuitiveness. Users praised the platform for:
– Clearly labelled elements, which made navigation straightforward.
– Consistent design across devices, enhancing the accessibility of the interface.
This feedback reinforces the importance of maintaining user-centred design principles throughout the project’s development.
Newsletter Feedback
Feedback and Email Campaigns: Connecting with Users
As the sole creator of Stream Sync, one of my goals has always been to create a platform shaped by its users. From the start, I knew that feedback would be crucial—not just in identifying bugs but in truly understanding what features people wanted to see. That’s why I set up email campaigns early on, ensuring I could communicate regularly with beta testers and gather their insights to shape the platform’s future.
Why Email Campaigns?
I wanted to create a clear and transparent way to share progress, highlight updates, and give users a voice in the development process. Stream Sync isn’t just my project—it’s built for people like me who want a better way to enjoy collaborative live-streaming experiences. The emails are my way of keeping everyone in the loop and showing how their input directly influences the platform.
What I have Shared So Far
The first two newsletters have already made a huge impact, and reflect both the progress of Stream Sync and the input from the community:
First Email: “Stream Sync – 2 Weeks In, Here’s What’s New”
In this email, I celebrated the early milestones we hit and thanked beta testers for jumping on board.
I outlined the fixes made to YouTube Live compatibility, directly addressing feedback from users who experienced issues with live stream embeds.
I made it clear that this is a collaborative effort, encouraging testers to use ChatWay for bug reports and feature requests.
The goal was simple: keep the community involved, excited, and ready to share their thoughts.
Second Email: “Exciting Stream Sync Updates: Dark Mode & Grid Enhancements”
Based on feedback, I prioritised some highly requested updates and shared them in this
newsletter.
Dark Mode was added a feature many users wanted from the start. I wanted to show that their requests weren’t just being heard; they were being acted upon.
The grid system received significant updates, making it more dynamic and responsive across different devices.
These updates came directly from testers pointing out limitations in the initial version.
The tone was celebratory, thanking everyone for their role in shaping these updates while building
excitement for what’s next.
How Feedback Is Shaping Stream Sync
Each email isn’t just an update—it’s a way to build a feedback loop. Tools like ChatWay make it easy for users to share their thoughts, report issues, and suggest new ideas. Every piece of feedback gets reviewed, and it’s exciting to see how even small suggestions can lead to big improvements.
For example, I wouldn’t have added Dark Mode this early without the overwhelming demand from testers. It’s features like this that remind me how important it is to listen to the people who are actually using the platform.
Why This Matters to Me
Creating Stream Sync has been a personal challenge to push my skills in design, development, and user experience. These email campaigns are more than just updates—they’re a reflection of how this project is evolving alongside the people using it. I love seeing the platform become something not just functional, but genuinely useful to others (and to me—I’ve already found it so helpful when watching multi-stream collaborations).
What’s Next?
I’m already planning more email updates, and I want them to keep the same focus: transparency, progress, and collaboration.
I’ll be introducing sneak peeks of upcoming features to get early feedback.
I’m looking at ways to make the emails even more personal, tailoring updates to what users are engaging with.
And, of course, every step of the way, I’ll be asking: How can we make Stream Sync even better?
The emails are just one part of the process, but they’re essential in turning Stream Sync from a good idea into a platform that genuinely delivers.
I feel I’m building something great, and I can’t wait to see where it goes next.
Preview Credits: Featured Video Sources
The videos embedded in this case study are credited to their respective creators. These thumbnails were included as live previews during the project development phase to demonstrate the functionality of Stream Sync, a platform designed to watch multiple video outputs seamlessly in collabs.
These particular videos were chosen because they represent content I personally enjoy and regularly engage with, inspiring the core idea behind Stream Sync. While these videos are not directly related to the project, they provided a meaningful context for testing and showcasing the platform’s capabilities.
Desktop – 6 View
youtube.com/watch?v=64bBGfoKaYQ | Hololive | Koseki Bijou Ch. hololive-EN
youtube.com/watch?v=6ZTyM3eLhUE | Hololive | Hakos Baelz Ch. hololive-EN
youtube.com/watch?v=4IZuK021HI0 | Hololive | Ninomae Ina’nis Ch. hololive-EN
youtube.com/watch?v=xSHw_eNgEIM | Hololive | Mori Calliope Ch. hololive-EN
youtube.com/watch?v=0ZvTI9cibvE | Hololive | Cecilia Immergreen Ch. hololive-EN
youtube.com/watch?v=_-UKePzQEmw | Hololive | Nanashi Mumei Ch. hololive-EN
Mobile – 3 View
youtu.be/9zeeEP9phac?si=XWPjm09epAmLj0y3 | idol-ENCORE | Shabel Tonya Ch. idol-ENCORE
youtube.com/live/f2O8u2TWGfg?si=2qVB1Bc2xoyYTAQ5 | Hololive | Pekora Ch. 兎田ぺこら
youtube.com/watch?v=4IZuK021HI0 | Hololive | Ninomae Ina’nis Ch. hololive-EN
