SlingStudio
Console & Capture App and Web Portal
PROJECT OVERVIEW
SlingStudio is an all-in-one, portable, wireless solution for high-quality, multi-camera video production, designed for prosumers. It supports monitoring, recording, switching, and live broadcasting to platforms like YouTube and Facebook. Released in 2017 as a major innovation from Sling Media, the product took over a year of development from concept to market launch. The UX team delivered three interface experiences: iPad, desktop, and mobile applications.
ROLE AND RESPONSIBILITY
I designed high-level UX flows, including wireframes, for SlingStudio. In addition to leading the visual design, I was responsible for the product’s branding and imagery. I collaborated closely with designers, product managers, and engineers throughout the process. I remained highly detail-oriented and continually refined the design until it was pixel-perfect.
WHAT DOES THE SLINGSTUDIO APP OFFER
The SlingStudio system offers two key applications—SlingStudio Console and SlingStudio Capture—that work together to provide a comprehensive, portable, and wireless multi-camera video production solution.
The Console App transforms an iPad or Mac into a full-featured production studio, enabling users to monitor, switch, record, and livestream content while acting as both director and producer.
HOW IT WORKS
UX DESIGN PROCESS & USER FLOW
CLICK IMAGE
TO ENLARGE
HIGH-FIDELITY WIREFRAME
As part of the design process, I created a high-fidelity wireframe and ran multiple tests to assess its layout and overall usability.
CLICK IMAGE
TO ENLARGE
UI DESIGN LAYOUT WITH GRID SYSTEM
We tested various dimensions to embed multiple videos in a 16:9 aspect ratio. However, due to limited screen space, we faced challenges displaying multiple videos simultaneously. To overcome this, we explored several layout options and delivered pixel-perfect specifications to the engineering team for implementation and testing. Ultimately, we designed an optimized solution tailored for the iPad 9.
Phase 1
Video Aspect Ratio
288x162 px & 672x378 px
Spacing 8 &16px
Phase 2
Video Aspect Ratio
272x153 px & 640x360 px
Spacing 8px
Phase 3
Video Aspect Ratio
288x162 px & 672x378 px
Spacing 12 &12px
Final Grid System and Dimensions
FINAL UI DESIGN
Created high-quality visual content, including color palette, icons, typography, and logo. Led and managed visual designers to ensure consistency, and delivered visual assets along with a comprehensive style guide for implementation.
CLICK IMAGE
TO ENLARGE
WEB PORTAL WIREFRAMES
I created the wireframes for the SlingStudio web portal, ensuring consistency with the design of the Console and Capture apps. The portal not only aligned visually and functionally with the app experience but also introduced additional features such as content sharing, settings management, and a complete onboarding flow for new users. These wireframes served as the foundation for the visual design and helped communicate functionality and layout to stakeholders and developers during the early stages of the project.
CLICK IMAGE
TO ENLARGE
CLICK THE THUMBNAIL TO VIEW, OR
USE THE SIDE ARROWS TO NAVIGATE
RESPONSIVE GRID SYSTEM
I conducted research to identify best practices for implementing a responsive grid system tailored to our product. Based on my findings, I designed layouts for multiple screen sizes, including 1366×1024px, 1440×800px, and 1920×1080px. After careful evaluation, we selected 1920×1080px as the primary resolution, as our target audience—prosumer video editors—preferred working in high-resolution environments. I also tested the design across mobile platforms and provided percentage-based specifications and three breakpoints to ensure optimal responsiveness across devices.
Most Common Desktop Screen
Resolution Sizes Worldwide
-
1366×768 – 29.25%
-
1920×1080 – 17.34%
-
1440×900 – 7.32%
-
600×900 – 5.72%
-
1280×800 – 5.27%
-
1280×1024 – 4.51%
CLICK IMAGE
TO ENLARGE
Testing with Mobile - 640x1136px
FINAL WEB PORTAL DESIGN
I created consistent visual elements that maintained the same visual language and tone as the SlingStudio Console, with the exception of the background color—adjusted to align with the SlingStudio portal website. To ensure brand alignment, I collaborated closely with the marketing team and incorporated their design direction. I delivered the majority of the visual mockups, along with detailed specifications and supporting marketing materials.
CLICK IMAGE
TO ENLARGE
